Full Stack Bootcamp Series - Develop About Page [PART 1]

Explore the heritage and significance of the pastry shop by examining its origins and the 19th century recipe book as we outline the about page to be built.

Create a new folder named fsd (full stack development) to house all files for this quarter and establish a proper folder structure, with guidance across the next two video series.

Open Visual Studio Code and select Open Folder to create and open the FSD folder. Name the folder, confirm it appears in the left pane, and proceed.

Create a learn folder under the FSD directory, add an Alan folder to house each technology, and create separate technology folders within learn using the new folder icon.

Create the html folder in the Learn directory by clicking the Learn folder, using the new folder icon, typing html, and pressing enter; then create the Istanbul folder.

Create the html file for our story page by opening the HTML folder from the previous video, clicking new file, naming it our-story.html, and creating it to continue.

Develop the about page by writing HTML with a doctype, displaying headings, using Visual Studio Code to type the less-than symbol, select from a dropdown with Enter, and save file.

Include the doctype declaration as the first line to signal to the browser that the file is an HTML document and to specify HTML5 as the version.

Learn to include the html tag by writing code, positioning the cursor, and typing the < and > symbols to insert lines, then preview the next video about Discord.

Understand the html tag, including opening and closing tags, the slash prefix, and how Visual Studio Code can auto-generate closing tags.

Learn to structure an html about page by inserting the body tag and a heading, using Visual Studio Code to auto-indent with four spaces for readability.

Open the historical HTML file in a browser by right-clicking or control-clicking on Mac, reveal in Finder or File Explorer, then verify our story heading displays in bold.

Examine styling limitations in HTML, focusing on how font and color changes influence the output, and preview the upcoming code explanation.

Discover how the body tag defines the content that appears on a web page, how multiple tags reside inside it, and why a page has a single body element.

Explore the heading tag explained, revealing how h1 to h6 form six levels with decreasing font sizes, rendered in the body's order by the browser for page structure.

Define what HTML stands for, how hypertext links connect documents, and how markup tags render text as headings, while noting HTML standards are defined by an organization.

Examine the intended layout of our story page, verify the tab title shows Magic City, and plan the big picture title for the next video.

Learn how to translate French words with accents using Google Translate, identify patisserie as the French word, and copy the translated term for use in upcoming steps.

Define the hashtag before the body, place the cursor at the end of the html tag, and insert a new line to display the title.

Learn how the web page title appears in the browser and why you must manually refresh to display the modified title.

Apply a meta tag with charset to fix title display and validate the title works, while defining a new target within the rectangle and placing a line before the title.

Press ctrl+s to save the file in Visual Studio Code. The white circle disappears to confirm the save, then reload the browser to verify the title displays correctly.

Explore how hashtags convey extra information about web pages, and how utf-8 enables all language characters in titles and content, with the browser applying this metadata to correct display.

Learn how the title tag helps identify a page among many open tabs, aids bookmarking, supports search engine ranking, and appears in a larger font when defined for each page.

Learn about HTML attributes, how attribute names and values are defined, separated by equals signs, and wrapped in single or double quotes.

Learn how a favicon, a small image displayed next to the page title in HTML terms, enhances branding and how to implement it in the sample layout page.

Download the favicon image file from the resources section to obtain the icon asset, then proceed to the next video as the instructor explains the subsequent steps.

Open the downloads folder, then copy resources.zip using Ctrl+C on Windows or Command+C on Mac, before proceeding to the next video on how to extract the zip file.

Reveal the Learn folder in File Explorer or Finder, locate the fsd folder, and paste the resources.zip file using Ctrl+V or Cmd+V to complete the step.

Extract the resources.zip file to reveal the resources folder, then open Visual Studio to access it; Windows users use Extract all, uncheck this option, while Mac users double-click to extract.

Verify the resources folder and note it starts with a single image file, expanding as the course progresses toward a downloadable zip of all necessary files.

Locate the favicon file in the resources/images folder, create an icon with an online favicon generator, adjust font size, color, and background, then download the final icon.

