The Frontend Developer Career Path

Unlock CourseGet started!

Join 20299 other students

Log in to get

Access to 30+ free courses
Interactive hands-on content
Challenge weeks - code to win!
Join a friendly community
Unlock Course
Subscribe to access!Subscribe to access!

Subscribe to access to this course and ALL other courses. You get a 30-day money-back guarantee, no questions asked.

This path includes

75 hours of content
100s of coding challenges
HTML, CSS, JS & React
Career module
Cancel subscription whenever

This career path will turn you into a hireable frontend developer, and teach you how to nail the job interview. It contains over 70 hours of top-notch tutorials, hundreds of coding challenges, and dozens of real-world projects.

Your program

The program contains 14 modules. All modules are filled with interactive coding challenges to ensure that you don't fall off the wagon. You'll learn HTML, CSS, JavaScript, React, UI design, career strategy, and more.

Welcome to the career path

Get prepared. In this module, you'll meet your teachers, learn how Scrimba works, and build your first web app.

Web dev basics

Learn the very basics of HTML and CSS. Start creating layouts, and style them how you want.

Making websites interactive

Combine your newly acquired HTML & CSS skills with Javascript. This will allow you to create interactive websites.

Build a Blackjack game

55 lessons2 hours 43 min

1. Let's build a Blackjack game!
0:57
2. Live events on Scrimba
2:40
3. Add the firstCard, secondCard, and sum
0:52
4. If...else conditionals
5:39
5. Your first if...else statement
2:53
6. if/else...if/else statement
3:21
7. The if...else statement for our game
1:59
8. Add the hasBlackJack variable
2:03
9. Add the isAlive variable
1:44
10. Let's practice boolean conditions
3:25
11. Add the message variable
3:21
12. Link to stylesheet
2:32
13. Add basic styling
4:18
14. Make the start button work
5:49
15. Display the message
2:32
16. Display the sum
5:43
17. Display the cards
1:53
18. New card button
3:39
19. Add to the sum when newCard is clicked
3:16
20. Rename the startGame function
2:11
21. Solving our cards problem with an array
3:16
22. Intro to arrays
5:24
23. Array indexes
4:03
24. Arrays with multiple data types
2:18
25. Adding and removing items from arrays
4:20
26. Creating the cards array
1:04
27. Push a new card to the array
1:18
28. Counting in JavaScript
4:01
29. Write your first loop
3:22
30. For loops and arrays
3:43
31. Write your first array-based for loop
1:29
32. For loops, arrays, and DOM
2:55
33. Use a loop to render cards
2:16
34. How can we avoid to hard-code card values?
1:31
35. Returning values in functions
4:59
36. Use a function to set the card values
3:06
37. Generating random numbers with Math.random()
4:15
38. Math.random() * 6
1:43
39. Flooring the number with Math.floor()
1:24
40. Using Math.random() and Math.floor() to create a dice
1:40
41. Completing our dice function
2:37
42. Make getRandomCard() work
2:54
43. Complete getRandomNumber function
3:02
44. Assign values in the startGame function
2:42
45. Our new card feature is broken
0:59
46. The logical AND operator
3:41
47. Write your first logical operator
2:04
48. The logical OR operator
3:02
49. Only trigger newCard() if you're allowed to
1:27
50. Object sneak peek
4:32
51. Intro to objects
4:43
52. Create your first object
3:15
53. Use an object to store player data
2:37
54. Methods on object
1:58
55. Congrats & recap
4:24
Build a Chrome Extension

55 lessons2 hours 46 min

