The Frontend Developer Career Path
Unlock CourseGet started!
Join 6772 other students
Sign in to get
Access to 30+ free courses
New courses added monthly
Weekly coding challenge
Join a friendly community
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.
▼
Your own personalized web app
▼
Join the community
HTML & CSS basics
Learn the very basics of HTML and CSS. Start creating layouts, and style them how you want.
▼
HTML Crash Course (updated)
1. Welcome to Module 2
2. Introduction to the Crash Course
3. Getting Started with HTML
4. Let's make some changes
5. Introduction to HTML
6. Document Structure
7. Document Structure continued
8. Creating a new page
9. Inline Elements
10. Nesting
11. Attributes and Links
12. Images
13. Lists
14. 11 - It's your turn!
▼
CSS Crash Course (updated)
1. Introduction to CSS - Syntax basics
2. Where does CSS live?
3. CSS Syntax continued
4. Linking to an external CSS file
5. Inheritance
6. The cascade
7. The box model - width and height
8. The box model - margin
9. The box model - Padding
10. The box model - borders
11. The box model - recap
12. Organizing our content with semantic HTML
13. Classes and IDs
14. Spans
15. Divs
16. Centering content
17. Creating columns
18. Background Images
19. Relative file paths
20. It's your turn!
▼
HTML & CSS Challenges
1. Introduction
2. Challenge 1: Starting off with a blank file
3. Solution 1: Starting off with a blank file
4. Challenge 2: Adding lists to a page (updated)
5. Solution 2: Adding lists to a page
6. Challenge 3: Fix the image
7. Solution 3: Fix the image
8. Challenge 4: Adding some style to our page
9. Solution 4: Adding some style to our page
10. Challenge 5: Styling the title of our page
11. Solution 5: Styling the title of our page
12. Challenge 6: Styling the subheadings
13. Solution 6: Styling the subheadings
14. Challenge 7: Some extra style
15. Solution 7: Some extra style
16. Challenge 8: Containing our layout
17. Solution 8: Containing our layout
18. Challenge 9: Creating columns
19. Solution 9: Creating columns
20. Challenge 10: Styling the sidebar
21. Solution 10: Styling the sidebar
22. Bonus Challenge
Making websites interactive
Combine your newly acquired HTML & CSS skills with Javascript. This will allow you to create interactive websites.
▼
Your first interactive website
▼
Intro to Javascript - updated
▼
Intro to loops
1. Introduction
2. Explaining let, const and var
3. Challenge: Using let and const in a real life example
4. Explaining for loops
5. For loops with arrays
6. For loops with if statements
7. Challenge: Using for loops we colour a game board
8. Loops and arrays part 1
9. Loops and arrays part 2
10. Challenge: Loops and arrays
11. Explaining nested loops
12. Challenge: Final challenge
▼
Intro to functions and methods
1. Introduction
2. Functions part 1
3. Functions part 1 - mini challenge
4. Functions part 2
5. Functions part 2 - mini challenge
6. Explaining Math.random() and Math.floor()
7. Challenge: We use Math.random() and Math.floor() to create a random Quote Generator
8. Explaining slice()
9. Explaining push()
10. Explaining unshift()
11. Challenge: using push() and unshift()
12. Explaining pop()
13. Explaining shift()
14. Challenge: using pop() and shift()
15. Whats next?
▼
Intro to the DOM
1. Introduction to the DOM
2. What is the DOM?
3. Selecting Elements - getElementById
4. Selecting Multiple Elements
5. querySelector and querySelectorAll
6. Modifying an element's text
7. Modifying Styles
8. Modifying Styles - className and classList
9. Modifying elements - value
10. Creating elements in JS
11. Creating elements in JS - innerHTML
12. Creating elements in JS - for loops + createElement
13. Event Listeners
14. Self study - get the value from an input element
▼
Your personality in emojis
1. You in Emojis
2. My Emojis - log the emojis
3. My Emojis - grabbing the emojiContainer
4. My Emojis - Rendering the Emojis
5. My Emojis - adding the input and button
6. My Emojis - Push and Clear
7. My Emojis - Render the New Emoji to the Screen
8. My Emojis - Unshift an Emoji to the Array
9. My Emojis - Pop and Shift
10. My Emojis - Share It!
▼
Build a diary app
1. Welcome to the course!
2. Add input field for entries
3. Style the h1 title and entries form
4. Style the submit button
5. Remove css outline on input field focus
6. Prevent page reload on submit
7. Accessing the user's input (1) [debugging]
8. Accessing the user's input (2) [debugging]
9. Adding the user's input to the DOM
10. Style the entries section
11. Clear entry textbox when submit button is clicked
12. Hide user entry by default
13. Add navigation buttons for each user entry
14. Make button count dynamic
15. Display an entry when its navigation button is clicked
16. Add a little more styling to the entries section
17. Display only one entry at a time (1)
18. Display only one entry at a time (2)
19. Let's wrap up!
20. Congrats on completing Module 3 🎉
CSS & JavaScript fundamentals
In this module, you'll level up your CSS and JavaScript skills, and build a super cool game.
▼
CSS Fundamentals
1. CSS and JavaScript Fundamentals - Module Intro
2. GitHub links for all projects starting files
3. Introduction to the CSS Fundamentals module
4. Margin and Padding - Margins and spacing out text
5. Margin and Padding - Collapsing margins
6. Margin and Padding - Consistency and a new type of selector
7. Inline and Block elements
8. The span element
9. Styling links
10. Practice Time!
11. Inline-block
12. Styling buttons
13. Specificity basics
14. Specificity - two selectors of equal value
15. Compound Selectors
16. Compound selectors and specificity
17. A better way to name our CSS classes
18. The text properties
19. Font-family and font stacks
20. How to use Google fonts
21. Inheritance
22. Working with, overwriting, and applying inheritance
23. Putting it all together
24. Putting it all together - the CSS
25. Solution to the challenge and module wrap up
▼
CSS fundamentals challenges
1. Introduction: Landing Page
2. Solution: Landing Page
3. Introduction: 4 Color Schemes
4. Solution: 4 Color Schemes
5. Introduction: CSS Challenge - Super-Styled Button
6. Solution: CSS Challenge - Super-Styled Button
7. Introduction: CSS Challenge - Proper Spacing
8. Solution: CSS Challenge - Proper Spacing
9. Introduction: CSS Challenge - Restricted Selectors
10. Solution: CSS Challenge - Restricted Selectors
11. Introduction: CSS Challenge - Structuring Blog Post
12. Solution: CSS Challenge - Structuring Blog Post
13. Introduction: CSS Challenge - Invitation Card
14. Solution: CSS Challenge - Invitation Card
15. Introduction: CSS Challenge - Image Collage
16. Solution: CSS Challenge - Image Collage
17. Introduction: CSS Challenge - Add a Blog Post
18. Solution: CSS Challenge - Add a Blog Post
19. Introduction: Transforming Text
20. Solution: Transforming Text
▼
JavaScript Challenges
1. Build a Modal: HTML
2. Build a Modal: Buttons CSS
3. Build a Modal: Modal CSS
4. Build a Modal: Interactive Buttons
5. Build a Modal: Overlay CSS
6. Build a Modal: RGBA Colors
7. Build a Search Bar: Overview
8. Build a Search Bar: Events & toLowerCase()
9. Build a Search Bar: Capturing the user's search query
10. Build a Search Bar: Get all the names from the DOM
11. Build a Search Bar: Looping over all our names!
12. Build a Search Bar: Comparing the search query vs. the DOM names
13. Build a Carousel: Overview
14. Build a Carousel: Base HTML Structure
15. Build a Carousel: Styling the fundamentals of the carousel
16. Build a Carousel: Using translateY to get perfectly aligned buttons
17. Build a Carousel: Grabbing all carousel items and attaching button event listeners
18. Build a Carousel: Moving to the next slide
19. Build a Carousel: Looking at the for of loop
20. Build a Carousel: Hiding non-active slides
21. Build a Carousel: Moving to the previous slide
22. Build a Carousel: Smooth transitions using CSS keyframes
23. Build a Carousel: Make it your own
▼
Build a dice game
1. Challenge: Dice Game - Intro
2. Challenge: Dice Game - Setting up the game state
3. Challenge: Dice Game - Setting up the DOM nodes
4. Challenge: Dice Game - Roll the Dice
5. Challenge: Dice Game - Switching turns
6. Challenge: Dice Game - Displaying the dice number
7. Challenge: Dice Game - Keeping track of the score
8. Challenge: Dice Game - Declare a winner
9. Challenge: Dice Game - Make it DRYer
10. Challenge: Dice Game - Reset game
11. Challenge: Dice Game - Make it your own
▼
Build a Snake Game
1. Introduction: Snake Game
2. Setting up our HTML
3. Adding CSS to our Snake Game
4. Picking out elements using document.querySelector()
5. Adding squares into our grid using JavaScript
6. Drawing the Snake on the grid
7. Using .pop() to remove the tail of our Snake
8. Using .unshift() to add a square to the direction of our Snake
9. Using .setInterval() to move our Snake on a time loop
10. KeyCodes
11. Using .addEventListener() to listen out for key presses
12. Changing our Snake's direction
13. Google Challenge
14. Explaining Modulus
15. Using Modulus in our game
16. A quick lesson in refactoring
17. Generating random numbers
18. Pseudo-coding the Logic of Snake eating an Apple
19. Removing the Apple
20. Growing our Snake using .push()
21. Adding the score using the increment operator
22. The textContent Google Challenge Results
23. Speeding up our Snake
24. Implementing functionality to our Start Button
25. Implementing Restart Logic
26. Restarting our Game Code
27. Wrap up & What's next?
28. You've completed Module 4. Well done! 🙌
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
1. Starting to think responsively
2. CSS Units
3. CSS Units - Percentage
4. Controlling the width of images
5. min-width and max-width
6. CSS Units - The em unit
7. The problem with ems
8. CSS Units - rems
9. Picking which unit to use
10. ems and rems - an example
11. Flexbox refresher and setting up some HTML
12. Basic styles and setting up the columns
13. Adding the background color
14. Setting the column widths
15. Spacing out the columns
16. Controlling the vertical position of flex items
17. Media Query basics
18. Making out layout responsive with flex-direction
19. flex-direction explained
20. Creating a navigation
21. Using flexbox to start styling our navigation
22. Making our navigation look good
23. Adding the underline
24. A more complicated navigation
25. Making the navigation responsive
26. Taking a look at the rest of the project
27. Setting up the structure
28. Featured article structure
29. The home page - HTML for the recent articles
30. home page - html for the aside
31. Starting the CSS for our page
32. Starting the layout - looking at the big picture
33. Starting to think mobile first
34. Styling the featured article
35. Changing the visual order with flexbox
36. Playing with the title's position, and the downsides of negative margins
37. Styling recent articles for large screens
38. Changing image sizes with object-fit
39. Setting up the widgets and talking breakpoints
40. Using a new pseudo-class to wrap-up the homepage
41. Creating the recent posts page
42. Setting up the About Me page
43. Fixing up some loose ends
44. Important Note: The viewport meta tag
45. Module wrap up
▼
Responsive design challenges
1. Introduction: Responsive Boxes
2. Solution: Responsive Boxes
3. Introduction: Fix This Card
4. Solution: Fix This Card
5. Introduction: Responsive Image Collage
6. Solution: Responsive Image Collage
7. Introduction: Blog Posts Page
8. Solution: Blog Posts Page
9. Introduction: Navbar
10. Solution: Navbar
11. Introduction: Responsive Call-To-Action
12. Solution: Responsive Call-To-Action
13. Introduction: CSS Stairs
14. Solution: CSS Stairs
15. Introduction: Fix This Grid
16. Solution: Fix This Grid
17. Introduction: Flashing Boxes
18. Solution: Flashing Boxes
19. Introduction: Responsive Navigation
20. Solution: Responsive Navigation
▼
Stepping up our style
1. It's time to step up our style
2. A look at line-height
3. text-transform: uppercase
4. Making things easier to read with letter-spacing
5. A nice color trick with rgba()
6. background-images
7. Background images and the file path (very important note)
8. Controlling our background images
9. BBQ Splash Page - Project Introduction
10. Writing the HTML for the BBQ splash page
11. Starting to style it up - BBQ Splash Page
12. Adding the background image - BBQ Splash Page
13. Changing the order - BBQ Splash Page
14. Styling the main content area - BBQ Splash page
15. Adding the media query - BBQ Splash Page
16. Setting up the typography for large screens - BBQ Splash Page
17. Starting to set things up for large screens - BBQ Splash Page
18. Viewport units
19. Adding viewport units to the BBQ Splash Page
20. Enter box-sizing: border-box
21. Using flexbox to vertically center the main content - BBQ Splash Page
22. Fixing the intro section on both small and large screens - BBQ Splash Page
23. Dealing with very large screens solution #1
24. Dealing with very big screens solution #2
25. The very basics of forms
26. Form basics - form attributes
27. The basics of styling form
28. Adding the form - BBQ Splash Page
29. Starting to style up the form - BBQ Splash Page
30. Making the inputs look good - BBQ Splash Page
31. CSS Gradients
32. Styling the button - BBQ Splash Page
33. Basic transitions
34. Intro to transforms (and a quick word on performance)
35. We can transition more than :hover
36. Border gradients
37. Blending images, colors, and gradients with background-blend-mode
38. Wrap up
▼
Making the BBQ page interactive
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.
▼
Introduction to ES6+
1. Next-level JavaScript - module intro
2. Template Literals
3. Destructuring objects
4. Destructuring Objects (Challenge)
5. Destructuring Arrays
6. Object Literal
7. Object Literal (Challenge)
8. For of Loop
9. For of Loop (Challenge)
10. Spread Operator
11. Spread Operator (Challenge)
12. Rest Operator
13. Arrow Functions
14. Default Params
15. Default Params (Challenge)
16. includes()
17. includes() (Challenge)
18. Let & Const
19. Import & Export
20. Import & Export (Challenge)
21. padStart() & padEnd()
22. padStart() & padEnd() (Challenge)
23. Classes
24. Classes (Challenge)
25. Trailing Commas
26. Promises
27. Challenge: Promises
28. Introduction: Fetch
29. Challenge: Fetch
30. Async & Await
31. Async & Await ( Challenge )
32. Sets in ES6
▼
JavaScript Challenges
1. Introduction: Array Replace
2. Solution: Array Replace
3. Introduction: Case Insensitive Palindrome
4. Solution: Case Insensitive Palindrome
5. Introduction: Enclose in Brackets
6. Solution: Enclose in Brackets
7. Introduction: Factorial Number
8. Solution: Factorial Number
9. Introduction: First Digit
10. Solution: First Digit
11. Introduction: Largest Number
12. Solution: Largest Number
13. Introduction: Max Multiple
14. Solution: Max Multiple
▼
Build Pac-Man in JavaScript
1. Introduction to Pacman
2. Setting up your HTML and CSS
3. Creating our grid in JavaScript Part 1
4. Creating our grid in JavaScript Part 2
5. for Loops Challenge
6. Adding layouts using if else statements + challenge
7. Working with Indexes and Arrays
8. Moving Pacman with Keys and EventListeners
9. Switch Statements
10. Explaining Modulus
11. Moving Pacman with classList.add() and classList.remove()
12. Implementing statements to move our Pacman
13. Avoiding walls by using classList.contains()
14. Avoiding the ghost-lair using classList.contains()
15. Implementing Pacman's shortcut using indexes
16. Eating Pacdots and displaying the score using innerHTML()
17. Making ghosts using Classes and the Constructor Method
18. Drawing the ghosts using forEach()
19. Storing other variables in our Constructor
20. Passing parameters into functions
21. Using setInterval() to move ghosts at specific speeds
22. Making sure ghosts avoid walls and other ghosts
23. Eating Power Pellets using setTimeout()
24. Styling our scared ghosts
25. Eating scared ghosts
26. Defining a Game Over
27. Defining a Win!
28. Code Refactoring and Tidying
29. You've completed module 6! 🥳
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.
▼
Basics of Web Architecture
▼
Fetch basics
1. Introduction to Fetch
2. Local Files - Basic Text
3. JSON Intro
4. JSON Example
5. Local Files - JSON Data
6. Fetch A Photo From An API
7. Error Handling
8. Intro to Async/Await
9. Fetch Blog Posts using async/await (GET)
10. Error Handling (async/await)
11. Fetch Blog Posts (POST)
12. Fetch Blog Posts (POST) - Exercise
13. Random Jokes Project - Preview
14. Random Jokes Project - HTML
15. Random Jokes Project - CSS
16. Random Jokes Project - JavaScript 1
17. Random Jokes Project - JavaScript Part 2
18. Random Jokes Project - JavaScript Part 3
19. Random Jokes Project - JavaScript Part 4
20. Random Jokes Project - JavaScript Part 5
21. Random Jokes Project - JavaScript Part 6
22. Conclusion
▼
Async JavaScript Challenges
1. Async JavaScript Intro
2. Challenge: Async (promise chaining)
3. Challenge: Async/Await
4. Challenge: Error handling
5. Introduction: Promise
6. Challenge: Promise
7. Challenge: Promise - finally method
8. Challenge: Fulfil all promises
9. Challenge: Fulfil the fastest promise
10. Challenge: Parallel Execution
11. Challenge: Promises Traffic Light
12. Async JavaScript Outro
▼
Fetch advanced
1. Introduction to Advanced Fetch
2. Recap Fetch Basics
3. Submit Form Data
4. Uploading a File Using Fetch
5. Uploading Multiple Files With Fetch
6. Working With Multiple Fetch Requests
7. Project Preview (Beer App)
8. Project Build Part 1 - HTML
9. Project Build Part 2 - CSS Resets & Header
10. Project Build Part 3 - CSS Filter Cards
11. Project Build Part 4 - JavaScript Fetch Exercise 1
12. Project Build Part 5 - JavaScript Fetch Exercise 2
13. Project Build Part 6 - CSS Beer Card Styling
14. Project Build Part 7 - JavaScript Fetch Exercise 3
15. Project Build Part 8 - CSS Beer Card Hover
16. Project Build Part 9 - JavaScript Filter Data
17. Project Build Part 10 - JavaScript Filter Data Exercise
18. Project Build Part 11 - JavaScript Data Pagination
19. Project Build Part 12 - Dealing With Data Inconsistency
20. Fetch Advanced Conclusion
21. You've completed Module 7! 🥳
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.
▼
Taking flexbox to the next level
1. Flexbox + Grid Module Intro
2. Taking flexbox to the next level
3. flex-direction, flex-wrap, and flex-flow
4. justify-content and align-items and their relationship to flex-direction
5. Exploring align-content
6. flex-grow and flex-shrink explained
7. flex-basis
8. The flex shorthand property
9. Aligning individual elements with align-self
10. Margin auto and flexbox
11. Building a card component with flexbox - Introduction
12. Building a card component with flexbox - The markup
13. Building a card component with flexbox - Typography
14. Building a card component with flexbox - Mobile layout
15. Building a card component with flexbox - Large screens part one
16. Building a card component with flexbox - Large screens part two
17. Centering something on the screen with flexbox
18. Module wrap-up
▼
Flexbox & Fetch
▼
CSS Grid: The ultimate layout tool
1. Introduction to CSS Grid
2. Setting up a basic grid
3. Placing items on the grid
4. grid-row and grid-column shorthands
5. Spanning columns
6. Some similarities to flexbox
7. Using grid for our card component
8. The grid-gap property
9. Adding the gap to our card
10. The implicit and explicit grid
11. Exploring grid areas
12. grid-areas and media queries
13. minmax()
14. the fr unit
15. minmax() and the fr unit
16. Putting grid to use - part 1
17. Putting grid to use - part 2
18. repeat()
19. auto-fit and auto-fill
Learn UI Design
In this module, you'll learn how to build apps that both look good and work well.
▼
UI design course
▼
Build A Simple Layout
▼
Full Project Refactoring
▼
Build and deploy your portfolio
1. Introduction
2. Setting things up - HTML
3. The header area - HTML
4. Intro section
5. About me, Work and Footer - HTML
6. Setting up the custom properties and general styles
7. Styling the titles and subtitles
8. Setting up the intro section
9. Styling the services section
10. The About me section
11. The portfolio
12. Adding the social icons with Font Awesome
13. Styling the footer
14. Setting up the navigation styles
15. Creating the hamburger
16. Adding the JS
17. Creating the portfolio item page
18. Customizing your page
19. DigitalOcean Droplets - What they are and how to set one up
20. DigitalOcean Droplets - Uploading files via FTP
21. You've completed Module 9! 🥳
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
1. React Basics - Module Intro
2. Course Introduction & Learning Philosophy
3. What we'll be building
4. Why use React?
5. ReactDOM & JSX
6. ReactDOM & JSX Practice
7. React Functional Components
8. React Functional Components Practice
9. OUT NOW: The React Bootcamp 🔥
10. Move Components into Separate Files
11. React Parent/Child Components
12. React Parent/Child Component Practice
13. React Todo App - Phase 1
14. Styling React with CSS Classes
15. Some Caveats
16. JSX to JavaScript and Back
17. React Inline Styles with the Style Property
18. React Todo App - Phase 2
19. React Props Part 1: Understanding the Concept
20. React Props Part 2: Reusable Components
21. React Props
22. React Props and Styling Practice
23. Mapping Components in React
24. Mapping Components Practice
25. React Todo App: Phase 3
26. Class-based Components
27. Class-based Components Practice
28. React State
29. React State Practice
30. React State Practice 2
31. React Todo App: Phase 4
32. Handling Events in React
33. React Todo App: Phase 5
34. React setState: Changing the State
35. React Todo App: Phase 6
36. React Todo App: Phase 6.1 😑🙄
37. React Lifecycle Methods Part 1
38. React Lifecycle Methods Part 2
39. Lifecycle Methods Part 3 - componentDidUpdate
40. React Conditional Render
41. React Conditional Render Part 2
42. React Conditional Render Practice
43. React Todo App: Phase 7
44. API Update: Please watch before proceeding
45. Fetching data from an API with React
46. React Forms Part 1
47. React Form Part 2
48. React Form Practice
49. React Container & Component Architecture
50. React Meme Generator Capstone Project
51. Writing Modern React Apps
52. Hooks Intro
53. useState() Part 1 - Creating State
54. useState() Part 2 - Changing State
55. useEffect() Part 1
56. useEffect() Part 2
57. React Project Ideas for Practicing
58. Conclusion - React Tutorial
▼
Build a React Movie Search App
1. Course Introduction
2. How To Get Your Movie DB API Key
3. Add Base Styles to Our App
4. Create Your First Component
5. Style the Search Movies Component
6. Create the Search Movies Function
7. Manage State with React useState Hook
8. Display Movie Information
9. Style the Movie Cards
10. Create the Movie Card Component (Challenge)
11. Wrap Up
12. You've completed Module 11! 🥳
Advanced React
Level up your React JS skills to a professional level.
▼
Reusability
1. Advanced React - Module Intro
2. Code Reuse in React
3. React Children
4. Challenge: React Children
5. Higher Order Components (HOCs) Part 1
6. Higher Order Components (HOCs) Part 2
7. Challenge: Higher Order Components (HOCs)
8. Higher Order Components (HOCs) Part 3
9. Render Props Part 1
10. Render Props Part 2
11. Render Props Part 3
12. IMPORTANT: Please watch before continuing the course
13. Challenge: Render Props
14. React's Tree Rendering 🌳
▼
Performance
▼
React Context
▼
React Hooks
1. Hooks Intro
2. useState() Part 1 - Creating State
3. useState() Part 2 - Changing State
4. useState Part 3 - Changing More Complex State
5. useEffect() Part 1
6. useEffect() Part 2
7. Speed Typing Game Intro
8. Speed Typing Game Part 1
9. Speed Typing Game Part 2
10. Speed Typing Game Part 3
11. Speed Typing Game Part 4
12. Speed Typing Game Part 5
13. Speed Typing Game Part 6
14. useRef
15. Speed Typing Game Part 7
16. useContext()
17. Hooks Practice - refactor themeContext
18. Custom Hooks
19. Custom Hooks practice - refactor toggler
20. Speed Typing Game Part 8
▼
React Router
1. Intro to React Router
2. React Router - BrowserRouter
3. React Router - Link
4. React Router - Switch & Route
5. Challenge: React Router
6. React Router - props passed to routed components
7. NOTE: watch this before proceeding
8. React Router Nested Routes
9. React Router useParams
10. React Router useRouteMatch
11. React Router useHistory
12. React Router useLocation
13. React Router - Redirect
14. Challenge: React Router Practice Part 1
15. Challenge: React Router Practice Part 2
▼
Capstone Project
1. What we're building
2. Update: Please watch before proceeding
3. React Router Setup
4. Context Setup
5. Context State
6. Fetch Photos
7. Map Photos
8. Track Hover State
9. Display Icons on Hover
10. Toggle isFavorite
11. Display Favorites
12. Image propTypes
13. Add Image to Cart
14. Indicate When Image is Already in Cart
15. Remove From Cart
16. Update Header Cart Icon
17. Cart Page Setup
18. Remove Items from Cart Page
19. Calculate Total Cost
20. Place Order
21. Minor UX Improvements
22. Custom Hover Hook
23. Feedback - Capstone Project
▼
Building Reusable React
1. Course Introduction
2. Fundamentals Part 1: Rendering and Props
3. Fundamentals Part 2: Custom Events and Props
4. Fundamentals Exercise: Badge Component
5. Controlled Components and Refs Part 1: Building an interactive form
6. Controlled Components and Refs Part 2: What does "controlled" mean?
7. Controlled Components and Refs Exercise 1: Character Counter Input
8. Controlled Components and Refs Part 3: State in Class vs Function components
9. Controlled Components and Refs Part 4: Implementing useState
10. Controlled Components and Refs Part 5: The useRef Hook
11. Controlled Components and Refs Part 6: Updating Refs with Side Effects
12. Controlled Components and Refs Part 7: Forwarding Refs
13. Controlled Components and Refs Exercise 2: Toggleable Form
14. Reducers Part 1: Why are they a part of React?
15. Reducers Part 2: How reducers work
16. Reducers Exercise 1: Expanding our reducer function
17. Reducers Part 3: The useReducer Hook
18. Reducers Part 4: useReducer vs useState
19. Reducers Part 5: Custom Hooks
20. Reducers Exercise 2: Character Sheet Application
21. Reducers Part 6: A Promise-based State Machine
22. Compound Components Part 1: A Single Data-Entry Point Component
23. Compound Components Part 2: Reordering Elements
24. Compound Components Exercise 1: Adding a disabled Property
25. Compound Components Part 3: Too many props!
26. Compound Components Part 4: What is a Compound Component?
27. Compound Components Part 5: Replacing Props with Compound Components
28. Compound Components Part 6: Sharing State with the Context API
29. Compound Components Exercise 2: Adding More Context
30. Compound Components Exercise 3: A Date Picker Compound Component
31. Course Conclusion
32. You've completed Module 12! 🥳
Building a Netflix clone
Learn how to build a Netflix clone using React
Getting hired
Learn to nail the coding interview, and get your first job.
▼
Frontend job interview tips
1. Course Introduction
2. Falsy Values
3. const vs let vs var
4. Double vs triple equal
5. map() vs filter() vs reduce()
6. undefined vs null
7. Data Types
8. Spread & Rest Operators
9. Destructuring Objects and Arrays
10. Git Fundamentals
11. Agile & Scrum
12. CSS Selectors
13. Responsive Design
14. Number Issues
15. Promises
16. Pass by value vs pass by reference
17. Five questions to be prepared for
18. Five preparation tips
19. Got any questions for me?
20. GitHub tips
21. LinkedIn tips
22. Resume tips
23. Job search strategy
▼
JavaScript interview questions
1. Course intro
2. Introduction: Pangram check function
3. Solution: Pangram check function
4. Introduction: API array methods
5. Solution: API array methods
6. Introduction: Rain language translator
7. Solution: Rain language translator
8. Introduction: Write isogram check function
9. Solution: Write isogram check function
10. Introduction: Write leap year check function
11. Solution: Write leap year check function
12. Introduction: Write run length encoding/decoding function
13. Solution: Write run length encoding/decoding function
14. Introduction: Remove duplicates from array with reduce()
15. Solution: Remove duplicates from array with reduce()
16. Introduction: Implement array map with reduce()
17. Solution: Implement array map with reduce()
18. Introduction: Flatten array with reduce()
19. Solution: Flatten array with reduce()
20. Introduction: Transpose matrix
21. Solution: Transpose matrix
22. Wrap up
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
Pac-Man
Build the legendary game for the old age of computers.
Joke generator
Learn geeky programming jokes with this epic app.
Jeopardy
Build Jeopardy with CSS Grid and an API.
A personal portfolio
A beautiful portfolio to show off to potential employers.
The beer explorer
Build a beer website with the Punk API.
Netflix clone
Build a full-blown Netflix clone in React JS.
Meet your teacher
Per Harald Borgen
Co-founder of Scrimba - the next-generation platform for learning to code. https://scrimba.com
Follow me on twitterWhy 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 
to the Q
to the QWhat 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://discord.gg/hjuEbDE 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://discord.gg/hjuEbDE) or email us at help@scrimba.com. We’d be happy to help.
