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 commentsSimilar courses
Pixel Perfect Figma to Tailwind
Sources: protailwind.com (Simon Vrachliotis), Simon Vrachliotis
This workshop is designed to help you achieve 'pixel-perfect' design implementations, bridging the fidelity gap between design and development. Throughout...
2 hours 40 minutes 16 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
Mastering CSS Grid 2022 - With 3 cool projects
Sources: udemy
CSS Grid is a relatively new and unused concept to CSS. It's very important these days that our layouts are simple to maintain, and easy to adjust based on the dimensions of our...
17 hours 16 minutes 22 seconds
HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid
Sources: udemy
Hi and welcome to the HTML/CSS Bootcamp course, where we'll walk through the same course I teach code bootcamp students around the world.
20 hours 55 minutes 14 seconds
Want to join the conversation?
Sign in to comment