Create a folder named images inside the project, then copy the favicon image into it using copy and paste shortcuts for Mac and Windows.

Delete the resources.zip after extraction by right-clicking and selecting delete; Mac users use control-click. Follow the on-screen instructions and move on to the next video.

Add a link tag for the favicon by setting rel to icon and pointing to the favicon image file in the head, then save the file.

Launch our story HTML in a browser using the live server extension, right-click and open with live server to auto-refresh changes.

Learn how to include a favicon using the link tag by setting rel to icon, type to image/png, and href to the favicon file.

Display a Paris street image on the about page by using the img tag, loading the file from the resources/images folder, and verifying it renders in the browser.

Source images responsibly by using public domain works, such as the Historic Paris illustration, to avoid copyright violations. Copyrights also cover video and audio and require careful rights management.

explain how the img tag defines an image, use the src attribute to locate the file, and the alt attribute to provide text when the image is unavailable.

Learn how screen readers enable visually impaired users to browse web pages using screen reader software, and watch a demo video to understand how page attributes convey content.

Learn how the alt attribute improves accessibility by describing images to screen readers, ensuring headings and images convey meaning for visually impaired users.

Demonstrate editing an HTML file in Visual Studio Code, inserting text after the image tag, saving, and previewing in the browser while noting a later misalignment.

Learn how the browser lays out HTML elements from left to right, wrapping to new lines as space runs out, and how headings and images align within the page.

Add a visual border to an HTML element to reveal its boundary, using a copied style definition and observe how borders affect page rendering and layout.

Explore the limitations of html layout by showing how heading and image can align side by side, and illustrate how simple structuring and state properties solve alignment.

Use a shelf analogy to explain how the div tag acts as a container and dividers organize HTML content on a page, with a new 'do' tag introduced for structure.

Build the about page header using div tag layouts to create a navigation bar with a logo and multiple items, including a story link, for future styling.

Clean up styles to simplify the page layout, remove unnecessary style attributes and lines, and demonstrate quick line deletion to improve html structure.

Learn to include navigation tags quickly in Visual Studio Code using Emmet abbreviations, generating open and close HTML tags, and previewing results.

Learn to use IntelliSense and automate <div> tag generation by triggering the dropdown with Ctrl+Space and inserting tags with Enter.

Include navigation content by configuring the logo, creating the navigation link text, and implementing the coding shown, including copy-paste steps and cursor placement, then move to the next video.

Learn to implement navigation with nav tags in the browser, see how divs render as block elements with items on separate lines, and prepare the page structure for later styling.

Change the outer div to a nav tag to define the main navigation as a semantic section. This improves accessibility for screen readers without altering visual results.

Use a div to enclose the entire page content aside from navigation, creating outer margins on the left and right, as the next video begins implementing this structure.

Explore command palette workflows for markup editing with keyboard shortcuts, selecting and cutting closing tags and placing them on new lines, comparing manual versus quicker methods.

Explore Visual Studio Code commands, learn how to trigger actions with shortcut keys, and access all commands via a mine pilot for a streamlined workflow.

Learn to open the command palette from the view menu and manage commands quickly using shortcuts like ctrl+shift+p and shift+b, with escape to dismiss.

Learn to use the command palette to quickly locate and execute commands such as open folder by typing keywords, selecting from the dropdown, and pressing enter, with escape to close.

Use the command palette to wrap selected lines with the abbreviation option, creating the outermost div and its closing tag with automatic indentation; save to apply the change.

Locate the book cover image file in the resources, copy it, and paste it into the HTML images folder to accompany the next video, the animal kingdom.

Add the bottom part of our story by including animal tags and an image tag for the book cover, using html tags in the resources file and a horizontal line.

Create a new folder named css to organize learning files, using the learn folder and the new folder option, then move on to the next video.

Create an HTML file named select contractors in the CSC folder, learn to use HTML tags and a select dropdown, and position the cursor between opening and closing tags.

