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

Scrimba · Beginner ·🌐 Frontend Engineering ·5y ago

Key Takeaways

Shares essential developer tips and tricks with a pro developer

Original Description

🎓 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 Reads

Inside the Wayfair Frontend SDE-2 Interview: A Complete Breakdown

Learn how to prepare for a Frontend SDE-2 interview at Wayfair, including online assessments, machine coding, and system design.

Medium · Programming

I Spent Two Years Maintaining a React SPA. HTMX Rebuilt It in a Week

Learn how HTMX rebuilt a React SPA in a week, replacing 2 years of maintenance work, and discover the benefits of this alternative approach

Medium · Programming

The 5 Levels of Front End Engineering (And Where Most Developers Get Stuck)

Learn the 5 levels of front end engineering to improve your skills and avoid getting stuck in a career rut

Medium · Programming

Browser-Based PDF Editing with Vue 3 and pdf-lib

Learn to build a browser-based PDF editor using Vue 3 and pdf-lib, enabling users to edit PDFs directly in the browser

Dev.to · sunshey

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

How To Build A Twitter Clone - React Next JS - Appwrite Crash Course