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
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
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
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
Sources: Josh Comeau
Learn CSS confidently with this interactive course designed for JavaScript developers. Understand CSS systems to enhance your web development skills and...
Want to join the conversation?
Sign in to comment