CSS Layout Masterclass

6h 49m 41s
English
Paid

Course description

What will you make? 11 CSS Layout. We will clone 11 beautiful layout of movie, e-commerce and portfolio website..

Read more about the course

What will you learn

Flexbox

  • Main Axis / Cross Axis
  • Column and Row
  • align-self and order
  • wrap, nowrap, reverse, align
  • flex-grow, flex-shrink
  • flex-basis
  • many more...

Grid

  • template areas
  • rows and columns
  • grid-template
  • place-items
  • auto-columns, auto-rows
  • minmax
  • auto-fill, auto-fit
  • many more...

SCSS

  • Variables
  • Nesting
  • Mixins
  • Extends


Watch Online

Join premium to watch
Go to premium
# Title Duration
1 #0.2 Introduction 04:18
2 #0.3 What are we using 01:44
3 #1.0 Life Before Flexbox 06:10
4 #1.1 First Rule of Flexbox 03:33
5 #1.2 Main Axis and Cross Axis 09:26
6 #1.3 Column and Row 06:01
7 #1.4 align-self and order 07:26
8 #1.5 wrap, nowrap, reverse, align-content 07:00
9 #1.6 flex-grow, flex-shrink 08:02
10 #1.7 flex-basis 03:37
11 #1.8 Flexbox Froggy 1-13 06:27
12 #1.9 Flexbox Froggy 14-24 12:00
13 #2.1 Life Before Grid 03:55
14 #2.2 CSS Grid Basic Concepts 06:07
15 #2.3 Grid Template Areas 07:12
16 #2.4 Rows and Columns 07:33
17 #2.5 Shortcuts 06:39
18 #2.6 Line Naming 03:44
19 #2.7 Grid Template 11:03
20 #2.8 Place Items 06:19
21 #2.9 Place Content 06:34
22 #2.10 Auto Columns and Rows 09:44
23 #2.11 minmax 02:58
24 #2.12 auto-fit auto-fill 05:23
25 #2.13 min-content max-content 06:24
26 #2.14 Grid Garden part One 08:40
27 #2.15 Grid Garden part Two 10:23
28 #3.0 CSS Preprocessors and Set Up 04:37
29 #3.1 Variables and Nesting 10:39
30 #3.2 Mixins 08:20
31 #3.3 Extends 05:22
32 #3.4 Awesome Mixins and Conclusions 13:00
33 #4.0 Introduction 02:31
34 #4.1 Best Horror Scenes Coding 17:37
35 #4.2 Best Horror Scenes Comment 05:30
36 #4.3 Paint Box Coding 18:58
37 #4.4 Paint Box Comment 04:53
38 #4.5 10x19 Coding 11:17
39 #4.6 10x19 Comment 03:55
40 #4.7 Zoo Coding 13:44
41 #4.8 Zoo Commentary 02:49
42 #4.9 Schwartz Coding 17:50
43 #4.10 Schwartz Commentary 05:19
44 #4.11 Tolv Coding 15:18
45 #4.12 Tolv Commentary 04:26
46 #4.13 Rodic Davidson Coding 06:21
47 #4.14 Rodic Davidson Comment 01:58
48 #4.15 Beige Coding 15:16
49 #4.16 Beige Commentary 02:58
50 #4.17 Donica Coding 09:11
51 #4.18 Donica Commentary 03:46
52 #4.19 Canal Street Commentary 07:14
53 #4.20 Won Hundred Coding 14:11
54 #4.21 Won Hundred Commentary 04:19

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Complete CSS

Complete CSS

Sources: Andy Bell
Reach a level in development that once seemed impossible with this extensive course from Andy Bell. Senior-level CSS is about more than just syntax You can...
32 minutes 45 seconds
50 Projects In 50 Days - HTML, CSS & JavaScript

50 Projects In 50 Days - HTML, CSS & JavaScript

Sources: udemy, Brad Traversy
This is a purely project-based course. It is geared toward beginners, but intermediate developers can also enjoy creating new things. This course includes 50 mini projects in HT...
18 hours 13 minutes 45 seconds
Data Visualization + D3.js

Data Visualization + D3.js

Sources: superhi.com
Our Data Visualization course focuses on the practical aspects of working with data. In our 6-week long course, we’ll cover the basics of storytelling and worki
16 hours 48 minutes 54 seconds
CSS for JavaScript Developers

CSS for JavaScript Developers

Sources: Josh Comeau
Learn CSS confidently with this interactive course designed for JavaScript developers. Understand CSS systems to enhance your web development skills and...