The following curriculum explores two Domain-Specific Languages: HTML & CSS. Throughout this curriculum, you will be building and styling your own recipe page! Each day's assignment contains brief readings and an exercise. Be sure to complete all assignments, as the exercises build on each other.
SF: Don't forget to push every one of your completed assignments to the
[Github Pages][gh-pages] branch on your micro-projects repo.
The beginning of Front-End Development.
A look at containers in HTML and HTML5 semantic elements.
Bringing user input to your HTML with Form and Input elements.
- 📖 Forms
Providing specific information and loading external files to your webpage.
Our first look at cascading style sheets and how to be efficient CSS developers. Before we dive into CSS syntax, watch the introduction video explaining some CSS history and then the Workflow video to learn about the Chrome Developer Tools.
selector {
property: value
}Now that we have some understanding of CSS syntax we can take a look at some more advanced selectors that will allow us to target other aspects of our HTML document.
The box model describes how space is calculated with CSS. This model combined with popular properties including display, margin, padding, width and height mark the beginning of styling the layout of our HTML document.
- 🎥 Display Property
- 📖 Display Properties (Save Flex for day 5)
- 🎥 CSS Float & Clearfix
- 🎥 CSS Grid System (15 min)
- 📖 CSS Float & Clearfix