Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

The Frontend Developer Career Path

Enroll for freeGet started!

Join 39065 other students

Log in to get

Access to all our free courses
Interactive hands-on content
100s of code challenges
Join a friendly community
Enroll for free
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 12 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 45 min

1. Let's build a Blackjack game!
0:57
2. Add the firstCard, secondCard, and sum
0:52
3. If...else conditionals
5:39
4. Your first if...else statement
2:53
5. if/else...if/else statement
3:21
6. The if...else statement for our game
1:59
7. Aside: Booleans
5:00
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. Aside: Intro to arrays
5:24
23. Aside: Array indexes
4:03
24. Arrays with multiple data types
2:18
25. Aside: Array.push() and .pop()
4:20
26. Creating the cards array
1:04
27. Push a new card to the array
1:18
28. Aside: Loops
4:01
29. Write your first loop
3:22
30. Aside: 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. Aside: Returning values in functions
4:59
36. Use a function to set the card values
3:06
37. Aside: 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. Aside: The AND operator (&&)
3:41
47. Write your first logical operator
2:04
48. Aside: The OR operator (||)
3:02
49. Only trigger newCard() if you're allowed to
1:27
50. Object sneak peek
4:32
51. Aside: 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

57 lessons2 hours 52 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. Aside: another way to render leads
2:49
24. Add the <a> tag
4:28
25. Template strings
2:30
26. Write your first template string
1:15
27. Make the template string even more dynamic
0:51
28. Template strings on multiple lines
2:53
29. Refactor the app to use a template string
1:12
30. Aside: Convert strings to numbers with Number()
3:42
31. Style the list
3:50
32. Preparing the deployment
4:52
33. Deploying the Chrome Extension
2:28
34. Aside: What is localStorage?
3:02
35. Your first localStorage
3:48
36. Storing arrays in localStorage
6:23
37. Save the leads to localStorage
2:28
38. Get the leads from localStorage
3:50
39. Aside: Truthy and falsy values
7:54
40. Guess the expression - truthy or falsy?
2:22
41. Checking localStorage before rendering
3:37
42. Style the delete button
3:17
43. Make the delete button work
4:16
44. How function parameters can improve our code
5:54
45. Write your first function parameter
3:27
46. Functions with multiple parameters
3:11
47. Numbers as function parameters
1:41
48. Aside: Arguments vs Parameters
3:22
49. Arrays as parameters
1:54
50. Refactor renderLeads() to use a parameter
1:39
51. Create the tabBtn
3:19
52. Save the tab url
2:35
53. How to get the current tab?
4:19
54. Use the Chrome API to get the tab
6:18
55. Deploy the final version
2:14
56. Congrats & recap
5:43
57. 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.

Essential JS Mini Projects

51 lessons3 hours 30 min

1. Intro to Mini Projects
1:14
2. Object Destructuring
3:12
3. Object Destructuring Challenge
2:02
4. The .map() Method
6:37
5. The .map() Method Challenge
3:59
6. The .join() Method
2:49
7. The .join() Method Challenge
2:18
8. .map() vs .forEach()
4:45
9. For loop Break and Continue
5:14
10. The dangers of innerHTML
5:26
11. Beyond Function Declarations 1: Function Expressions
3:18
12. Beyond Function Declarations 2: Function Expression Challenge
1:52
13. Beyond Function Declarations 3: Arrow Functions
5:44
14. Arrow Functions Challenge
4:00
15. Inline Arrow Functions Challenge
2:24
16. Import Export (named)
4:21
17. Import Export (default)
3:57
18. The .reduce() Method
6:06
19. The .reduce() Method Challenge
3:36
20. The .reduce() Method with Objects
7:35
21. The .reduce() Method with Objects Challenge
3:29
22. Default Parameters
2:56
23. Super Challenge Set-up
3:21
24. Super Challenge Solution
8:49
25. The Ternary Operator
4:01
26. The Ternary Operator for Complex Conditionals
3:05
27. Ternary Operator Challenge
3:47
28. Twimba Ternary Refactor
4:50
29. The Rest Parameter
5:23
30. The Rest Parameter Challenge
6:42
31. Spread Syntax (...)
4:11
32. Spread Syntax (...) Challenge
5:16
33. Short-circuiting with OR (||)
5:02
34. Short-circuiting with OR (||) Challenge
2:14
35. Short-circuiting with AND (&&)
2:47
36. Short-circuiting with AND (&&) Challenge
4:01
37. Switch Statements (new)
5:32
38. Constructors: Date()
5:27
39. The Error() Constructor
3:22
40. Objects with Methods and 'this'
5:14
41. Objects to Constructor Functions
4:36
42. Constructor Function Challenge
5:17
43. Constructor Functions to Classes
5:28
44. Constructor Functions to Classes Challenge
2:07
45. Debugging: Errors (new)
7:16
46. Debugging: console.error
2:24
47. Debugging: try...catch
4:39
48. Recap
2:08
49. Solo Project - Restaurant Ordering app
4:02
50. Deploy your Solo Project
0:44
51. Congratulations on completing module 5! 😃
1:30