Learn to include the main HTML tags for an about page, using abbreviations to craft the title and body tags, follow the steps, and prepare for the next video.

Learn how to use the style attribute to define element styling, set the font color to blue, and preview the heading on a live server.

Apply styles to multiple tags by using the style attribute, then switch colors like red to green across files by defining the styles in an external file.

Learn how to include multiple h2 tags and manage content with curly braces using abbreviations. Validate generated tags, check result, and save the final before moving to the next video.

Create a stylesheet file to define styles in a separate file and attach it to the project to hold section titles, preparing you to move on to the next video.

Define external styles and set the color property to red to style hashtags, but troubleshoot why the selector fails to apply the color on the web page.

Link an external stylesheet to HTML by configuring the link tag, apply states, and verify red styling for h2 elements.

Demonstrates applying styles to all h2 tags by changing color from red to green, saving, and verifying the result in Rosetta; use state to reflect color changes.

Learn how external css works by using selectors, including the element selector, to apply styles defined in a separate css file to html elements.

Explore implementing a class selector, assign a class attribute to a heading as a subheading, save the changes, and prepare for the next video on class selector.

Explore how CSS class selectors use a leading period to target elements with a specific class, then apply styles like green coloring to subheadings.

Create a new HTML file named styling in the CIUSSS folder, copy content from the selector, update the title, and clear the body to prepare for CSS styling of heading.

Define a CSS element selector to set the font color to blue, save the file, and preview the changes live in HTML before proceeding.

Demonstrate displaying Visual Studio Code and the Chrome browser adjacently by snapping windows, placing VS Code on the left and Chrome on the right, with Windows and Mac instructions provided.

Apply background color to page elements by defining semicolon-separated styles, verify the result in Chrome, and practice adding style definitions for consistent yellow backgrounds.

Apply padding around text using the padding property to create spacing, save the changes, and observe the added space in the layout, with references to size and units.

Apply a blue solid border around the edge of one element with a border width of 0.2, then check that the property works as expected.

Add spacing around the bottom using the margin property, set with the value to premium, save the file, and verify the bottom spacing before moving on.

Explore the box model by inspecting a webpage element, identify the content area, padding, border, and margin, and visualize how each layer forms the rectangular box.

Discover how to apply padding, border, and margin to specific sides, such as bottom border, top padding, and left margin, to control element spacing.

Apply text alignment by setting the text-align property to center, revert site-specific properties, and verify that the hello world text centers before moving on.

Learn to define the font-family as Rockwell, note that Rockwell Fondo may replace it on some systems, and maintain uniform fonts across Windows, Linux, and Mac environments.

Explore how to browse Google fonts, add a font to your selection, and use the import option to include font definitions in your project.

Apply the font family property with the value 'great vibes' from the fonts.google.com import, save changes, and see the form update with the new font.

Explore how to use @import to apply fonts, and understand how font files are located and loaded, including common import bugs when downloading fonts from the internet.

Adjust the font-weight property to render headings as normal, removing boldness, and observe the change. Include the weight setting and test its effect on the about page.

Increase the font size by adjusting the font size property, save to apply the change, and see the font size increase to 640 before moving to the next video.

Apply width and height to an element, save, and observe changes; include the height property when adjustments are applied, then proceed to the next video.

Demonstrate how to control layered layouts using CIUSSS with Leo Dart HD AMOLED, a page of 15 blue-bordered tags, same height and width, on separate lines for layout control.

Get 'layout.html' and its styles for the about page, and copy the file name to the correct folder. Use open resources and snippets in the same folder to apply layout.

Explore how display flex on a container arranges and wraps items, and how justify-content and space-around control alignment in the flex layout.

Explore css conclusion by reviewing what we’ve built so far and start applying the open-source bootstrap framework to style the about page, preparing for the next video.

Create a bootstrap folder in the learned folder and add an html file named viewport dot heidemann with proper head and body tags.

Learn to optimize a page for mobile by using Chrome’s device emulator to preview layouts on iPhone 5 and open developer tools to adjust for multiple screen sizes.

