Ask an Expert: New course - Scrimba x Kevin Powell x Frontend Mentor

Scrimba ยท Beginner ยท๐Ÿ–Œ๏ธ UI/UX Design ยท4y ago
Skills: UI Design60%
๐ŸŽ“ View our courses: https://scrimba.com/links/all-courses This week, we are delighted to be joined by Scrimba favorite Kevin Powell on the day his brand new course, a collab with Frontend Mentor and Scrimba, is released into the wild! ๐Ÿš€ โš›๏ธ Contents โš›๏ธ 0:00 - Introduction 0:39 - How was your experience building the course? 2:17 - Introducing the new course 4:44 - What skills will people take away from your new course? 6:15 - Is this course going to be added to the frontend career path? 6:55 - Can you give us a sneak preview of the accessibility features you added? 9:48 - What did you think when you saw the design? (from Frontend Mentor) 10:28 - Was there anything you found intimidating about this design? 11:21 - Do we learn Figma in this course? 12:31 - Did Scrimba have a say when they came up with the topic and design? 13:38 - Will this be a contained layout for large screens, or will it be scaled to fit 100vw / What was your approach to responsiveness? 15:24 - How was your experience of coding up a FE Mentor design? Which parts were the trickiest? 18:34 - What is a design system and what are the benefits of using one? 22:04 - Can you tell us a bit about the CSS resets youโ€™ve included in the course? 24:23 - Is Kevin selling us on Tailwind? 26:20 - How do you know when youโ€™re spending too much time on a design system? 29:25 - Are you using CSS clamp for this project? 30:04 - Would you ever build up a design system with Tailwind as a skeleton and do specific elements yourself? 31:56 - How much JS is involved in the course? 34:28 - Did you use subgrid for this project? 35:15 - How did Flexbox and Grid come into play when coding this design? 38:26 - Is the source code of this course on GitHub? 38:58 - How do you use shrink? When would you use it? 39:34 - Is the availability of this Scrimba course time sensitive? 39:54 - I am new to CSS and JS. Can I cover this course or should I complete a few projects before? 41:48 - I often get confused with layouts (i.e absolut
Watch on YouTube โ†— (saves to browser)
Sign in to unlock AI tutor explanation ยท โšก30

Playlist

Uploads from Scrimba ยท Scrimba ยท 0 of 60

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

Related AI Lessons

Chapters (26)

Introduction
0:39 How was your experience building the course?
2:17 Introducing the new course
4:44 What skills will people take away from your new course?
6:15 Is this course going to be added to the frontend career path?
6:55 Can you give us a sneak preview of the accessibility features you added?
9:48 What did you think when you saw the design? (from Frontend Mentor)
10:28 Was there anything you found intimidating about this design?
11:21 Do we learn Figma in this course?
12:31 Did Scrimba have a say when they came up with the topic and design?
13:38 Will this be a contained layout for large screens, or will it be scaled to fit
15:24 How was your experience of coding up a FE Mentor design? Which parts were the
18:34 What is a design system and what are the benefits of using one?
22:04 Can you tell us a bit about the CSS resets youโ€™ve included in the course?
24:23 Is Kevin selling us on Tailwind?
26:20 How do you know when youโ€™re spending too much time on a design system?
29:25 Are you using CSS clamp for this project?
30:04 Would you ever build up a design system with Tailwind as a skeleton and do spe
31:56 How much JS is involved in the course?
34:28 Did you use subgrid for this project?
35:15 How did Flexbox and Grid come into play when coding this design?
38:26 Is the source code of this course on GitHub?
38:58 How do you use shrink? When would you use it?
39:34 Is the availability of this Scrimba course time sensitive?
39:54 I am new to CSS and JS. Can I cover this course or should I complete a few pro
41:48 I often get confused with layouts (i.e absolut
Up next
Designing for Brands and Social Media with Photoshop
Coursera
Watch โ†’