The Frontend Developer Career Path

Unlock Course

Join 4148 other students

Sign in to get
Access to 30+ free courses
New courses added monthly
Weekly coding challenges
Huge discord community
Exclusive chat access
Unlock Course
Subscribe to access!62% covid discount
Get access to this course and ALL other Scrimba courses at great value. Our 30-day money back guarantee makes this risk free for you.
Career Path includes
75+ hours of content
100s of coding challenges
Exclusive Study Group access
HTML, CSS, JS & React
Getting Hired section
30-day money-back guarantee
Subscribe now!62% covid discountSubscribe to access with 62% covid discount.

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.

HTML & CSS 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.

CSS & JavaScript fundamentals

In this module, you'll level up your CSS and JavaScript skills, and build a super cool game.

Responsive design

his 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 lessons - 4 hours
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 out 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
Stepping up our style
38 lessons - 2 hours
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

Next-level JavaScript

The web is built on APIs, so you'll need to know how to handle them with JavaScript. This module contains two real-world projects, and a ton of challenges.

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.

Learn React
58 lessons - 5 hours
1. React Basics - Module Intro
1:26
2. Course Introduction & Learning Philosophy
6:40
3. What we'll be building
0:58
4. Why use React?
2:56
5. ReactDOM & JSX
6:49
6. ReactDOM & JSX Practice
4:11
7. React Functional Components
3:52
8. React Functional Components Practice
5:05
9. OUT NOW: The React Bootcamp 🔥
1:53
10. Move Components into Separate Files
5:20
11. React Parent/Child Components
8:03
12. React Parent/Child Component Practice
4:53
13. React Todo App - Phase 1
2:31
14. Styling React with CSS Classes
5:00
15. Some Caveats
2:13
16. JSX to JavaScript and Back
3:53
17. React Inline Styles with the Style Property
7:05
18. React Todo App - Phase 2
3:17
19. React Props Part 1: Understanding the Concept
2:08
20. React Props Part 2: Reusable Components
2:28
21. React Props
12:05
22. React Props and Styling Practice
10:41
23. Mapping Components in React
7:57
24. Mapping Components Practice
6:25
25. React Todo App: Phase 3
4:28
26. Class-based Components
5:10
27. Class-based Components Practice
3:34
28. React State
4:51
29. React State Practice
3:32
30. React State Practice 2
4:09
31. React Todo App: Phase 4
2:01
32. Handling Events in React
3:42
33. React Todo App: Phase 5
1:13
34. React setState: Changing the State
12:15
35. React Todo App: Phase 6
7:40
36. React Todo App: Phase 6.1 😑🙄
2:42
37. React Lifecycle Methods Part 1
9:25
38. React Lifecycle Methods Part 2
3:18
39. Lifecycle Methods Part 3 - componentDidUpdate
8:34
40. React Conditional Render
11:14
41. React Conditional Render Part 2
2:50
42. React Conditional Render Practice
8:32
43. React Todo App: Phase 7
2:30
44. API Update: Please watch before proceeding
1:26
45. Fetching data from an API with React
10:55
46. React Forms Part 1
12:06
47. React Form Part 2
15:21
48. React Form Practice
20:13
49. React Container & Component Architecture
11:20
50. React Meme Generator Capstone Project
20:11
51. Writing Modern React Apps
6:03
52. Hooks Intro
1:44
53. useState() Part 1 - Creating State
7:18
54. useState() Part 2 - Changing State
7:45
55. useEffect() Part 1
8:01
56. useEffect() Part 2
10:16
57. React Project Ideas for Practicing
0:43
58. Conclusion - React Tutorial
2:50

Advanced React

Level up your React JS skills to a professional level.

