Creating Page Layouts with CSS

Focused View

Paul Cheney

2:14:57

18 View

01 - Course Overview

01 - Course Overview.mp4

01:43

02 - Introduction

02 - Introduction to Creating Page Layouts with CSS.mp4

04:04

03 - Basic Page with Semantic Tags

03 - Introduction to Basic Page with Semantic Tags.mp4

04:42

04 - Semantic Tags and Head Information.mp4

04:33

04 - Styles Sheets and Media Queries

05 - Introduction to CSS and Media Queries.mp4

04:14

06 - Preparing the HTML file.mp4

02:17

07 - Linking Style Sheets.mp4

03:18

08 - Adding Media Queries.mp4

03:35

09 - Fixing Font Problems.mp4

03:04

05 - Build the Header and Footer

10 - Introduction to the Header and Footer.mp4

04:09

11 - Row-column Design.mp4

04:45

12 - CSS for a 12 Column Grid.mp4

02:51

13 - Limiting the Page Width.mp4

06:04

06 - Build Responsive Navigation

14 - Introduction to Responsive Navigation.mp4

05:40

15 - Add the HTML Navigation.mp4

01:51

16 - Styling the Small Screen.mp4

02:44

17 - Styling the Medium and Large Screens.mp4

02:30

18 - Adding JavaScript.mp4

02:48

07 - Build the Hero

19 - Introduction to Hero Images.mp4

03:56

20 - Options for the Hero Image.mp4

01:39

21 - Building the Hero Image.mp4

03:53

08 - Build this Weeks Specials

22 - Introduction to Weekly Specials.mp4

01:55

23 - Grid, Position, and RGBA.mp4

05:33

09 - Responsive Fruit Pie Gallery

24 - Introduction to Gallery Page.mp4

02:23

25 - Wayfinding and Grid Columns.mp4

03:39

26 - Implementing Multiple Selectors.mp4

01:59

10 - Implementing a CSS Preprocessor

27 - Introduction to CSS Preprocessors.mp4

04:12

28 - Converting to a SASS Workflow.mp4

06:08

29 - Implementing SASS Variables.mp4

04:14

30 - Implementing SASS Nesting.mp4

02:32

11 - Introduction to Bootstrap

31 - Introduction to Bootstrap.mp4

03:53

32 - Downloading and Connecting Files.mp4

02:23

33 - Building the Header and Footer.mp4

02:39

34 - Building the Navigation.mp4

03:21

35 - Building the Hero and Cards.mp4

05:18

12 - Wrap Up

36 - Overview.mp4

02:36

37 - Moving from Float to Flexbox.mp4

02:11

38 - Automating Grid Classes with SASS Loops.mp4

05:41

Description

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.

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.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

Web Design

Web Design Business

CSS Animations

Paul Cheney

Instructor's Courses

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.

Pluralsight

View courses Pluralsight

Pluralsight, LLC is an American privately held online education company that offers a variety of video training courses for software developers, IT administrators, and creative professionals through its website. Founded in 2004 by Aaron Skonnard, Keith Brown, Fritz Onion, and Bill Williams, the company has its headquarters in Farmington, Utah. As of July 2018, it uses more than 1,400 subject-matter experts as authors, and offers more than 7,000 courses in its catalog. Since first moving its courses online in 2007, the company has expanded, developing a full enterprise platform, and adding skills assessment modules.