Learn to emulate a web page on iPhone by using the developer tools device toolbar, then select an iPhone from the dropdown to view the page as on iPhone.

See how desktop content appears very small on mobile as the browser scales down by default, and understand why this happens and how to overcome it in the next video.

Implement the viewport meta tag to render pages for various devices and practice responsive web design with real-world mobile checks.

Explore Bootstrap’s open-source framework, learn how to download and extract Bootstrap files, and compare applying it via downloaded files versus Bootstrap CDN before using it in responsive web design.

Locate downloaded and extracted bootstrap files, view the four files in the bootstrap folder, create new folders, copy bootstrap files as shown, and prepare for the next video.

Explore Bootstrap CSS styles and the required JavaScript file that powers an about page visuals and user interactions. Apply Bootstrap assets to define page behavior in your full stack project.

Learn how to include Bootstrap in HTML by linking the Bootstrap files and script, apply Bootstrap to headings, and verify font changes after saving.

Explore how Bootstrap styles are applied using developer tools to inspect the body tag, font-family choices, and how styles from Bootstrap cascade to elements like h1.

Apply Bootstrap to the beach story by copying the html story file and moving the images folder into Bootstrap folder, then launch the team one page to verify it loads.

Include Bootstrap files and a script tag before the closing body tag in our story page; verify that font changes confirm Bootstrap is applied, then move to the next video.

Apply the heading color by using rgb 255,0,157, a red-green-blue mix that supports the pastry shop branding across all page headings.

Apply an external stylesheet to customize page color using the a element selector with a rgb color value, linked via a link tag, and verify changes after saving.

Explore how to customize bootstrap styles by inspecting elements, identifying state-driven styles, and applying overrides that take precedence over bootstrap defaults for a pastry shop scenario.

Implement the heading styles by applying the defined state changes and selectors, then review how the heading looks and move on to the next video.

Apply the bootstrap container class to wrap the about page content, adding margins so the image and text aren’t flush with the left edge.

Explore how the bootstrap container class adds responsive margins, showing a larger left-right margin on desktop and reduced margins on mobile, with a quick dev tools check.

Define and alter the div tag layout for the Our Story page, enclosing images and text, then apply bootstrap classes to achieve the desired layout.

Enclose four content lanes within the outermost div tag, using the new tag and proper closing tag to organize images and text.

Wrap each image and its accompanying text in inner div tags, following the previous video steps to structure the about page for the full stack bootcamp.

Apply correct indentation to div tag content by using new line characters at the start and end, align content as shown, and proceed to the next video.

Apply Bootstrap row and col classes to structure content, replicate class definitions across tags, and verify image and text load in the browser.

Explain the bootstrap row class by examining display flex and flex-wrap properties, showing how these flex settings arrange image and text for a responsive about page layout.

Walks through the grid.html and grid.css code, showing how to structure an HTML page with title and body tags, link bootstrap and CSS, and implement a container-based grid.

Bootstrap's grid system uses 12 equal columns to structure layouts, with each column hosting content in a responsive grid.

Apply Bootstrap column widths by using col classes to assign specific column spans (three, six, twelve), observe wrapping when the row fills, and design flexible layouts.

Analyze bootstrap grid concepts to define column layouts, showing an iPhone six class occupying six columns and the remaining six columns forming half-width sections.

Learn to make the book cover image responsive by applying the bootstrap img-fluid class, preventing overflow beyond the container and removing horizontal scrolling.

Center the image by turning its container into a flex layout and setting justify-content to center, applying class-based styles to the image elements.

Set a fixed height for all images to achieve uniformity, ensuring the top and bottom sections have equal height, then apply consistently and move to the next video.

Apply text styling and color to headings by assigning classes to do tags and copying class names. Verify the brand color renders in the browser and adjust the text accordingly.

Center the text after applying the font color, add the extra iPhone story property in the Value Asset Center, save changes, and verify the centered layout.