Building Reusable React
32 lessons - 3 hours
1. Course Introduction
4:58
2. Fundamentals Part 1: Rendering and Props
20:38
3. Fundamentals Part 2: Custom Events and Props
7:52
4. Fundamentals Exercise: Badge Component
4:17
5. Controlled Components and Refs Part 1: Building an interactive form
3:48
6. Controlled Components and Refs Part 2: What does "controlled" mean?
10:15
7. Controlled Components and Refs Exercise 1: Character Counter Input
6:16
8. Controlled Components and Refs Part 3: State in Class vs Function components
7:14
9. Controlled Components and Refs Part 4: Implementing useState
13:12
10. Controlled Components and Refs Part 5: The useRef Hook
4:24
11. Controlled Components and Refs Part 6: Updating Refs with Side Effects
7:14
12. Controlled Components and Refs Part 7: Forwarding Refs
3:40
13. Controlled Components and Refs Exercise 2: Toggleable Form
15:43
14. Reducers Part 1: Why are they a part of React?
5:04
15. Reducers Part 2: How reducers work
6:40
16. Reducers Exercise 1: Expanding our reducer function
3:10
17. Reducers Part 3: The useReducer Hook
5:49
18. Reducers Part 4: useReducer vs useState
3:56
19. Reducers Part 5: Custom Hooks
4:29
20. Reducers Exercise 2: Character Sheet Application
17:12
21. Reducers Part 6: A Promise-based State Machine
15:03
22. Compound Components Part 1: A Single Data-Entry Point Component
3:45
23. Compound Components Part 2: Reordering Elements
3:32
24. Compound Components Exercise 1: Adding a disabled Property
5:10
25. Compound Components Part 3: Too many props!
2:35
26. Compound Components Part 4: What is a Compound Component?
3:01
27. Compound Components Part 5: Replacing Props with Compound Components
6:11
28. Compound Components Part 6: Sharing State with the Context API
7:36
29. Compound Components Exercise 2: Adding More Context
5:05
30. Compound Components Exercise 3: A Date Picker Compound Component
5:11
31. Course Conclusion
1:47
32. You've completed Module 12! 🥳
1:00

Building a Netflix clone

Learn how to build a Netflix clone using React

Netflix in React JS
57 lessons - 6 hours
1. Building a Netflix clone - Module Intro
2:10
2. Welcome to Building Netflix!
6:51
3. Technologies Overview
4:08
4. Compound Components
2:29
5. Application Architecture
5:51
6. Application Structure & Dependencies
9:46
7. Building the Jumbotron Component
12:09
8. Styling the Jumbotron Component
14:24
9. Housing our Jumbotron within a Container
15:32
10. Component Library Tree Shaking 🌳
8:01
11. Implementing Global Styles With Styled Components
5:20
12. Building the Footer Component
11:35
13. Styling the Footer Component
5:12
14. Building the Accordion Component
12:08
15. Styling the Accordion Component
8:43
16. Accordion Context & State
7:53
17. Building the Opt-Form Component
5:39
18. Styling the Opt-Form Component
7:52
19. Adding a Routes Constant File
1:30
20. Building out the Header Component
12:47
21. Styling the Header Component
6:37
22. Building out the Feature Component
7:15
23. Styling the Feature Component
3:15
24. Hooking our Application up to Firebase
4:22
25. Connecting our Application to Firebase
4:28
26. Building the Form Component & Sign In Page
12:10
27. Styling the Form Component & Sign In Page
9:56
28. Managing Form Validation on the Sign In Page
2:47
29. Adding the Footer to the Sign In Page
1:40
30. Creating the Sign Up Page
8:27
31. Architecting the Browse Page
8:19
32. Building out the Profile Component & Container
11:44
33. Styling the Profile Component
3:24
34. Firebase Auth Setup
1:40
35. Adding Firebase Sign Up Functionality
6:32
36. Adding Firebase Sign In Functionality
4:19
37. Adding our Header to the Browse Container
6:48
38. Adding a Feature to Our Header Component
5:27
39. Adding a Search Box to Our Header Component
6:26
40. Adding a Dropdown (Profiles) to Our Header Component
8:03
41. Profiles to Browse Page Loading Spinner
9:23
42. Hydrating Our Firestore with Data
1:48
43. Creating a Custom Firebase useContent Hook
5:00
44. Creating a Data SelectionMap Utility
4:09
45. Architecture of The Card Component
3:55
46. Adding the Card Component Skelton to Our Container
6:43
47. Building out the Card Component
13:27
48. Data Driven Card Component with Styling
16:59
49. Implementing Live Search Using Fuse.js
5:28
50. Building out the Player Component
9:29
51. Styling the Player Component
6:10
52. Creating a Custom Auth Listener Hook
6:22
53. Implementing our Custom Auth Listener Hook
1:10
54. Modifying Our App Routes to Be Protected
8:24
55. React State Update on an Unmounted Component
4:23
56. Course Conclusion
5:36
57. You have completed Module 13! 🥳
1:00

Getting hired

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

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

Pac-Man

Build the legendary game for the old age of computers.

screenshot

Joke generator

Learn geeky programming jokes with this epic app.

screenshot

Jeopardy

Build Jeopardy with CSS Grid and an API.

screenshot

A personal portfolio

A beautiful portfolio to show off to potential employers.

screenshot

The beer explorer

Build a beer website with the Punk API.

screenshot

Netflix clone

Build a full-blown Netflix clone in React JS.

The course creator

Meet your teacher

Per Harald Borgen

Co-founder of Scrimba - the next-generation platform for learning to code.

Follow me on twitter

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 of full-time.

Go Pro!Sign me up!
Built with Imba