1. Let's build a Chrome Extension!
4:33
2. Add button and input tag
1:33
3. Style the button and input tag
7:16
4. Make the input button work with onclick
1:17
5. Refactor to addEventListener
2:18
6. Write your first addEventListener()
1:44
7. Your turn to refactor
1:22
8. Create the myLeads array and inputEl
2:21
9. When to use let and const
3:17
10. Push to the myLeads array
1:10
11. Push the value from the input field
2:27
12. Use a for loop to log out leads
1:39
13. Create the unordered list
1:55
14. Render the leads in the unordered list
3:41
15. How to render <li> elements with innerHTML
1:33
16. Write your first innerHTML
1:31
17. More innerHTML practice
1:48
18. Render the <li> elements with innerHTML
1:07
19. Use createElement() and append() instead of innerHTML
3:35
20. Improving the performance of our app
3:17
21. Create the render function
2:00
22. Clear the input field
2:03
23. Add the <a> tag
4:28
24. Template strings
2:30
25. Write your first template string
1:15
26. Make the template string even more dynamic
0:51
27. Template strings on multiple lines
2:53
28. Refactor the app to use a template string
1:12
29. Style the list
3:50
30. Preparing the deployment
4:52
31. Deploying the Chrome Extension
2:28
32. What is localStorage?
3:02
33. Your first localStorage
3:48
34. Storing arrays in localStorage
6:23
35. Save the leads to localStorage
2:28
36. Get the leads from localStorage
3:50
37. Truthy and falsy values
7:54
38. Guess the expression - truthy or falsy?
2:22
39. Checking localStorage before rendering
3:37
40. Style the delete button
3:17
41. Make the delete button work
4:16
42. How function parameters can improve our code
5:54
43. Write your first function parameter
3:27
44. Functions with multiple parameters
3:11
45. Numbers as function parameters
1:41
46. Arguments vs Parameters
3:22
47. Arrays as parameters
1:54
48. Refactor renderLeads() to use a parameter
1:39
49. Create the tabBtn
3:19
50. Save the tab url
2:35
51. How to get the current tab?
4:19
52. Use the Chrome API to get the tab
6:18
53. Deploy the final version
2:14
54. Congrats & recap
5:43
55. Share your pet!
1:23

Essential CSS concepts

In this module, you'll level up your CSS skills, and build a neat NFT site.

Essential JavaScript concepts

In this module, you'll level up your JavaScript skills and build three super-cool apps.

Responsive design

This module teaches you how to make your websites work well on all screen sizes, a critical skill for any frontend developer.

Starting to think responsively

45 lessons4 hours 7 min

1. Starting to think responsively
3:00
2. CSS Units
3:11
3. CSS Units - Percentage
5:55
4. Controlling the width of images
4:47
5. min-width and max-width
2:46
6. CSS Units - The em unit
5:27
7. The problem with ems
2:29
8. CSS Units - rems
4:44
9. Picking which unit to use
3:31
10. ems and rems - an example
7:47
11. Flexbox refresher and setting up some HTML
7:51
12. Basic styles and setting up the columns
7:02
13. Adding the background color
4:10
14. Setting the column widths
3:36
15. Spacing out the columns
4:24
16. Controlling the vertical position of flex items
5:12
17. Media Query basics
10:05
18. Making our layout responsive with flex-direction
6:52
19. flex-direction explained
3:04
20. Creating a navigation
4:44
21. Using flexbox to start styling our navigation
7:36
22. Making our navigation look good
7:15
23. Adding the underline
3:58
24. A more complicated navigation
6:41
25. Making the navigation responsive
6:53
26. Taking a look at the rest of the project
4:10
27. Setting up the structure
8:22
28. Featured article structure
5:05
29. The home page - HTML for the recent articles
2:29
30. home page - html for the aside
6:03
31. Starting the CSS for our page
15:26
32. Starting the layout - looking at the big picture
8:30
33. Starting to think mobile first
2:46
34. Styling the featured article
6:22
35. Changing the visual order with flexbox
5:12
36. Playing with the title's position, and the downsides of negative margins
4:42
37. Styling recent articles for large screens
7:44
38. Changing image sizes with object-fit
3:53
39. Setting up the widgets and talking breakpoints
6:48
40. Using a new pseudo-class to wrap-up the homepage
7:28
41. Creating the recent posts page
3:25
42. Setting up the About Me page
4:12
43. Fixing up some loose ends
4:28
44. Important Note: The viewport meta tag
3:39
45. Module wrap up
3:14
Responsive design challenges

23 lessons1 hour 2 min

Stepping up our style

39 lessons2 hours 53 min

