Today, we will be creating a web page for the fictitious online code learning business Code the Web. This will require us to create basic responsiveness, use web fonts, and create more table structure. To do this, we will be using several techniques in CSS and HTML. Let's begin by taking a look at our starting point for today.
Exploring the Site
The existing site contains several pages. We will be focusing on a handful of these pages while we work to create a better structure and learn techniques that will help our site be more usable in mobile browsers.
We will begin here:
The existing style and markup are based on skills we learned in the previous two workshops, HTML5 & CSS: The Basics, and HTML5 & CSS: Structuring Pages. You can see button styles, navigation, headers, paragraphs, footer content, etc.
Our finished site will look like this:
The finished site includes a columnar layout using a simple grid, embedded video, and different fonts. We will be adding more table structure to the catalog.html page, too. Let's start by exploring basic responsiveness.