The original Web Dev 1 curriculum contained various interactive and immediate-feedback activities that can help students master HTML & CSS at their own pace.
Anatomy of HTML
https://tools.aaawebdev.com/html-anatomy.php
In this activity, a short “learn” section can be collapsed so that students can focus on the quiz. The quiz asks students to identify the part of the HTML tag highlighted in blue, and it is self-checking. Students can turn on “Tutorial Mode” to have the next question automatically answered with no penalty to their score.
Anatomy of CSS
https://tools.aaawebdev.com/css-anatomy.php
In this activity, students practice with a quiz to identify parts of a CSS statement highlighted in blue. The quiz is self-checking with a score that is reset on refresh. Students can turn on “Tutorial Mode” to have the next question automatically answered with no penalty to their score.
CSS Selectors
https://tools.aaawebdev.com/css-selectors.php
Another self-checking quiz much like the two above, this time identifying the type of CSS selectors.
CSS Properties
https://tools.aaawebdev.com/css-properties.php
Another self-checking quiz, but this time asking students to identify a changed CSS property based on the visual difference between 2 otherwise identical elements containing text content.
Image Formats Lesson
https://tools.aaawebdev.com/image-formats/
The clickable tabs each have information about common web formats for images. The final practice tab has a short quiz asking students to identify the most likely format for a given image.
Text and Font Tutorial
https://tools.aaawebdev.com/textandfont/
This specialized tool contains a control panel and instruction area at the top, and also a “work area” below that. Students will use Chrome browser’s developer tools to make adjustments to the site that are checked programmatically one step at a time.
Box Model Matcher
https://tools.aaawebdev.com/interactive-box-model/
This specialized tool includes an HTML element with randomized Box Model CSS Properties that must be matched by the “preview” box using the dropdown options. Students can track how many boxes are successfully matched — 3 is a good goal for your first time!
Box-Sizing Demo
https://tools.aaawebdev.com/interactive-box-sizing
The clickable tabs have information about how box sizes are calculated for HTML elements, including examples of actual calculations. Buttons that toggle between box-sizing calculation schemes illustrate the power of using the “border-box” calculation for simplifying CSS layouts.
Breakpoints-Chooser Discussion
https://tools.aaawebdev.com/breakpoints-chooser/
This tool is ideal for guiding a discussion about mobile-response breakpoints.
Explore Layering
https://tools.aaawebdev.com/explore-layering/
This specialized tool includes 6 challenges using CSS to arrange HTML elements into new positions. The challenges use absolute positioning and z-index layering to make 5 basic HTML boxes into colorful works of art.