HTML and CSS Foundations

Download the Adam text editor, open it, go to settings, install the three atom packages from the install tab, and confirm they appear on the packages tab.

Create a template by adding index.html and running a local live server to explore the html root tag, head and body, their children and siblings, and content.

Learn how to use the head tag to add a title, a site icon via a self-closing link tag with rel and href, and metadata with meta tags like description.

Explore header tags from h1 to h6 to structure content, and distinguish block-level paragraphs from inline elements like em and strong that don't create new lines.

Learn how HTML comments block code from rendering in the browser, using atom and the shortcut command forward slash. Discover how comments document intent and preserve code for later reference.

Explore ordered and unordered lists, using ol and ul with li items; see how numbers in ordered lists are counted, and that items can include elements like an h1.

Learn how to create single-line and multi-line text inputs for forms using the input and textarea tags, with placeholder and value attributes for initial value.

Learn to add images using src and alt attributes, provide a file path or url, and understand that the image tag displays alt text if an image fails to load.

Apply divs and spans to group elements and target styles with CSS. Learn that divs are block-level and create new lines, while spans are inline and keep text in line.

Learn how to organize projects with a structured file system, use folders for assets and subdirectories, and write relative and absolute paths to navigate the root directory and other pages.

Learn how selectors target elements to apply styles using the style tag and css, including setting a 1px solid black border around paragraphs and header elements like h3.

Apply the same style to multiple elements by separating selectors with a comma; this block applies shared styles to all, while different styles require separate rules.

Know how to apply styles to specific elements using classes and IDs, link a CSS file, and use dot and pound syntax for class and id selectors in HTML.

Learn how to select specific children elements in CSS using parent selectors, descendant selectors, and the greater-than symbol for immediate children.

Explore how pseudo-classes apply styles in specific states, using hover, active, and focus on h1, h2, and spans, and control block versus inline widths.

Explore the css box model and how every html element becomes a box with margin, border, padding, and content, and learn to control their spacing using margin and padding.

Explore how css defines colors using hex, rgb, and rgba values, read color codes, and apply color names or a color picker to set opacity with alpha.

Master styling text with font family, font weight, and font size, and learn to replace stock fonts with custom Google fonts by adding a link tag in the head.

Explore the position CSS property and how static, fixed, relative, and absolute layouts control element arrangement and visual behavior.

Create a flex container with display: flex, assign flex values to children to allocate space by fractions, and use flex-direction to switch between row and column layouts.

Learn to position flex items with justify-content and align-items, set the main axis with flex-direction, and space items using space-around or space-between, while making containers full viewport height.

Set the body as a flex container with a fixed side menu and a right content area, give content children a flex of one, and enable wrap at 300px.