Creating Page Layouts with CSS

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.
Course info
Rating
(31)
Level
Intermediate
Updated
Jul 13, 2020
Duration
2h 14m
Table of contents
Description
Course info
Rating
(31)
Level
Intermediate
Updated
Jul 13, 2020
Duration
2h 14m
Description

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.

About the author
About the author

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.

More from the author
Hands-on JavaScript Project: JSON
Beginner
1h 16m
Oct 26, 2018
Best Practices for Responsive Web-forms
Beginner
1h 10m
May 31, 2018
More courses by Paul Cheney
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello, my name is Paul Cheney. Let me tell you about creating page layouts with CSS. At the heart of developing any responsive website is a thorough knowledge of how to use HTML5, CSS3, SASS, a little JavaScript, and some basic design skills. In Creating Page Layouts with CSS, you will build a beautiful responsive mobile‑first version of Bethany's Pie Shop. That includes proper semantic use of HTML tags, multiple style sheets for different screen widths, your own 12‑column grid, information cards, altering the color of an SVG logo, and scaling a hero image using a new technique to remove page jank. We will even add a little JavaScript to create a drop‑down menu for small screens. Then you will convert your project to use SASS and a CSS preprocessor to increase page speed and simplify the markup with variables, nesting, partials, and loops. I will also show you a cool trick with your SASS that will save you tons of time when you build your own 12‑column grid. Finally, we will build the entire site again using the Bootstrap framework with our existing row column structure. Please join me as we explore Creating Page Layouts with CSS for small, medium, and large screens in this responsive design course from Pluralsight.