Responsive design

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

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.

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

69 lessons5 hours 26 min

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

44 lessons3 hours 4 min

1. Section 4 Intro
2:33
2. Warm-up: Add Dark/Light modes to ReactFacts site
6:39
3. Notes App: Intro
9:55
4. Notes App: Features to add
1:25
5. Notes App: Sync notes with localStorage
5:59
6. Lazy State Initialization
5:12
7. Notes App: Note summary title
4:51
8. Notes App: Bump recent note to the top
6:49
9. Notes App: Delete note
8:57
10. Update to Notes app - adding Firebase! 🔥
2:17
11. Updating to Vite
3:53
12. Small refactors
3:01
13. Local Setup
2:47
14. Firebase Intro & Setup
4:28
15. Firebase Code Setup
3:09
16. onSnapshot - part 1
6:56
17. onSnapshot - part 2
3:03
18. Create new blank note
2:10
19. Delete Note
2:54
20. Update note - part 1
2:26
21. Update note - part 2
3:53
22. Challenge: createdAt and updatedAt
2:54
23. Challenge: sort notes
3:58
24. Debouncing updates - part 1
3:21
25. Debouncing updates - part 2
4:44
26. Debouncing updates - part 3
8:07
27. Tenzies Project Intro
1:18
28. Tenzies: Setup
3:26
29. Tenzies: Die components
6:50
30. Tenzies: Generate array of 10 random numbers
3:53
31. Tenzies: Map array to Die components
3:08
32. Tenzies: Roll dice button
4:41
33. Tenzies: Change dice to objects
4:32
34. Tenzies: Styling held dice
3:38
35. Tenzies: Hold dice part 1
5:17
36. Tenzies: Hold dice part 2
3:09
37. Tenzies: Hold dice part 3
4:01
38. Tenzies: End game part 1
2:35
39. Tenzies: End game part 2
4:55
40. Tenzies: End game part 3
4:15
41. Tenzies: New Game
3:12
42. Tenzies: Extra Credit Ideas
1:35
43. Solo Project (PRO) - Quizzical
6:27
44. Check out the class components crash course!
1:06

Advanced React

Level up your React JS skills to a professional level.

Reusability

67 lessons4 hours 59 min

1. Advanced React Intro
4:38
2. Button - props review challenge
4:13
3. Aside - children in HTML
2:12
4. Aside - React Children
1:53
5. Challenge - Button w/ Children
1:38
6. Button - More Complex React Children
5:37
7. Challenge - add onClick event listener
2:52
8. Aside - props spreading
3:24
9. Aside - Destructuring props
3:32
10. Button - size prop
5:16
11. Button - fix className issue
6:55
12. Challenge - Button w/ Variants
4:17
13. Mega Challenge - Overloaded Avatar Component
10:05
14. Menu Component Intro
5:24
15. Prop Drilling
4:53
16. Aside: Compound Components Intro
4:52
17. Compound Components in React - Part 1
3:38
18. Compound Components Quiz
3:48
19. Compound Components in React - Part 2
2:24
20. Compound Components in React - Part 3
5:59
21. Summarize Challenge - Compound Components in React
0:42
22. Prop Drilling Problem #2 - Implicit State
3:46
23. The React.Children API
8:55
24. React.Children shortcomings
6:58
25. Context Intro
2:44
26. createContext() & Context Provider
5:42
27. useContext()
6:32
28. Add context to the Menu component
4:28
29. State + Context
6:30
30. Theme switcher final touches
2:04
31. Menu component final touches
4:11
32. A11y in menu component
6:30
33. Aside - Compound components w/ dot syntax
2:46
34. Headless Toggle component
3:54
35. Toggle - setup
5:14
36. Toggle - Planning
2:28
37. Toggle Context
3:41
38. Toggle.Button
6:39
39. Toggle.On & Toggle.Off
4:39
40. Remove Star component
5:07
41. Use Toggle with Menu component
7:44
42. Composing new components with Toggle
8:17
43. onToggle event listener
6:57
44. Menu onClose event
1:59
45. Intro to Refs
6:34
46. Refs and DOM manipulation
5:12
47. Fix onToggle bug using refs
3:21
48. Fix missing onToggle bug using a noop function
2:12
49. Render Props Part 1
5:05
50. Render Props Part 2
7:51
51. Render Props Part 3
5:36
52. Render Props Part 4 - children as render props
2:11
53. Toggle.Display intro
2:05
54. Toggle.Display
6:01
55. Custom Hooks Intro
1:55
56. Custom Hooks - useEffectOnUpdate
7:57
57. Custom Hooks - useToggle
4:45
58. Custom Hooks - useToggle part 2
3:13
59. Custom Hooks - useToggle part 3
2:57
60. Custom Hooks - useToggle part 4
3:04
61. Custom Hooks - useToggle part 5
3:05
62. Custom Hooks - useToggle part 6
4:56
63. Custom Hooks - useToggle part 7
1:42
64. Custom Hooks - useToggle part 8
3:41
65. Custom Hooks - useToggle part 9
2:22
66. Reusability section recap
1:39
67. Solo Project - Component Library++
5:59
React Router 6

