Semantic HTML and CSS Code Challenges

Semantic HTML and CSS Code Challenges

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 0h 33m | 158 MB

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.

Table of Contents

1 Challenge yourself with CSS layouts
2 What you should know

1. Challenges Layouts with Flexbox
3 Create semantic markup for photos and text
4 Generally styling the robots
5 Create a flexible layout with Flexbox
6 Adding controls across breakpoints

2. Challenges Layouts with Navigation Bars
7 Create semantic markup for the header and navbar
8 Create a horizontal layout with two methods
9 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