Simple play icon Course
Skills

Creating Page Layouts with CSS

by Paul Cheney

This course will teach you the basics of mobile-first, responsive web design to build a multiple page website and how to incorporate design principles for web development.

Preview this course

What you'll learn

Building responsiveness for small, medium, and large screens is important for any website. In this course, Creating Page Layouts with CSS, you will learn to leverage the power of media queries to build a mobile-first, responsive web site for a Pie Shop. First, you will lay out the page using appropriate HTML5 semantic elements filled with appropriate content. Next, you will add multiple stylesheets to help control the page for various page widths. Then, you will build hamburger navigation for small screens and horizontal navigation for wider screens. Finally, you will learn to create multi-column layouts using float.

When you are finished with this course, you will have the skills and knowledge to build responsive pages with CSS.

Table of contents

Course Overview
1min
Introduction
4mins
Basic Page with Semantic Tags
9mins
Styles Sheets and Media Queries
16mins
Build the Header and Footer
17mins
Build Responsive Navigation
15mins
Build the Hero
9mins
Build this Week's Specials
7mins
Responsive Fruit Pie Gallery
8mins
Implementing a CSS Preprocessor
17mins
Introduction to Bootstrap
17mins
Wrap Up
10mins

About the author

Paul Cheney

Paul Cheney specializes in Responsive Design, Content Management Systems, and Virtual Reality Photography. He teaches courses for Pluralsight and runs a web development business and Spartan Design University where he hosts resources for many online courses.

See more courses by Paul Cheney
Ready to upskill? Get started