Coding Exercises: Semantic HTML and CSS

33mBeginner2021-06-17

Authors

Jen Kramer

Teaches web design and development

Course details

To fully realize what you know about topics like HTML and CSS, it sometimes helps to challenge yourself with small projects. That’s what this course does for you. Over the course’s twelve challenges, instructor Jen Kramer walks you through building a full webpage from scratch, using HTML and CSS. The first group of four challenges involves building a portion of the webpage using a Flexbox-based layout. The second group of four challenges focuses on building a horizontal navigation bar with a CSS-powered hamburger button. The final four challenges step through creating a grid-based layout and combining work completed across challenges to create a beautiful, responsive webpage.

Skills covered

HTMLCSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceOne-Off

Concepts

0. Introduction

01 - Challenge yourself with CSS layouts
02 - What you should know

1. Challenges - Layouts with Flexbox

03 - Create semantic markup for photos and text
04 - Generally styling the robots
05 - Create a flexible layout with Flexbox
06 - Adding controls across breakpoints

2. Challenges - Layouts with Navigation Bars

07 - Create semantic markup for the header and navbar
08 - Create a horizontal layout with two methods
09 - Create a mobile layout and hamburger button using only CSS
10 - Add a desktop layout to create a responsive navbar

3. Challenges - Layouts with Grid

11 - Create semantic markup for a series of photos and text
12 - Create the desktop layout
13 - Integrate the grid and create breakpoints
14 - Combine the challenges for a full webpage