CF

CSS Layout Masterclass

6h 49m 41s
English
Paid

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

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


About the Author: Nomad Coders

Nomad Coders thumbnail

Nomad Coders is a Korean-origin online coding school founded by Nicolas Serrano (Nico). The school is one of the largest in the Korean developer-education market and has expanded internationally, publishing courses in both Korean and English that emphasise project-based learning across modern web and mobile stacks.

The CourseFlix listing carries eight Nomad Coders courses covering React, React Native, Next.js, NestJS, Twitter / Instagram clones, and the surrounding ecosystem (auth, real-time updates, deployment). Material is paid and aimed at developers who learn best from building complete applications end-to-end rather than studying frameworks in isolation.

Watch Online 54 lessons

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

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this CSS Layout course?
The course does not specify any formal prerequisites, but a basic understanding of HTML and CSS would be beneficial. Familiarity with web development concepts will help you grasp lessons on advanced CSS layout techniques like Flexbox and CSS Grid.
What types of layouts will I learn to create in this course?
You will learn to clone 11 beautiful layouts from movie, e-commerce, and portfolio websites. The course covers practical coding exercises and commentary on various layout designs, such as Best Horror Scenes, Paint Box, and Zoo.
Who would benefit most from taking this course?
The course is ideal for web developers looking to enhance their skills in CSS layout. It is especially useful for those interested in mastering Flexbox and Grid for building responsive and visually appealing web designs.
How does this course compare in depth and scope to other CSS courses?
This course focuses specifically on mastering CSS layout techniques such as Flexbox and Grid, covering both foundational concepts and advanced applications. It offers practical exercises like Flexbox Froggy and Grid Garden to reinforce learning, making it more hands-on than general CSS courses.
What specific tools or platforms will be used in the course?
The course will primarily utilize CSS for layout design, including tools like Flexbox and Grid. It also covers the use of CSS preprocessors, with lessons on variables, nesting, and mixins for more efficient styling.
What topics or tools are not covered in this course?
The course does not cover JavaScript or backend technologies. It is focused solely on CSS layout techniques and does not delve into other areas of web development such as JavaScript frameworks or server-side programming.
How much time should I expect to commit to this course?
The course consists of 54 lessons. While the total runtime is not specified, students should be prepared to spend time on both instructional videos and hands-on coding exercises to fully grasp the material.