87 lessons6 hours 30 min

1. Introduction to React Router 6
2:54
2. Multi-page vs single-page apps
5:13
3. React Router Setup & BrowserRouter
3:12
4. Routes
2:40
5. BrowserRouter & Routes challenge
1:06
6. Route, path, & element
4:12
7. Quick Re-org
1:01
8. Link
3:59
9. VanLife project bootstrapping
8:03
10. Initial Deploy to Netlify
11:41
11. Mirage JS Server
1:50
12. Challenge: Vans Page - Part 1
2:14
13. Challenge: Vans Page - Part 2
9:06
14. Route Params - part 1
4:12
15. Route Params - part 2
1:46
16. A11y Update - wrapping complex content in a link
5:48
17. Route Params part 3.1 - useParams() & challenge
4:53
18. Route Params part 3.2 - useParams() challenge
7:10
19. Route Params Quiz
4:15
20. Nested Routes Intro
8:52
21. Fixing the Navbar with a Layout Route
4:52
22. Fixing the Navbar with a Layout Route part 2
7:42
23. Bootstrap the Host pages
3:57
24. Nesting the /host routes
3:45
25. Creating the Host Layout
6:27
26. Relative Paths
4:25
27. Index Routes
3:48
28. To nest or not to nest?
5:06
29. Nested Routes Quiz
4:48
30. Add Footer
3:18
31. NavLink
7:12
32. Active Link Styling with NavLink
3:52
33. Active Link Styling with NavLink - part 2
5:12
34. Adding Host Vans Routes
5:11
35. 🔀 Optional Side Quest - Building out the Host Vans List and Detail Pages
3:18
36. Building out the Host Van Detail page
8:54
37. Relative Links
7:01
38. Back to all vans
5:13
39. Add /host/vans/:id Nested Routes
8:06
40. Add the Final Navbar!
6:33
41. Outlet Context
5:30
42. Search Params Intro
7:16
43. useSearchParams
4:03
44. Challenge: Set up search params in VanLife
4:41
45. Filter the array w/ the search param
5:04
46. Challenge: Filter the vans in VanLife
1:41
47. Using Links to add search params
2:51
48. Challenge: Filter the vans with Links
3:12
49. Using the search params setter function
3:31
50. Challenge: Filter the vans with a setter function
2:30
51. Caveats to setting params
1:30
52. Merging search params with Links
6:09
53. Merging search params with the setSearchParams function
5:19
54. Challenge: Conditional rendering practice
4:39
55. Fix remaining absolute paths
1:50
56. Back to all vans
2:12
57. Link state
6:29
58. useLocation
7:59
59. Challenge: conditionally render the back button text
2:47
60. 404 Page
5:48
61. "Happy Path" vs. "Sad Path" (new)
2:32
62. Quick update to our fetching code
2:57
63. Coding the Sad Path - Loading state (new)
3:22
64. Coding the Sad Path - Error handling
5:59
65. Update: Accessibility Addition
1:29
66. Initial Login Form
1:50
67. Note from the future: importing image assets in Vite
2:47
68. Protected Routes Intro (FDCP)
1:48
69. Protected Routes - AuthRequired Layout Route (FDCP)
3:10
70. Protected Routes - Implementing "auth" (FDCP)
2:25
71. Protected Routes - Navigate (FDCP)
5:34
72. VanLife Protected Routes (FDCP)
3:25
73. Protected Routes Quiz
1:39
74. Navigation State (FDCP)
5:22
75. Setup for authentication - happy path (FDCP)
3:31
76. Authentication setup - sad path (FDCP)
7:28
77. Navigate to /host route after login (FDCP)
2:14
78. History Stack and Replace (FDCP)
5:30
79. Challenge - send user to original page
7:33
80. Placeholders are gone! 🎉
2:10
81. Cloud Firestore Setup 🔥
6:04
82. Cloud Firestore Code Setup
4:03
83. Collection ref and getVans() function
6:50
84. Create getVan function
3:53
85. Refactor getHostVans function
3:22
86. Final loose ends
1:34
87. Outro
3:09

