The Frontend Developer Career Path

Unlock CourseGet started!

Join 4805 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!Black Friday 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.

Learn Git

Git is a critical to know when working in a team. This module will get you up to speed.

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
This course introduction video will give some of my background and a preview of what you'll be learning throughout this course.
6:40
3. What we'll be building
Speed, maintainability, hireability, and more.
0:58
4. Why use React?
This course introduction video will give some of my background and a preview of what you'll be learning throughout this course.
2:56
5. ReactDOM & JSX
Learn to spin up the most basic React app possible using ReactDOM and JSX.
6:49
6. ReactDOM & JSX Practice
Your turn! Create the boilerplate React code needed to render a few items in a list.
4:11
7. React Functional Components
Learn how to create your first React component using functional components.
3:52
8. React Functional Components Practice
Build a functional component that returns some UI with details about yourself.
5:05
9. OUT NOW: The React Bootcamp 🔥
A quick look at the advanced React Bootcamp on Scrimba.
1:53
10. Move Components into Separate Files
Learn to use import/exports in ES6 to separate our components into their own files.
5:20
11. React Parent/Child Components
Learn about the hirearchy of React components, with parent, children, and sibling components.
8:03
12. React Parent/Child Component Practice
Your turn! This is a chance to practice the parent/child component hierarchy.
4:53
13. React Todo App - Phase 1
We're starting a new todo app from scratch!
2:31
14. Styling React with CSS Classes
Learn how to add CSS style to your React applications using the className prop.
5:00
15. Some Caveats
Let's have a look at how I personally prefer to write my React code.
2:13
16. JSX to JavaScript and Back
Learn how to escape out of JSX and into JavaScript.
3:53
17. React Inline Styles with the Style Property
Learn how to use dynamic data and inline styles to make an ap that can change its own style.
7:05
18. React Todo App - Phase 2
Let's apply our parent/child components and styling skills to the test by working on our todo list.
3:17
19. React Props Part 1: Understanding the Concept
A quick introduction to the concept of props in React.
2:08
20. React Props Part 2: Reusable Components
How can we break the YouTube homepage down into reusable components?
2:28
21. React Props
Learn the primary way to pass data from a parent component down to a child component.
12:05
22. React Props and Styling Practice
Create 5 Joke components, pass data down to each one, and add some styling to them.
10:41
23. Mapping Components in React
With the JavaScript array method .map(), we can easily create a new array of components to display.
7:57
24. Mapping Components Practice
Your turn! Try to display a list of products onto the page using the .map() method.
6:25
25. React Todo App: Phase 3
Let's use what we learned about mapping and props to improve our todo app.
4:28
26. Class-based Components
Learn about class-based components and when/why you'd want to use them.
5:10
27. Class-based Components Practice
Take some time to practice converting functional components into class components.
3:34
28. React State
Learn about state, which lets component be in charge of maintaining their own data.
4:51
29. React State Practice
Practice your React state skills by debugging a small app.
3:32
30. React State Practice 2
Given the importance of state, here's another chance to practice it.
4:09
31. React Todo App: Phase 4
Let's enhance our todo list app with React state.
2:01
32. Handling Events in React
Handling events in React is fairly simple, and looks very similar to the way it's done in regular HTML.
3:42
33. React Todo App: Phase 5
Let's make another small addition to our todo app.
1:13
34. React setState: Changing the State
Learn how to change a component's state using the this.setState method.
12:15
35. React Todo App: Phase 6
Let's implementing the logic we need to change the completed state of the todo item we click.
7:40
36. React Todo App: Phase 6.1 😑🙄
A quick lesson about how to not modify the state object directly.
2:42
37. React Lifecycle Methods Part 1
Lifecycle methods lets you trigger actions when a component undergoes a specific part of its lifecycle.
9:25
38. React Lifecycle Methods Part 2
Let's take a look at a few more lifecycle methods.
3:18
39. Lifecycle Methods Part 3 - componentDidUpdate
8:34
40. React Conditional Render
Let's use conditional rendering to pop up a loading screen while something else is happening in the background.
11:14
41. React Conditional Render Part 2
Learn to use the conditional AND (&&) to simply render something or nothing at all.
2:50
42. React Conditional Render Practice
Your chance to practice conditional rendering as well as numerous other concepts.
8:32
43. React Todo App: Phase 7
We finish off our todo app by adding some conditional styling to the completed items.
2:30
44. API Update: Please watch before proceeding
A quick note on the API we'll be using in the coming casts.
1:26
45. Fetching data from an API with React
Learn how to get data from API's in React by using fetch in the componentDidMount lifecycle method.
10:55
46. React Forms Part 1
Learn how you can build forms in an easy and reusable way in React.
12:06
47. React Form Part 2
Learn how to use some of the other form elements in React, like text areas, checkboxes, radio buttons, and select boxes.
15:21
48. React Form Practice
Your turn! Build a travel form that gathers your personal and trip information.
20:13
49. React Container & Component Architecture
Learn to use a container/component approach to splitting apart the business logic from the display logic.
11:20
50. React Meme Generator Capstone Project
Let's build a Meme Generator app using React JS and everything we've learned about the library.
20:11
51. Writing Modern React Apps
A quick look at moderns React concepts, like Hooks, Context, HOCs, render props and more.
6:03
52. Hooks Intro
Learn about Hooks, which lets you hook into the state and lifecycle methods of functional components.
1:44
53. useState() Part 1 - Creating State
An intro to useState, which is our application's way of managing state.
7:18
54. useState() Part 2 - Changing State
Convert a class component to a functional one using hooks, and also learn to change the state using useState().
7:45
55. useEffect() Part 1
The useEffect() hook allows us to produce side effects in our component.
8:01
56. useEffect() Part 2
Learn how to clean up any side-effects you might have introduced with the useEffect() hook.
10:16
57. React Project Ideas for Practicing
The best way to learn React is to build lots of apps, so here are some project ideas for you!
0:43
58. Conclusion - React Tutorial
Congrats! You've made it to the end. Let's recap what you've learned.
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. https://scrimba.com

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.

Join our #javascriptmasGo Pro!Sign me up!
Built with Imba