apply display flex to align text vertically in the middle and contain the content, implement the changes, and proceed to the next video.

Import and apply the font family, font size, and font weight to style text, then check the result and finalize the layout before styling the navigation.

Apply Bootstrap nav classes to build a navigation bar with brand Party City, white text, and a black background, and verify the layout before exploring more Bootstrap options.

Inspect bootstrap nav classes to study navbar structure and spacing, the nav bar expand lg responsive behavior, the dark background, brand styling, grouped navigation links, and the story link styling.

Customize the party city navigation bar by applying the brand color and updating the brand and navigation item fonts, then copy the Bootstrap import into the state start.

Learn how bootstrap classes shape the nav bar, applying background and brand colors, and how a dark class changes the nav appearance while adjusting fonts and spacing.

Explore how the story page renders on mobile and tablet using device tools, noting image and text scaling on iPhone and iPad, and upcoming mobile layout fixes.

Fix the mobile layout by updating bootstrap classes so the image occupies the full width on mobile and the image and text display one below the other, resolving layout conflicts.

Verify desktop layout after mobile fixes by testing on tablet and desktop, review bootstrap grid system classes, and compare our story page to ensure a consistent layout across devices.

Explore how bootstrap class definitions map six device sizes from extra small to extra extra large. Learn to apply column classes so they cover the current and larger devices.

Explore a Bootstrap device example and learn to apply responsive columns for mobile, tablet, and desktop layouts, implementing step-by-step to adapt content across devices.

Explore a Bootstrap device example and apply a tablet layout by testing responsive cards across iPhone models and tablet view, showing how columns shift from quarter to half width.

Apply a desktop layout in a Bootstrap grid by using col-lg-3 for each item, then test how the items render on mobile, tablet, and iPhone to ensure responsive results.

Make the story layout responsive for mobile, tablet, and desktop using Bootstrap grid and the md breakpoint, with story units occupying half width and the call to action clearly visible.

Explore version control and developer collaboration on GitHub, create and manage repositories, upload and back up code, and learn how to sign up and start contributing.

Sign into GitHub, open the plus menu, and create a new repository named FSD. Keep it public by default to showcase your coding, then click create repository.

Explore the repository homepage to locate the unique GitHub link, identify the username and repository name (FSD), and note that the repository is currently empty.

Create and manage the FSD repository on GitHub, transfer the FSD source code to the GitHub repository, and install git via the git-scm.com download steps.

Download the Windows git client by visiting the download page, determine whether your OS is 32-bit or 64-bit, then choose the appropriate installer and run the setup.

Install the Git client on Windows by running the downloaded installer, keep default settings, launch the command line after completion, and note that newer versions may differ.

Verify the git client installation on Windows by opening the git bash window and running the version command to confirm the downloaded and installed git version.

Install Git for Mac by visiting the download page, selecting macOS, and clicking the latest binary installer to download the DMG, with the next video covering subsequent steps.

Download the macOS git client DMG, open the installer, and trust the package when prompted. Then adjust security settings and provide your macOS user authentication to install.

Verify git installation on mac by opening Launchpad and the terminal, run the version command to confirm the install, then proceed to the next video.

Upload the code to a GitHub repository using the terminal in Visual Studio Code. Open the terminal from the View menu in the FSD folder to run git commands.

Initialize a local git repository in the FSD folder using git init, verify creation in the docket folder, view hidden files, and avoid modifying the .git contents.

Learn the three high-level steps to publish code from a local repository to GitHub: staging, committing, and pushing to the GitHub repository.

Stage files using the git workflow: run git status to identify red items, use git add to stage them (dot for folders), and verify with git status for green.

Set your git user name by running git config --global user.name 'First Last' in the Visual Studio Code terminal, so the name applies to all repositories on your desktop.

Set your git user name and email using git config with quoted values. Verify the configuration with git config and confirm the name and email are correctly set before proceeding.

Learn to commit code with a clear, specific message describing what has been implemented, run the commit command, and review the changes after commit.

