Full Stack Series - [FREE SEGMENT of PART1]

Explore the heritage and significance of the pastry shop through a sample page showing its origins and a 19th century recipe book.

Create a dedicated FSD folder to organize all files for full stack development, establishing a clear folder structure to simplify navigation as the next videos guide your setup.

Open Visual Studio Code, use the Open Folder option to create and name the FSD folder on your chosen drive, then confirm the folder appears in the explorer to proceed.

Create a structured learning folder hierarchy by adding an Alan folder under the FSD folder, then establish a learn folder with separate technology-specific subfolders, using the new folder command.

Create the html folder inside the learn directory by using the new folder icon, typing html, and pressing enter, then create the Istanbul folder and move to the next video.

Create an html file for our story page by opening the html folder from the previous video, selecting the new file icon, naming it as our-story.html, and pressing enter.

Write html to display a heading, use Visual Studio Code, insert the less-than symbol to trigger a dropdown, and save the file as part of a doctype-aware tutorial.

Doctype declaration signals to the browser that the file is an HTML document and defines the HTML5 version as the first line in every HTML file.

Continue coding by placing the cursor at the end of the line and typing from the next line, using less-than and greater-than symbols to insert code, with a Discord explanation.

Explore the HTML tag explained, focusing on opening and closing tags, and how Visual Studio Code can automatically generate the closing tag.

Edit an html document by inserting a new line between open and close body tags, observe automatic four-space indentation, add inner tags and a heading, then save.

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

Explore styling limitations in HTML by examining how font and color changes affect the output. Learn about the implemented code and what the next video will cover.

Explain how the body tag determines what content displays on a web page, including multiple tags within the body and that the next video will cover the heading tag.

Explore the head tag explained and heading levels from h1 to h6, their font size progression from large to small, and how browsers render headings in the defined order.

Review the layout of our story and the pager output, noting the animal file name. Note tab title display of Magic City and prepare to define the big picture title.

Translate English terms to French using Google Translate, note the accent in some French words such as patisserie, and copy the translated word for use in future steps.

Learn to include a title tag in HTML by defining a hashtag before the body, placing the cursor at the end of the HTML tag, and using shortcuts to save.

Test how a web page title updates in the browser, showing that changes don’t auto-reload and require a manual refresh to display the modified title.

Fix the display issue by adding a meta tag with charset before the title, using utf-8, and then save the file to verify the title displays correctly.

Save your file in Visual Studio Code with the shortcut ctrl+s to clear the unsaved changes indicator (the white circle), then reload the browser to verify the title displays correctly.

Explain how hashtags define additional information for web pages and how utf eight characters enable titles and content in all languages.

Understand the importance of the title tag in web pages: use titles to identify tabs, bookmark favorites, aid search engine ranking, and ensure each page defines a clear, larger-font title.

Explore what a favicon is and how a small image next to the title in HTML terms enhances website branding, and learn how to implement it.

Download resources.zip to access the favicon image file, extract it, and use the icon before moving on to the next video.

Download resources.zip, open the downloads folder in Windows or Mac, copy the file with Ctrl+C or Cmd+C, and watch the next video to learn how to extract the zip.

Copy the resources.zip file into the fsd folder by locating the Learn folder in Visual Studio Code, then paste with ctrl+v on Windows or command+v on macOS.

Explore the resources folder, observe that only one image file exists initially, and learn how files will be added over time with a downloadable zip once the course completes.

View the favicon image in the resources folder, then create and customize it with an online favicon generator, and download the final icon to use in the app.

Create an images folder and copy the favicon image file into it. Use copy-paste steps, with Mac users pasting via command V, to duplicate the image in the new folder.

Extract the files from resources.zip, then delete the resources.zip by right-clicking and selecting delete; Mac users use the control key for right-click, and proceed to the next video.

Add a link tag to connect the image file and the favicon, set rel to icon, select the favicon from the image folder, and save the file.

Explain how to include a favicon using the link tag, detailing the rel=icon, type=image/png, and href attributes.

Explore how to display a Paris street image by following steps to load the image from the resources folder and render it in the browser.

Explore how the img tag uses the src and alt attributes to locate images and provide fallback text when loading fails.

Explore how a screen reader enables visually impaired users to browse a webpage using screen reader software. Watch a demo video to understand how page attributes communicate content to users.

Discover how the alt attribute powers screen readers to describe images and headings, helping visually impaired users understand the page through descriptive text in img tags.

Open visual studio code, copy a line from file 001 our story x 21 dot the, paste after img tag, then save and preview to note misalignment for next video.

Learn how the browser lays out HTML elements in document order from left to right, wrapping to the next line, and how headings and images align in this layout.

Draw a border to define the boundary of the attack zone and apply a style definition to the page; analyze how the html element border shapes the display.

Explore how HTML elements classify as block, inline, or line, and how borders and images affect heading borders and overall page layout.

