A basic outline for your html file.
The head element is a container for metadata (data about data) and is placed between the html tag and the body tag.
Body tag defines the document's body. It contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
Header
A header element represents a container for introductory content or a set of navigational links.
Nav A nav tag defines a set of navigation links.
Main
A main tag specifies the main content of a document, only one per document please.
Footer
A footer tag defines the footer of a document. Duh.
Article
An article tag specifies independent, self contained content like a blog or forum post.
Aside
An aside tag is for content related to the main content, put off to the side.
Section
A section tag defines sections in a document, like chapters, headers, footers, etc.
Div
The HTML div tag is used for defining a section of your document. With the div tag, you can group large sections of HTML elements together and format them with CSS.
Span
The HTML span tag is used for grouping and applying styles to inline elements. There is a difference between the span tag and the div tag. The span tag is used with inline elements whilst the div tag is used with block-level content.
In CSS, selectors are patterns used to select the element(s) you want to style. It's a clean way of setting style for your html document.
The .class selector selects elements with a specific class attribute.
Very specific selector.
A kind of layout and design that allows for dynamic changes. It allows you to have different screen sizes and still keep things in order.
The display property specifies the type of box used for an HTML element.
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
Clearfix - is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally. The clearfix is a way to combat the zero-height container problem for floated elements.
Default placeholder text.
I'd like to see you flesh out the box model a little more.
Maybe get into some details for the display property types.
Going through the spaces, commas and dots section with some examples would be very helpful for you too!