Verify commit: run two commands to confirm success, using status to view staged files in the local repository and log to show author, date, and the commit message, confirming automation.

Authenticate push operations to a GitHub repository with your username and a personal access token to ensure secure ownership.

Set your GitHub account username by configuring git with the global user.name, copying the username from the repository, and verifying with git config --list in Visual Studio Code.

Open github.com, click the profile icon, and select settings to access developer settings. Then choose personal access token to navigate to the token page and continue to the next video.

Create a personal access token by generating a new token, name it FSD, select the necessary repository permissions, and click generate to obtain the token.

Display the token, copy it using the copy option, and save the token to a file outside the FSD folder to retrieve it later.

Set the GitHub remote repository for your code by copying the remote command from the FSD repository and pasting it into the VS Code terminal to push.

Paste the personal access token from the notepad during the git push origin master command to push code to your GitHub repository, then verify the push details in the terminal.

Verify the code push in the full stack bootcamp by navigating to the FSD repository, inspecting the Learn and Resources folders, Bootstrap files, and the source code in GitHub.

Publish your code to GitHub and learn how to fetch it with the clone command in the upcoming videos, guided to retrieve the published code.

Create a temporary folder outside the FSD folder to simulate a new laptop, preferably on the desktop, to avoid corrupting the local FSD repository.

Learn to open the terminal on Windows with git bash or Mac terminal, navigate to the temp folder, and run the clone command.

Copy the repository link, paste it into the terminal, and run the git clone command to clone the project.

Verify the git clone by checking that the local repository contains the FSD folder with learn, resources, and bootstrap files to confirm the GitHub FSD repository is available locally.

Learn to publish an about page as a website by hosting on cloud platforms like AWS, Google Cloud, or Azure, installing Linux and Apache, and deploying from GitHub.

Learn how the AWS free tier works, including one-year access and credit card requirements, and follow steps to avoid charges while using AWS services in the course.

Learn the five-step sign-up process for AWB, including providing debit or credit card details, creating a free account, and signing in to access your AWB account.

Select your Amazon region after logging by using the drop-down beside your profile name. Choose the region nearest you, for example Mumbai, and proceed to the next video.

Discover how the elastic globe computer (ec2) cloud service enables scalable hosting and capacity growth, and begin the steps to create an EC2 instance.

Learn how to create an EC2 instance by logging in, using the search box, selecting the launch instances option, and completing the first step.

Select the operating system image for your EC2 instance by choosing a free, eligible Ubuntu Linux server. Follow the video instructions to proceed to the next step.

Select hardware for an ec2 instance by choosing the default free tier with one 2.5 ghz microprocessor and 1 gb ram. Click next to proceed to the next video.

Define the number of EC2 instances to create, leave the value at one, and click next.

Choose the default extra disk space during ec2 instance creation, noting up to 30 gb of free tier space; leave the configuration unchanged and proceed to the next video.

Group multiple EC2 instances with tags to quickly identify related servers under a specific category. Then configure the security group and move on to the next video.

Set up connectivity for an Amazon EC2 instance by enabling secure shell access and configuring HTTP/HTTPS protocols to allow internet access and file system operations.

Review the configuration, then click launch to start the EC2 instance. After your site works, terminate the instance and proceed to the next video.

Configure authentication for accessing the server through SAHM by generating an access key and downloading the key file to connect to the server, instead of a password.

Copy the pem file from your downloads to the FSD folder, following Windows or Mac steps, to prepare for EC2 instance creation.

Explore how domain names work, how to purchase and verify availability, and how to link a domain name to the instance host for your full stack app.

Open the Visual Studio Code terminal, maximize it to full screen, and use the Git Bash terminal to run Linux commands, following the video’s step-by-step setup.

Learn to change pem file access privileges to prevent tampering by other users during the easy to instance setup, using a terminal command and copying it in VS Code.

Paste the ssh command from AWS into the terminal in Visual Studio Code after opening the connect screen and selecting the search command icon.

