Ask an Expert: Essential Developer Tips and Tricks with a Pro Dev

Scrimba · Beginner ·📰 AI News & Updates ·5y ago

🎓 View our courses: https://scrimba.com/links/all-courses 📺 In this live stream, pro developer Michael Rybintsev and Scrimba Community Manager Leanne Rybintsev will share their need-to-know coding tips and tricks to save you time, increase your productivity and make you a web dev virtuoso. 🖥 Contents 🖥 0:45 - Introduction 02:28 - Array Methods Cheat Sheet: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1g4wzjm3budlz0ds4tj.JPG 04:57 - React Hooks Cheat Sheet: https://scastiel.gumroad.com/l/react-hooks-cheatsheet 06:18 - Flexbox Cheat Sheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 08:32 - Grid Layout Generator: https://grid.layoutit.com/ 12:28 - Box Shadow Generator: https://cssgenerator.org/box-shadow-css-generator.html 14:09 - Can I Use: https://caniuse.com/ 15:42 - VSCode Cheat Sheet (Mac): https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf 15:42 - VSCode Cheat Sheet (Windows): https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf 17:43 - VSCode Live Server Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer 21:24 - VSCode RestClient Extension: https://marketplace.visualstudio.com/items?itemName=humao.rest-client 28:33 - Dev Tools - Toggle Device Toolbar: https://developer.chrome.com/docs/devtools/device-mode/ 33:06 - Dev Tools Contrast Ratio Checker 34:36 - Online Contrast Ratio Checker: https://contrast-ratio.com/ 35:06 - Explain Shell: https://explainshell.com/ 39:59 - JavaScript Operator Lookup: https://www.joshwcomeau.com/operator-lookup/ 40:36 - Unsplash (free images): https://unsplash.com/ 42:37 - JSON Placeholder: http://jsonplaceholder.typicode.com/ 43:51 - Google Color Picker: https://www.google.com/search?q=color+picker 44:23 - W3 Schools Color Picker: https://www.w3schools.com/colors/colors_picker.asp 46:15 - Regexr: https://regexr.com/ 43:13 - Regex Cheat Sheet: https://ihateregex.io 50:17 - Pixel to Rem Converter: https://www.ninjau

Watch on YouTube ↗ (saves to browser)

Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Scrimba · Scrimba · 0 of 60

← Previous Next →

CSS Grid Course: Learn the Basics in 3 Minutes

CSS Grid Course: Learn the Basics in 3 Minutes

CSS Grid Course: Positioning Items

CSS Grid Course: Positioning Items

CSS Grid Course: Why Learn It And How It Compares To Bootstrap

CSS Grid Course: Why Learn It And How It Compares To Bootstrap

CSS Grid Course: auto-fit & minmax

CSS Grid Course: auto-fit & minmax

CSS Grid Course: Implicit Rows

CSS Grid Course: Implicit Rows

CSS Grid Course: Fraction Units And Repeat

CSS Grid Course: Fraction Units And Repeat

CSS Grid Course: Justify Items and Align Items

CSS Grid Course: Justify Items and Align Items

CSS Grid Course: An Awesome Image Grid

CSS Grid Course: An Awesome Image Grid

CSS Grid Course: Named Lines

CSS Grid Course: Named Lines

CSS Grid Course: auto-fit vs auto-fill

CSS Grid Course: auto-fit vs auto-fill

CSS Grid Course: Justify Content and Align Content

CSS Grid Course: Justify Content and Align Content

CSS Grid Course: Template areas

CSS Grid Course: Template areas

27. Setting up the structure - Responsive CSS Tutorial

27. Setting up the structure - Responsive CSS Tutorial

25. Making the navigation responsive - Responsive CSS Tutorial

25. Making the navigation responsive - Responsive CSS Tutorial

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

31. Starting the CSS for our page - Responsive CSS Tutorial

31. Starting the CSS for our page - Responsive CSS Tutorial

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

15. Spacing out the columns - Responsive CSS Tutorial

15. Spacing out the columns - Responsive CSS Tutorial

33. Starting to think mobile first - Responsive CSS Tutorial

33. Starting to think mobile first - Responsive CSS Tutorial

22. Making our navigation look good - Responsive CSS Tutorial

22. Making our navigation look good - Responsive CSS Tutorial

37. Changing image size with object-fit - Responsive CSS Tutorial

37. Changing image size with object-fit - Responsive CSS Tutorial

44. Module Wrap up - Responsive CSS Tutorial

44. Module Wrap up - Responsive CSS Tutorial

16. Controlling the vertical position of flex items - Responsive CSS Tutorial

16. Controlling the vertical position of flex items - Responsive CSS Tutorial

39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial

39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial

42. Setting up the About Me page - Responsive CSS Tutorial

42. Setting up the About Me page - Responsive CSS Tutorial

35. Changing the visual order with flexbox - Responsive CSS Tutorial

35. Changing the visual order with flexbox - Responsive CSS Tutorial

23. Adding the underline - Responsive CSS Tutorial

23. Adding the underline - Responsive CSS Tutorial

21. Using flexbox to start styling our navigation - Responsive CSS Tutorial

21. Using flexbox to start styling our navigation - Responsive CSS Tutorial

20. Creating a navigation - Responsive CSS Tutorial

20. Creating a navigation - Responsive CSS Tutorial

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

43. Fixing up some loose ends - Responsive CSS Tutorial

43. Fixing up some loose ends - Responsive CSS Tutorial

32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial

32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial

24. A more complicated navigation - Responsive CSS Tutorial