1. It's time to step up our style
2:40
2. A look at line-height
5:12
3. text-transform: uppercase
4:01
4. Making things easier to read with letter-spacing
4:02
5. A nice color trick with rgba()
4:52
6. background-images
3:59
7. Background images and the file path (very important note)
2:05
8. Controlling our background images
7:55
9. BBQ Splash Page - Project Introduction
3:23
10. Writing the HTML for the BBQ splash page
7:01
11. Starting to style it up - BBQ Splash Page
11:07
12. Adding the background image - BBQ Splash Page
3:46
13. Changing the order - BBQ Splash Page
3:45
14. Styling the main content area - BBQ Splash page
2:51
15. Adding the media query - BBQ Splash Page
4:22
16. Setting up the typography for large screens - BBQ Splash Page
2:13
17. Starting to set things up for large screens - BBQ Splash Page
3:22
18. Viewport units
7:29
19. Adding viewport units to the BBQ Splash Page
2:08
20. Enter box-sizing: border-box
7:07
21. Using flexbox to vertically center the main content - BBQ Splash Page
3:19
22. Fixing the intro section on both small and large screens - BBQ Splash Page
2:34
23. Dealing with very large screens solution #1
4:24
24. Dealing with very big screens solution #2
5:30
25. The very basics of forms
10:49
26. Form basics - form attributes
4:13
27. The basics of styling form
5:11
28. Adding the form - BBQ Splash Page
3:30
29. Starting to style up the form - BBQ Splash Page
4:03
30. Making the inputs look good - BBQ Splash Page
3:54
31. CSS Gradients
5:31
32. Styling the button - BBQ Splash Page
5:09
33. Basic transitions
4:44
34. Intro to transforms (and a quick word on performance)
3:01
35. We can transition more than :hover
2:54
36. Border gradients
4:52
37. Blending images, colors, and gradients with background-blend-mode
4:16
38. Wrap up
1:41
39. You've completed module 6! πŸ₯³
0:32

Next-level JavaScript

In this module, you will take your JavaScript skills to the next level, and learn about modern JS patterns. You will also build a cool game.

Working with APIs

Web APIs are the backbone of the web. In this module, you'll learn to use it, and build several different projects.

Building apps with Flexbox and Grid

Learn how to create layouts with modern CSS modules like Flexbox and Grid. Combine it with JavaScript to build interactive API-based apps.

Learn UI design

In this module, you'll learn how to build apps that both look good and work well.

React basics

Learn the most popular library for building user interfaces. This will increase your productivity by an order of magnitude.

Build a meme generator

64 lessons5 hours 7 min

1. Section Intro & Figma file
4:17
2. Meme Generator: Header
5:08
3. Meme Generator: Form
6:01
4. Project analysis
1:04
5. Event Listeners
6:07
6. Project: Get random meme
5:42
7. Our current conundrum
8:09
8. Props vs. State: Props
5:08
9. Props vs. State: State
4:28
10. Props vs. State Quiz!
4:03
11. useState
3:52
12. useState array destructuring
1:46
13. Changing state
3:03
14. useState - Counter practice
5:45
15. useState - Changing state with a callback function
4:18
16. Changing state quiz!
2:30
17. Project: Add images to the meme generator
2:56
18. Challenge: ternary practice
3:50
19. Challenge: flipping state back and forth
5:59
20. Complex state: arrays
10:28
21. Complex state: objects
3:58
22. Complex state: updating state objects
6:35
23. Project: Refactor state
4:10
24. Passing state as props
5:52
25. Setting state from child components
6:28
26. Passing data around
6:26
27. Boxes challenge part 1
3:49
28. Dynamic styles
5:42
29. Boxes challenge part 2
3:37
30. Boxes challenge part 3.1 - local state
4:54
31. Boxes challenge part 3.2 - unified state
7:45
32. Boxes challenge part 4
5:50
33. Boxes challenge part 5
5:57
34. Conditional rendering: &&
6:36
35. Conditional rendering: && practice
1:45
36. Conditional rendering: ternary
2:49
37. Conditional rendering practice
4:45
38. Conditional rendering quiz!
3:56
39. React forms intro
3:25
40. Watch for input changes in React
4:30
41. Form inputs practice
2:22
42. Forms state object
6:09
43. Form state object practice
1:49
44. Controlled inputs
4:14
45. Forms in React: Textarea
3:33
46. Forms in React: Checkbox
6:39
47. Forms in React: Radio buttons
6:00
48. Forms in React: Select & Option
2:49
49. Forms in React: Submitting the form
4:31
50. Forms quiz!
3:13
51. Sign up form practice
8:26
52. Project: Add text to image
3:58
53. Making API calls
4:00
54. Intro to useEffect
5:43
55. useEffect() syntax and default behavior
2:59
56. useEffect dependencies array
8:01
57. useEffect quiz!
3:48
58. useEffect for fetching data
5:48
59. useEffect: when to use dependencies
3:02
60. Project: Get Memes from API
8:11
61. State and Effect practices
7:02
62. useEffect cleanup function
5:53
63. Using an async function inside useEffect (Clone)
3:07
64. React Section 3 Recap
2:17

Advanced React

Level up your React JS skills to a professional level.

Getting hired

Learn to nail the coding interview, and get your first job.