Semantic HTML and CSS Code Challenges

Through a series of HTML and CSS code challenges, practice not just doing the task right, but making it look good, too.

Introduction

• Challenge yourself with CSS layouts
• What you should know

1. Challenges: Layouts with Flexbox

• Create semantic markup for photos and text
• Generally styling the robots
• Create a flexible layout with Flexbox
• Adding controls across breakpoints

2. Challenges: Layouts with Navigation Bars

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

3. Challenges: Layouts with Grid

• Create semantic markup for a series of photos and text
• Create the desktop layout
• Integrate the grid and create breakpoints
• Combine the challenges for a full webpage