24. A more complicated navigation - Responsive CSS Tutorial

28. Feature article structure - Responsive CSS Tutorial

28. Feature article structure - Responsive CSS Tutorial

34. Styling the featured article - Responsive CSS Tutorial

34. Styling the featured article - Responsive CSS Tutorial

18. Making layout responsive with flex direction - Responsive CSS Tutorial

18. Making layout responsive with flex direction - Responsive CSS Tutorial

19. flex direction explained - Responsive CSS Tutorial

19. flex direction explained - Responsive CSS Tutorial

41. Creating the recent posts page - Responsive CSS Tutorial

41. Creating the recent posts page - Responsive CSS Tutorial

17. Media Query basics - Responsive CSS Tutorial

17. Media Query basics - Responsive CSS Tutorial

30. Home Page. HTML for the aside - Responsive CSS Tutorial

30. Home Page. HTML for the aside - Responsive CSS Tutorial

38. Styling recent articles for large screens - Responsive CSS Tutorial

38. Styling recent articles for large screens - Responsive CSS Tutorial

29. The home page. HTML for the recent articles - Responsive CSS Tutorial

29. The home page. HTML for the recent articles - Responsive CSS Tutorial

10. ems and rems an example - Responsive CSS Tutorial

10. ems and rems an example - Responsive CSS Tutorial

1. Starting to think responsively - Responsive CSS Tutorial

1. Starting to think responsively - Responsive CSS Tutorial

4. Controlling the width of images - Responsive CSS Tutorial

4. Controlling the width of images - Responsive CSS Tutorial

5. min width and max width - Responsive CSS Tutorial

5. min width and max width - Responsive CSS Tutorial

3 CSS Units. Percentage - Responsive CSS Tutorial

3 CSS Units. Percentage - Responsive CSS Tutorial

11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial

11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial

12. Basic Styles and setting up the columns - Responsive CSS Tutorial

12. Basic Styles and setting up the columns - Responsive CSS Tutorial

8. The Solution Rems - Responsive CSS Tutorial

8. The Solution Rems - Responsive CSS Tutorial

14. Setting the columns widths - Responsive CSS Tutorial

14. Setting the columns widths - Responsive CSS Tutorial

2 CSS Units - Responsive CSS Tutorial

2 CSS Units - Responsive CSS Tutorial

7. The problem with ems - Responsive CSS Tutorial

7. The problem with ems - Responsive CSS Tutorial

6. CSS Units. The em unit - Responsive CSS Tutorial

6. CSS Units. The em unit - Responsive CSS Tutorial

13. Adding the background color - Responsive CSS Tutorial

13. Adding the background color - Responsive CSS Tutorial

9. Picking which unit to use - Responsive CSS Tutorial

9. Picking which unit to use - Responsive CSS Tutorial

Tutorial to Learn Alpine JS - Full Course for Beginners

Tutorial to Learn Alpine JS - Full Course for Beginners

Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial

Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial

Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners

Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners

Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course

Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course

Related AI Lessons

Day 15: The Ripple Effect — Why You Should Start “Building in Public” Today

Learn how building in public can help you achieve AI mastery by sharing your journey and progress with others

When the Instrument Changes

Learn to adapt and compose differently when old patterns no longer fit, a crucial skill in AI and professional growth

Top-Rated AI Development Companies in 2026 for Custom Business Solutions

Discover top-rated AI development companies for custom business solutions and learn how to approach AI development effectively

Big Tech firms are accelerating AI investments and integration, while regulators and companies focus on safety and responsible adoption.

Big Tech firms are investing billions in AI, driving growth and transformation, while prioritizing safety and responsible adoption

Chapters (23)

0:45 Introduction

2:28 Array Methods Cheat Sheet: https://dev-to-uploads.s3.amazonaws.com/uploads/art

4:57 React Hooks Cheat Sheet: https://scastiel.gumroad.com/l/react-hooks-cheatsheet

6:18 Flexbox Cheat Sheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

8:32 Grid Layout Generator: https://grid.layoutit.com/

12:28 Box Shadow Generator: https://cssgenerator.org/box-shadow-css-generator.html

14:09 Can I Use: https://caniuse.com/

15:42 VSCode Cheat Sheet (Mac): https://code.visualstudio.com/shortcuts/keyboard-sho

15:42 VSCode Cheat Sheet (Windows): https://code.visualstudio.com/shortcuts/keyboard

17:43 VSCode Live Server Extension: https://marketplace.visualstudio.com/items?itemN

21:24 VSCode RestClient Extension: https://marketplace.visualstudio.com/items?itemNa

28:33 Dev Tools - Toggle Device Toolbar: https://developer.chrome.com/docs/devtools/

33:06 Dev Tools Contrast Ratio Checker

34:36 Online Contrast Ratio Checker: https://contrast-ratio.com/

35:06 Explain Shell: https://explainshell.com/

39:59 JavaScript Operator Lookup: https://www.joshwcomeau.com/operator-lookup/

40:36 Unsplash (free images): https://unsplash.com/

42:37 JSON Placeholder: http://jsonplaceholder.typicode.com/

43:51 Google Color Picker: https://www.google.com/search?q=color+picker

44:23 W3 Schools Color Picker: https://www.w3schools.com/colors/colors_picker.asp

46:15 Regexr: https://regexr.com/

43:13 Regex Cheat Sheet: https://ihateregex.io

50:17 Pixel to Rem Converter: https://www.ninjau

OpenAI Spud (GPT 6), Claude Conway, GPT Image 2, Cursor 3, Claude Code Ultra, & More! AI NEWS!