CSS Grid Course: Named Lines

Scrimba · Intermediate ·💻 AI-Assisted Coding ·8y ago
Check out the full CSS Grid course for free here: https://scrimba.com/g/gR8PTE Named lines make it easier to understand how items are placed, as you can use names instead of numbers when you place your items.
Watch on YouTube ↗ (saves to browser)

Playlist

Playlist UUNW7HDseZb6N3nKUEP6uLag · Scrimba · 10 of 60

← Previous Next →
1 Introduction to Scrimba
Introduction to Scrimba
Scrimba
 2 CSS Grid Course: Learn the Basics in 3 Minutes
CSS Grid Course: Learn the Basics in 3 Minutes
Scrimba
 3 CSS Grid Course: Positioning Items
CSS Grid Course: Positioning Items
Scrimba
 4 CSS Grid Course: Why Learn It And How It Compares To Bootstrap
CSS Grid Course: Why Learn It And How It Compares To Bootstrap
Scrimba
 5 CSS Grid Course: auto-fit & minmax
CSS Grid Course: auto-fit & minmax
Scrimba
 6 CSS Grid Course: Implicit Rows
CSS Grid Course: Implicit Rows
Scrimba
 7 CSS Grid Course: Fraction Units And Repeat
CSS Grid Course: Fraction Units And Repeat
Scrimba
 8 CSS Grid Course: Justify Items and Align Items
CSS Grid Course: Justify Items and Align Items
Scrimba
 9 CSS Grid Course: An Awesome Image Grid
CSS Grid Course: An Awesome Image Grid
Scrimba
 ▶ CSS Grid Course: Named Lines
CSS Grid Course: Named Lines
Scrimba
 11 CSS Grid Course: auto-fit vs auto-fill
CSS Grid Course: auto-fit vs auto-fill
Scrimba
 12 CSS Grid Course: Justify Content and Align Content
CSS Grid Course: Justify Content and Align Content
Scrimba
 13 CSS Grid Course: Template areas
CSS Grid Course: Template areas
Scrimba
 14 27. Setting up the structure - Responsive CSS Tutorial
27. Setting up the structure - Responsive CSS Tutorial
Scrimba
 15 25. Making the navigation responsive - Responsive CSS Tutorial
25. Making the navigation responsive - Responsive CSS Tutorial
Scrimba
 16 36. Playing with the title's position and negative margins - Responsive CSS Tutorial
36. Playing with the title's position and negative margins - Responsive CSS Tutorial
Scrimba
 17 31. Starting the CSS for our page - Responsive CSS Tutorial
31. Starting the CSS for our page - Responsive CSS Tutorial
Scrimba
 18 26. Taking a look at the rest of the project - Responsive CSS Tutorial
26. Taking a look at the rest of the project - Responsive CSS Tutorial
Scrimba
 19 15. Spacing out the columns - Responsive CSS Tutorial
15. Spacing out the columns - Responsive CSS Tutorial
Scrimba
 20 33. Starting to think mobile first - Responsive CSS Tutorial
33. Starting to think mobile first - Responsive CSS Tutorial
Scrimba
 21 22. Making our navigation look good - Responsive CSS Tutorial
22. Making our navigation look good - Responsive CSS Tutorial
Scrimba
 22 37. Changing image size with object-fit - Responsive CSS Tutorial
37. Changing image size with object-fit - Responsive CSS Tutorial
Scrimba
 23 44. Module Wrap up - Responsive CSS Tutorial
44. Module Wrap up - Responsive CSS Tutorial
Scrimba
 24 16. Controlling the vertical position of flex items - Responsive CSS Tutorial
16. Controlling the vertical position of flex items - Responsive CSS Tutorial
Scrimba
 25 39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
Scrimba
 26 42. Setting up the About Me page - Responsive CSS Tutorial
42. Setting up the About Me page - Responsive CSS Tutorial
Scrimba
 27 35. Changing the visual order with flexbox - Responsive CSS Tutorial
35. Changing the visual order with flexbox - Responsive CSS Tutorial
Scrimba
 28 23. Adding the underline - Responsive CSS Tutorial