Learn how the ssh command connects to an Ubuntu server using the identity file with the -i option, including specifying the username and domain to access the instance.

Connect to the EC2 instance via SSH by confirming authentication in the terminal, then proceed to the next video after a successful connection.

Execute the pwd command to reveal the current working directory on an Ubuntu server, showing the root folder and the home folder structure for users like Brenda.

Install Apache and switch to admin privileges in Linux to perform software installation using the sudo command; observe the terminal prompt change.

Run the Ubuntu update command in the terminal to download and install updates and security fixes, upgrading the operating system and refreshing an older Ubuntu image.

Install Apache HTTP Server by running the setup command, confirming prompts, and letting the installer download and complete the setup on the server instance.

Verify the Apache HTTP Web Server installation by loading the domain from the Amazon Connect page in a browser; if the page loads, the server runs and serves HTML.

Learn how index.html serves as the default web page, how a web server selects it when no file name is specified, and how the browser shows the current folder.

Copy files from local desktop to a web server folder, then to the Apache document root, use admin privileges, restart the Apache server, and access the site in a browser.

Learn to transfer a local folder to a remote Ubuntu instance using scp, with recursive copying, identity file authentication, and correct source and destination syntax.

Execute the scp command to copy files to the ubuntu folder, then verify the transfer by listing the /home/ubuntu/learn directory in the previous terminal window.

Use the cp command with the -r option to recursively copy the learn folder from the source path to the destination folder, then verify the command and proceed.

Restart the Apache web server with the service command to reload the newly added loan folder so it becomes available on the website.

Verify our story web page loads in the desktop browser by constructing the url from the domain, adding bootstrap, and confirming the page displays as instructed.

Verify our story page on your mobile by setting up your email, tapping the page link in the message, and opening it in a mobile browser to confirm deployment.

Disconnect the ssh session by exiting the terminal in Visual Studio Code, leaving the Ubuntu user, and disconnecting from the remote instance after completing the cleanup.

Explore how networks work by examining the uniform resource locator, domain name, host, server, resource, and the hypertext transfer protocol.

Explore how a postcard delivery mirrors network data transfer, from stamping and addressing to sorting centers and final delivery, highlighting rules for correct routing and postal codes.

Explore how the http protocol enables client–server communication, with http requests and responses that include header and body, and compare it to other protocols like smtp, ftp, and imap.

Explore how servers construct an http response message with a 200 ok status, headers like date and content-type, and a body that delivers html content for the browser.

Learn to inspect http protocol data between browser and server while loading our story page from an EC2 instance, including managing instances and domain login.

Open developer tools in a separate window to view network details in the story page tab; click the first icon to detach tools and proceed to the next video.

Open developer tools and select the network tab to view browser-host communication, then reload our story page to display network entries and verify the data flow.

Inspect the first network entry and the initial http request from browser to host, then review html details in the network tab.

Explore the http request header by inspecting the general, response, and request header sections, viewing the source, and identifying the request line and host header as shown.

Inspect the HTTP response header from the Apache server, review the status line with HTTP version and status code, then check the date and content-type headers in developer tools.

Open the developer tools, examine the response tab to view the HTTP response body and its HTML content deployed on the Apache server.

Learn how browsers trigger background http requests for favicon, fonts, and css as they render a page. Explore network tab entries and how each resource affects page loading.

Terminate an EC2 instance from the management console to permanently remove the instance, including the Linux operating system and Apache web server.

Develop a mobile-friendly pastry shop menu page using HTML, CSS, JavaScript, Bootstrap, and Angular, backed by Java Spring Boot with Spring Data JPA and a MySQL database.

Discover how to locate the instructor's profile on Udemy, open it in a new tab, and follow social media links to get course updates and free coupons.

Choose a paid course, open its landing page, and apply the coupon by entering the code in its standard format, noting limited free coupons and a discounted option if unavailable.

Explore how coupon codes and promotions appear on the course landing page, how to apply discounts, and how discounted and original prices display for different currencies.