Demonstrate how the alignment problem in html layout can be solved by displaying a heading and image adjacent to each other.

Use a shelf analogy to show how the div tag acts as a container and dividers create smaller spaces, and learn about the new do tag for organizing html content.

Learn to clean up styles and simplify the html layout by removing unnecessary style attributes and lines, using a quick delete technique to edit code.

Discover how to include navigation using Emmet by typing abbreviations in Visual Studio Code to quickly generate open and close tags with live previews.

Discover how IntelliSense displays a dropdown while typing, how to restore it with ctrl-space, and how pressing enter generates tags automatically.

apply practical techniques to include navigation content and navigation links, adjust content button title tags, and implement the coding shown to move on to the next video.

Learn to view navigation in the browser by using div tags as block elements, placing each item on its own line and preparing structure for later styling.

Change the outermost div tag to a nav tag to improve navigation semantics. Semantic tags help screen readers identify the main navigation options for accessible web pages.

Learn to edit closing tags with the command palette, using keyboard shortcuts to insert closing tags and place them on a new line, while comparing manual edits to faster methods.

Understand what a command is in Visual Studio Code and trigger actions with shortcut keys, then learn that many other commands exist and how the command palette accesses them.

Practice executing commands with the command palette by triggering 'open folder', using the dropdown to select options, and pressing enter to run commands, which opens the folder selection window.

Learn to wrap selected code with the outermost div using the editor's command palette, choosing wrap with abbreviation, preview the result, and save to apply automatic indentation.

Copy book cover image file from the resources, paste it into the HTML Images folder, and link it in the story to frame the next video on the animal kingdom.

Add animal tags and HTML elements to the bottom part of our story web page, display the book cover image, and prepare to apply styles in the next video.

Create a 'css' folder by opening the Learn folder, clicking the new folder icon, and naming it for CSIS study to store learning files.

Create a new HTML file to build a select dropdown, place the cursor between the opening and closing tags, and name it select contractors in the CSC folder.

Create and structure HTML using main tags and abbreviations, outlining the title and body elements, then follow steps to complete this coding segment.

Clear hash tags using abbreviations, then include content inside open and closing curly braces, and save the final result before moving to the next video.

Define styles in a separate file by creating a new stylesheet in the diocese folder, then create the new fighting state and move on to the next video.

Discover how to define external styles in CSS, apply a red color to hashtags via the color property, and troubleshoot why the selector styles may not render.

Learn to link an external stylesheet, apply state-based styling to links, rename the file, save, and verify red links and h2 styling.

apply styles to all h2 tags by changing the color from red to green with state management, then save and verify the update in Rosetta.

discover how external css works by using selectors to apply styles defined in a separate style sheet to elements, including the element selector that targets all elements.

Discover how to use CSS class selectors, prefixed with a period, to target elements by class name, apply styles, and observe changes such as turning elements green.

Create an HTML file named styling, copy content from the selector, and update the page title. Clear body content and prepare to apply styling to the heading in upcoming videos.

Define the color with an element selector in CSS, save, and preview the HTML styling in a live server to verify the blue font.

Demonstrate how to display Visual Studio Code and the Chrome browser adjacently by snapping windows to the left and right halves on Windows, with macOS layout guidance.

Learn to set background color for elements by separating styles with semicolons, apply a yellow background to each targeted element, and verify the result in Chrome.

Apply the padding property to control spacing around text, save the value, and observe how space is added, while noting padding size and units for layout.

Explore the box model in the browser, showing how padding, border, and margin determine the size of the rectangular box in pixels.

Learn how to apply padding, border, and margin to specific sides of elements, customizing top, bottom, left, and right edges for precise layout control.

Apply font-family in CSS to use Rockwell across Windows, Linux, and Mac, ensuring font consistency and handling cross-platform variations; learn how to implement uniform fonts in the next two videos.

Explore Google Fonts, browse font samples, add fonts to your selection, and import font definitions to apply fonts in your project.

Apply font styling by importing a font from fonts.google.com and setting the font-family property to 'great vibes', then save to see the form update.

Explore applying fonts by examining font files and import mechanisms, and identify common import bugs.

Showcase how headings default to bold and apply the font weight as normal to render headings in normal weight, then verify the result and move to the next video.

Increase the font size by applying the font size property and setting the value to 640, then save to see the font size increase.

Learn to apply width and height to an element and observe changes after saving. Include the height property when changes take effect.

Demonstrate controlling layered layouts on the Leo Dart HD AMOLED page using CIUSSS, with 15 tags bordered red and blue of equal size, each on its own line.

Demonstrates creating a flex container, applying display: flex, and managing item layout with wrapping and justify-content options such as center and space-around.

Learn how to apply Bootstrap, an open-source CSS framework, to build the page and pager for your story; conclude CSS concepts with hands-on setup and next steps.

Conclude the full stack series by pointing learners to the Udemy course for the complete content and guiding them to the resources to access others for free or discounted.