Getting hired

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

JavaScript Interview Challenges

61 lessons2 hours 9 min

1. Technical Interview Challenges - Intro
4:58
2. Challenge - Panic Function
0:35
3. Solution - Panic Function
1:19
4. Challenge - Shh... Whispering Function
0:40
5. Solution - Shh... Whisper Function
2:13
6. Challenge - Alternating Caps
0:53
7. Solution - Alternating Caps
2:06
8. Challenge - toTitleCase()
0:53
9. Solution - toTitleCase()
2:09
10. Challenge - Definitely Not FizzBuzz
1:26
11. Solution - Definitely Not FizzBuzz
4:28
12. Challenge - Emojify!
2:37
13. Solution - Emojify!
5:28
14. Challenge: Is it an Anagram?
1:19
15. Solution - Is It an Anagram?
3:14
16. Challenge - Decode an Alien Message
1:15
17. Solution - Decode an Alien Message
3:34
18. Challenge - Palindromes
1:15
19. Solution - Palindromes
2:48
20. Challenge - Save Grandpa's Password
0:51
21. Solution - Save Grandpa's Password
3:22
22. Challenge - Frequency of Letters in Your Name
0:50
23. Solution - Frequency of Letters in Your Name
3:11
24. Challenge: Chef Mario's Recipe Book
0:43
25. Solution Pt 1: Chef Mario's Recipe Book
2:29
26. Solution Pt 2: Chef Mario's Recipe Book
3:39
27. Challenge - Pumpkin's Prizes
0:56
28. Solution - Pumpkin's Prizes
2:59
29. Challenge - Count the Scrimba Students
0:54
30. Solution - Count the Scrimba Students
1:48
31. Challenge - Pizza Night?
0:40
32. Solution - Pizza Night?
3:33
33. Challenge - Totally Private Data Farm
1:26
34. Solution - Totally Private Data Farm
2:17
35. Challenge - Find Free Podcasts
0:50
36. Solution - Find Free Podcasts
2:00
37. Challenge - Candy Sale
0:36
38. Solution - Candy Sale
1:52
39. Challenge - Shopping Cart
0:59
40. Solution - Shopping Cart
2:51
41. Challenge - Total Savory Items
0:41
42. Solution - Total Savory Items
1:58
43. Challenge - Holiday Gift Shopping
0:52
44. Solution - Holiday Gift Shopping
2:50
45. Challenge - Collect Unique Genre Tags
0:50
46. Solution Pt 1: Collect Unique Genre Tags
3:50
47. Solution Pt 2: Collect Unique Genre Tags
3:23
48. Challenge - Welcome Aboard Scrimba Airlines
0:58
49. Solution - Welcome Aboard Scrimba Airlines
3:47
50. Challenge - Popularity Contest
0:49
51. Solution - Popularity Contest
2:38
52. Challenge - Night at the Scrimbies
0:52
53. Solution - Night at the Scrimbies
4:37
54. Challenge - Save the Weekend
1:36
55. Solution - Save the Weekend
3:08
56. Challenge - Find Anagrams in an Array
2:15
57. Solution - Find Anagrams in an Array
3:28
58. Challenge - Emoji Flower Bed
0:43
59. Solution - Emoji Flower Bed
1:53
60. Challenge - Emoji Slot Machine
1:22
61. Solution - Emoji Slot Machine
4:55

You'll learn

HTML

CSS

JavaScript

React

APIs

Web architecture

Responsive design

Web design

UI Design

Git

The job search

Getting hired

Coding interviews

You'll build

screenshot
Google Clone

Replicate the visual layout and design of the Google search engine page with HTML and CSS.

screenshot
Space Exploration Site

Delight users with a visually captivating site that transports them into the cosmos.

screenshot
Shopping List Mobile App

Build your first mobile app using HTML, CSS and JavaScript + Firebase.

screenshot
Coworking Site

