Skip to main content

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 54 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: #0.2 Introduction

All Course Lessons (54)

#Lesson TitleDurationAccess
1
#0.2 Introduction Demo
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

Unlock unlimited learning

Get instant access to all 53 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Sass - from beginner to real world

Sass - from beginner to real world

Sources: kevin powell
Sass has become an essential language to learn for front-end developers. It helps you write your code faster, pull off things that sometimes seem like magic, and it’s also a par...
8 hours 2 minutes 59 seconds
Flexbox Simplified

Flexbox Simplified

Sources: kevin powell
Flexbox is a wonderful tool that opens up the world of responsive layouts, but it can be hard to predict exactly what's going to happen when we use it, and it's full of sometime...
4 hours 41 minutes 57 seconds
100 Days Of Code: The Complete Web Development Bootcamp 2024

100 Days Of Code: The Complete Web Development Bootcamp 2024

Sources: Academind Pro
Learn web development from A to Z in 100 days (or at your own pace) - from "basic" to "advanced", it's all included!
78 hours 51 minutes 55 seconds
CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)

CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)

Sources: udemy
Course consists of several sections. You will start from CSS essentials, in which you will meet some basic topics. Then after finishing basic part, you will move on to advanced ...
11 hours 31 minutes 23 seconds
Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!

Sources: udemy
Do you want to learn the fundamentals of modern web development fast? Do you want to find out if building websites and apps is the right career path for you? Or maybe you just w...
12 hours 13 minutes 30 seconds