23. Adding the underline - Responsive CSS Tutorial
Scrimba
 29 21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
Scrimba
 30 20. Creating a navigation - Responsive CSS Tutorial
20. Creating a navigation - Responsive CSS Tutorial
Scrimba
 31 40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
Scrimba
 32 43. Fixing up some loose ends - Responsive CSS Tutorial
43. Fixing up some loose ends - Responsive CSS Tutorial
Scrimba
 33 32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
Scrimba
 34 24. A more complicated navigation - Responsive CSS Tutorial
24. A more complicated navigation - Responsive CSS Tutorial
Scrimba
 35 28. Feature article structure - Responsive CSS Tutorial
28. Feature article structure - Responsive CSS Tutorial
Scrimba
 36 34. Styling the featured article - Responsive CSS Tutorial
34. Styling the featured article - Responsive CSS Tutorial
Scrimba
 37 18. Making layout responsive with flex direction - Responsive CSS Tutorial
18. Making layout responsive with flex direction - Responsive CSS Tutorial
Scrimba
 38 19. flex direction explained - Responsive CSS Tutorial
19. flex direction explained - Responsive CSS Tutorial
Scrimba
 39 41. Creating the recent posts page - Responsive CSS Tutorial
41. Creating the recent posts page - Responsive CSS Tutorial
Scrimba
 40 17. Media Query basics - Responsive CSS Tutorial
17. Media Query basics - Responsive CSS Tutorial
Scrimba
 41 30. Home Page. HTML for the aside - Responsive CSS Tutorial
30. Home Page. HTML for the aside - Responsive CSS Tutorial
Scrimba
 42 38. Styling recent articles for large screens - Responsive CSS Tutorial
38. Styling recent articles for large screens - Responsive CSS Tutorial
Scrimba
 43 29. The home page. HTML for the recent articles - Responsive CSS Tutorial
29. The home page. HTML for the recent articles - Responsive CSS Tutorial
Scrimba
 44 10. ems and rems an example - Responsive CSS Tutorial
10. ems and rems an example - Responsive CSS Tutorial
Scrimba
 45 1. Starting to think responsively - Responsive CSS Tutorial
1. Starting to think responsively - Responsive CSS Tutorial
Scrimba
 46 4. Controlling the width of images - Responsive CSS Tutorial
4. Controlling the width of images - Responsive CSS Tutorial
Scrimba
 47 5. min width and max width - Responsive CSS Tutorial
5. min width and max width - Responsive CSS Tutorial
Scrimba
 48 3 CSS Units. Percentage - Responsive CSS Tutorial
3 CSS Units. Percentage - Responsive CSS Tutorial
Scrimba
 49 11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial
11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial
Scrimba
 50 12. Basic Styles and setting up the columns - Responsive CSS Tutorial
12. Basic Styles and setting up the columns - Responsive CSS Tutorial
Scrimba
 51 8. The Solution Rems - Responsive CSS Tutorial
8. The Solution Rems - Responsive CSS Tutorial
Scrimba
 52 14. Setting the columns widths - Responsive CSS Tutorial
14. Setting the columns widths - Responsive CSS Tutorial
Scrimba
 53 2 CSS Units - Responsive CSS Tutorial
2 CSS Units - Responsive CSS Tutorial
Scrimba
 54 7. The problem with ems - Responsive CSS Tutorial
7. The problem with ems - Responsive CSS Tutorial
Scrimba
 55 6. CSS Units. The em unit - Responsive CSS Tutorial
6. CSS Units. The em unit - Responsive CSS Tutorial
Scrimba
 56 13. Adding the background color - Responsive CSS Tutorial
13. Adding the background color - Responsive CSS Tutorial
Scrimba
 57 9. Picking which unit to use - Responsive CSS Tutorial
9. Picking which unit to use - Responsive CSS Tutorial
Scrimba
 58 Tutorial to Learn Alpine JS - Full Course for Beginners
Tutorial to Learn Alpine JS - Full Course for Beginners
Scrimba
 59 Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Scrimba
 60 Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Scrimba
Coding map and filter from scratch in plain JavaScript
Next Up
Coding map and filter from scratch in plain JavaScript
Fun Fun Function