# HTML and CSS

Every web page is built from HTML and styled with CSS. You will structure pages with semantic HTML, style them with CSS, and lay them out with positioning, Flexbox, and Grid.

Updated: November 3, 2026

## [HTML and CSS Overview](https://www.ask-codey.com/courses/csharp-full-stack-bootcamp/topics/csharp-html-and-css-overview)

1. [HTML](https://www.ask-codey.com/lessons/html-and-css-overview-html) (Novice): HTML is the structure of a web page and CSS is its finish, the way a house has framing and paint, and good CSS needs solid HTML underneath it.
2. [The Power of CSS](https://www.ask-codey.com/lessons/html-and-css-overview-the-power-of-css) (Novice): CSS Zen Garden shows one HTML page styled many completely different ways, proof of how much CSS alone can change.

## [HTML](https://www.ask-codey.com/courses/csharp-full-stack-bootcamp/topics/csharp-html)

1. [HTML](https://www.ask-codey.com/lessons/html) (Novice): HTML builds a page from elements, each an opening tag, content and a closing tag, and whether an element is block, inline or inline-block decides how it takes up room on the page.
2. [Semantic HTML](https://www.ask-codey.com/lessons/html-semantic-html) (Apprentice): Semantic elements such as strong, nav, main and footer say what their content means, so the HTML describes the content and CSS handles the formatting.
3. [CSS](https://www.ask-codey.com/lessons/html-css) (Novice): A CSS rule finds elements with a selector (by element name, class or id) and formats them with the properties inside its curly braces, such as color, border, width and display.
4. [Developer Tools](https://www.ask-codey.com/lessons/html-developer-tools) (Apprentice): Every browser has built-in developer tools that show any element on a page, its HTML and every CSS rule applied to it, so you can find out why a page looks the way it does.

## [CSS Position](https://www.ask-codey.com/courses/csharp-full-stack-bootcamp/topics/csharp-css-position)

1. [Static](https://www.ask-codey.com/lessons/css-position-static) (Apprentice): Static is the default position, where elements sit in the normal flow of the page and top and left don't move them.
2. [Relative](https://www.ask-codey.com/lessons/css-position-relative) (Apprentice): Relative positioning moves an element away from its own normal place, and keeps the space it would have used.
3. [Absolute](https://www.ask-codey.com/lessons/css-position-absolute) (Apprentice): Absolute positioning takes an element out of the page's flow and places it relative to its nearest positioned ancestor, usually a parent with position relative.
4. [Fixed](https://www.ask-codey.com/lessons/css-position-fixed) (Apprentice): Fixed positioning places an element relative to the browser window, so it stays on screen while the page scrolls.
5. [Sticky](https://www.ask-codey.com/lessons/css-position-sticky) (Apprentice): A sticky element scrolls with the page until it reaches its top offset, then stays put until its parent scrolls away.

## [FlexBox](https://www.ask-codey.com/courses/csharp-full-stack-bootcamp/topics/csharp-flexbox)

1. [FlexBox: an overview](https://www.ask-codey.com/lessons/flexbox-an-overview) (Apprentice): Setting display to flex on an element lines up its children side by side in a row, and flex-direction can turn that row into a column.
2. [Justify Content](https://www.ask-codey.com/lessons/flexbox-justify-content) (Apprentice): The justify-content property on a flex container decides where the extra space goes, so its items can sit at the start, the end, the center or spread out.

## [Grid](https://www.ask-codey.com/courses/csharp-full-stack-bootcamp/topics/csharp-grid)

1. [Grid](https://www.ask-codey.com/lessons/grid) (Journeyman): CSS Grid lays a container's children out in rows and columns at once, with column widths you set in fr, % or px, gaps between the cells, and items that can span more than one cell.

## [Exercise: Tribute Page and Flexbox](https://www.ask-codey.com/courses/csharp-full-stack-bootcamp/topics/exercise-tribute-page-and-flexbox)

1. [Exercise: Tribute Page and Flexbox](https://www.ask-codey.com/lessons/exercise-tribute-page-and-flexbox) (Apprentice): Build a three-page tribute website with semantic HTML and CSS, then practice layout in our games Flex Freight and Grid Town and use it on your site.

Source: https://www.ask-codey.com/courses/csharp-full-stack-bootcamp/chapters/csharp-html-and-css