Practical CSS Layouts

Practical CSS Layouts

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 56 Lessons (8h 58m) | 1.49 GB

Bored with basic layouts? Unsure how to make them spicier? This is the workshop for you! Join Jen Kramer for two immersive days building three different responsive websites for the fictional band Magenta Lime. We’ll start with a basic website, solidifying our fonts, sizing, colors, images, breakpoints, and fundamentals of the design. Next, we’ll move a medium difficulty site, reusing many elements from the basic design but adding interactivity, additional styling, and a tiny bit of JavaScript. Finally, we’ll tackle a complex site, adding animations, interactivity, and even more challenging layouts.

By participating along with us in the workshop, you’ll learn:

  • Create 3 different websites with the same material – easy, medium, hard
  • Move basic layouts to complex layouts with a handful of CSS properties
  • Keep it accessible with semantic markup
  • Learn some of the latest layout moves beyond Jen’s other courses
Table of Contents

1 Introduction
2 Styleguide Exercise CSS Basics Setup
3 rem vs. em Units
4 Style Guide Type Sizes
5 Custom Font & Responsive Image
6 HTML Markup for a Simple Website
7 CSS for a Simple Responsive Layout
8 Mobile Tour Styles
9 Reviews & Images Styles
10 Margin Collapse
11 Basic CSS Footer Styles
12 CSS for Tablet Layout
13 Responsive Images with the Picture Element
14 Basic Tablet CSS Layout
15 CSS Styles for Desktop Layout
16 Tour Page Styles
17 Button Styling Practice
18 Button Interactive States
19 Tour Text Styles
20 Tour Layout Practice
21 Album & Tracklist Exercise
22 Album Solution
23 Album Styles
24 Tracklist Styles
25 Reviews & Images Mobile Styles
26 Reviews & Images Tablet Styles
27 Reviews & Images Tablet Styles Exercise
28 Reviews & Images Desktop Styles
29 Audio Player Overview
30 Audio Player Markup
31 Audio Player Base Styles
32 Play & Mute Button Styles
33 Range Slider Styles
34 Album Cover Styles
35 Hamburger Menu Exercise
36 Hamburger Menu Logo Exercise
37 Hamburger Menu Styles Exercise
38 Hamburger Menu Tablet & Mobile Styles
39 Medium Design Site Assembly Exercise
40 Medium Design Desktop Layout Exercise
41 Small Elements Exercise
42 Small Elements Solution
43 Review Layout Exercise
44 Album Boxes Exercise & Solution
45 Double Border Corners
46 Navigation Exercise & Solution
47 Social Icons
48 Tracklist CSS
49 Tracklist Show & Hide JavaScript
50 Tracklist Grid for Tablet & Desktop
51 CSS Transitions & Custom Table Scrollbar
52 Diamond Images Mobile Layout
53 Diamond Images Tablet & Desktop Layout
54 Advanced Layout Exercise
55 Advanced Desktop Layout
56 Wrapping Up