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
0:00
/ #1: #0.2 Introduction
All Course Lessons (54)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
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
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
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)
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!
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