Create a stylish and professional website that showcases a modern coworking space.

screenshot
'Twimba' - Twitter Clone

Replicate the core features of the Twitter timeline, including displaying posts, replying, liking, and retweeting.

screenshot
AirBnB Experiences Clone

Recreate the user interface of AirBnB Experiences. Allow users to explore unique local activities and immersive experiences.

screenshot
'Oldagram' - Instagram Clone

Bring to life the spirit of Instagram for classical artists such as Van Gogh, and provide them a platform for sharing and showcasing their artwork.

screenshot
Tinder for Dogs

Allow dog owners to browse potential playmates for their furry companions through a user-friendly interface.

Want more support? Checkout the bootcamp

If you think you'll need more support with the pathway, consider enrolling in the Scrimba Bootcamp. It provides valuable accountability, mentorship, code reviews, weekly group sessions, collaborative solo projects and more to help you succeed!

Visit the bootcamp

Need multiple seats for your product team or company?

If you’re looking to buy group subscriptions for your company, we offer custom packages to suit any team size. Just complete the form and we will get back to you within 24 hours.

Complete form
Profile image of teacher Per Harald Borgen
Profile image of teacher undefined
Profile image of teacher Kevin Powell
Profile image of teacher undefined
Profile image of teacher Gary Simon
Profile image of teacher Bob Ziroll
Profile image of teacher undefined
Profile image of teacher Cassidy Williams
Profile image of teacher Leanne from Scrimba

Meet your teachers

The Frontend Developer Career Path combines the best talent in each domain. For every single subject we handpick tutors to craft your curriculum.

Gary Simon will teach you UI design, Kevin Powell gets you started with CSS, and Bob Ziroll and Cassidy Williams will be your React instructors.

Why this course rocks

This career path will turn you into a hireable frontend developer as fast as possible. By the end of it, you will have learned enough HTML, CSS, JavaScript, and React to get your first job as a frontend web developer.

It will also prepare you with strategies to get through the interview process, so that you increase the chance of landing your dream job.

The teachers of this path are some of the most popular online instructors these days, like Kevin Powell, Gary Simon, Cassidy Williams, and Dylan Israel. They’re all people who have gone up the hard road of becoming professional developers, so they know exactly what it takes.

Throughout the path, you’ll build more than a dozen projects, and solve more than 100 interactive coding challenges. In total, it clocks more than 70 hours. It’s fully self-paced, and you can choose whether you’d like to do it part-time or full-time.

F to the A oracle to the Q
What topics are covered in the Career Path?

The Career Path aims to teach you everything you need to know to be hired as a Frontend developer. That includes HTML, CSS, JavaScript, React, UI Design, career advice and more! Check out the syllabus above to see everything the Career Path has to offer.

Do I have to study full-time?

The Career Path, and indeed all Scrimba courses, is completely self-paced, so you can study full-time or part-time, alongside your other commitments. That said, we recommend that you study as often as possible to give yourself the best chance of progressing. Every day is great, if you can manage it.

Where can I go for help?

At Scrimba, we believe that learning to code should be a community activity, which is why we've set up our Discord server - a place where you can meet fellow coders, share your code problems and solutions, and network. Just go to this link: https://scrimba.com/discord to sign up.

Do I have to study the Career Path in the given order?

Although we have set up the Career Path to allow you to go from zero knowledge to hireable developer, you don’t have to follow the course in order we have given. You might choose to skip ahead to modules you need to know about more urgently, or go back and redo parts from time to time. It’s your Career Path, so you can study however you like.

I already know the content of a module, can I skip it?

You are free to skip modules that you already know, however we recommend that you try to complete all the challenges to test your knowledge before doing so. Please note that the certificate can only be issued when all the screencasts have been watched.

What do I get when I complete the Career Path?

When you complete the Career Path, you will automatically unlock the Frontend Developer Career Path certificate. You are also eligible for the ‘Career Path Graduate’ Discord badge. Just send a message to one of the team on Discord or email help@scrimba.com to claim this.

Will the content of the Career Path be updated?

Yes, we are always open to feedback and constantly looking for ways to improve our courses. If you have any comments, please reach out to us on Discord or email help@scrimba.com.

I completed the course and unlocked my certificate, but the Career Path has since been updated and my progress is no longer 100%.

If you have already completed the Career Path, we can fix up your progress so it shows 100% again. Just email help@scrimba.com.

I have a question which isn’t covered here.

Just drop us a message on our Discord server (https://scrimba.com/discord) or email us at help@scrimba.com. We’d be happy to help.