The Frontend Developer Career Path
Unlock CourseGet started!
Join 23422 other students
Log in to get
Access to 30+ free courses
Interactive hands-on content
Challenge weeks - code to win!
Join a friendly community
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 13 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.
Getting started
3 lessons 10 min
Your own personalized web app
7 lessons 15 min
Web dev basics
Learn the very basics of HTML and CSS. Start creating layouts, and style them how you want.
Build & deploy your first website
17 lessons1 hour 2 min
1. Module 2 intro - web dev basics
2. HTML tags
3. Write a news article!
4. The <img> tag
5. Nesting
6. Internet superpowers -> Change the BBC news!
7. Interactive elements - button
8. Interactive elements - input tags -> Experiment with input types
9. Let's build Google!
10. Aside: Anchor tags
11. Add an anchor tag to Google.com
12. Proper document structure
13. Aside: Lists
14. Build a Personal Website
15. Deploy your Personal Website
16. Recap
17. Get to know the module channels! 💜
Build a Google.com clone
24 lessons1 hour 16 min
1. Let's learn CSS!
2. Write your first lines of CSS!
3. Write your first lines of CSS! - Solution
4. Let's destroy wikipedia - recording
5. Link to the CSS file
6. Set the width of the elements
7. inline vs block elements
8. Margin top
9. Divs rule the world
10. CSS classes
11. Aside: Learn margins via flags
12. Add space between our elements
13. Aside: centering with margins
14. Centering our content
15. Aside: padding
16. Aside: border and border-radius
17. Aside challenge: style Twitter button
18. Fix the input field
19. Center the button
20. Style the button
21. Why we can't have two block-level buttons
22. Aside: flexbox
23. Centering both buttons with flexbox
24. Google clone recap
Build a digital Business Card
19 lessons 56 min
1. Building your digital business card
2. Fix the image path
3. Add alt attribute
4. Make image smaller
5. Add a border and padding
6. Aside: flexbox child containers
7. Flex item containers
8. Add a utility class
9. Justify the items
10. Center the card
11. Aside: inheritance
12. Center the text via inheritance
13. Add colors
14. Web-safe fonts
15. Aside: margin/padding shorthand
16. Use the margin&padding shorthands
17. Make it your own!
18. Deploy your Digital Business Card
19. Business Card recap
Build a Space Exploration site
14 lessons 43 min
1. Let's go to space!
2. Add a background image from unsplash
3. Center elements and style button
4. Add a Google Font
5. @font-face
6. Aside: spans
7. Add an underline using a span
8. Use an ID for the logo
9. Replace the jpg with a webp
10. Choose a color palette from an image
11. Add the terms & conditions section
12. Aside: text shadow
13. Improving the readability with text shadows
14. Space Exploration recap
Build a Birthday GIFt Site
20 lessons1 hour 2 min
1. Let's build a Birthday GIFt site!
2. Add basic header styling
3. Set the colors
4. Add shadow on text
5. We have a problem that flexbox can fix
6. Aside: align-items
7. Aside: flex-direction
8. Turn the header into a flexbox
9. Fix date and age design
10. Create the first gift
11. Replace the img with a div
12. Aside: make elements change on hover
13. Add the hover effect
14. Create the next GIFt
15. Create two more GIFts
16. Create the final GIFt
17. Add the footer
18. Add a background gradient
19. Personalize, deploy and share to Discord
20. GIFt site recap
Solo Project: Hometown Homepage
5 lessons 14 min
Making websites interactive
Combine your newly acquired HTML & CSS skills with Javascript. This will allow you to create interactive websites.
Build a passenger counter app
32 lessons1 hour 21 min
1. Making Websites Interactive - Module Intro - NEW
2. Share your plan in #today-i-will!
3. Let's build a passenger counter app!
4. Setting up our JavaScript file
5. Write your first JavaScript variable
6. Basic mathematical operations
7. Reassigning and incrementing
8. Adding a button
9. The onclick event listener
10. Using functions to write less code
11. Write your first function
12. Write a function that logs the sum
13. Write a function that increments
14. Increment on clicks
15. Display the count
16. The Document Object Model
17. Display the count with innerText
18. Create the save button
19. What is a string?
20. Write your first string variable
21. Log a greeting to the console
22. Strings vs. Numbers
23. Render a welcome message
24. Improve the message with string concatenation
25. Use plus equal for count
26. Create the save feature
27. Debugging online
28. Set the count to 0
29. Personalize and Download Your App
30. Deploy with Netlify
31. Congrats & recap
32. Share your win!
JavaScript challenges - part 1
8 lessons 20 min
Set Up a Local Dev Environment
4 lessons 12 min
Build a Blackjack game
55 lessons2 hours 43 min
1. Let's build a Blackjack game!
2. Live events on Scrimba
3. Add the firstCard, secondCard, and sum
4. If...else conditionals
5. Your first if...else statement
6. if/else...if/else statement
7. The if...else statement for our game
8. Add the hasBlackJack variable
9. Add the isAlive variable
10. Let's practice boolean conditions
11. Add the message variable
12. Link to stylesheet
13. Add basic styling
14. Make the start button work
15. Display the message
16. Display the sum
17. Display the cards
18. New card button
19. Add to the sum when newCard is clicked
20. Rename the startGame function
21. Solving our cards problem with an array
22. Intro to arrays
23. Array indexes
24. Arrays with multiple data types
25. Adding and removing items from arrays
26. Creating the cards array
27. Push a new card to the array
28. Counting in JavaScript
29. Write your first loop
30. For loops and arrays
31. Write your first array-based for loop
32. For loops, arrays, and DOM
33. Use a loop to render cards
34. How can we avoid to hard-code card values?
35. Returning values in functions
36. Use a function to set the card values
37. Generating random numbers with Math.random()
38. Math.random() * 6
39. Flooring the number with Math.floor()
40. Using Math.random() and Math.floor() to create a dice
41. Completing our dice function
42. Make getRandomCard() work
43. Complete getRandomNumber function
44. Assign values in the startGame function
45. Our new card feature is broken
46. The logical AND operator
47. Write your first logical operator
48. The logical OR operator
49. Only trigger newCard() if you're allowed to
50. Object sneak peek
51. Intro to objects
52. Create your first object
53. Use an object to store player data
54. Methods on object
55. Congrats & recap
JavaScript challenges - part 2
9 lessons 25 min
Build a Chrome Extension
55 lessons2 hours 46 min
1. Let's build a Chrome Extension!
2. Add button and input tag
3. Style the button and input tag
4. Make the input button work with onclick
5. Refactor to addEventListener
6. Write your first addEventListener()
7. Your turn to refactor
8. Create the myLeads array and inputEl
9. When to use let and const
10. Push to the myLeads array
11. Push the value from the input field
12. Use a for loop to log out leads
13. Create the unordered list
14. Render the leads in the unordered list
15. How to render <li> elements with innerHTML
16. Write your first innerHTML
17. More innerHTML practice
18. Render the <li> elements with innerHTML
19. Use createElement() and append() instead of innerHTML
20. Improving the performance of our app
21. Create the render function
22. Clear the input field
23. Add the <a> tag
24. Template strings
25. Write your first template string
26. Make the template string even more dynamic
27. Template strings on multiple lines
28. Refactor the app to use a template string
29. Style the list
30. Preparing the deployment
31. Deploying the Chrome Extension
32. What is localStorage?
33. Your first localStorage
34. Storing arrays in localStorage
35. Save the leads to localStorage
36. Get the leads from localStorage
37. Truthy and falsy values
38. Guess the expression - truthy or falsy?
39. Checking localStorage before rendering
40. Style the delete button
41. Make the delete button work
42. How function parameters can improve our code
43. Write your first function parameter
44. Functions with multiple parameters
45. Numbers as function parameters
46. Arguments vs Parameters
47. Arrays as parameters
48. Refactor renderLeads() to use a parameter
49. Create the tabBtn
50. Save the tab url
51. How to get the current tab?
52. Use the Chrome API to get the tab
53. Deploy the final version
54. Congrats & recap
55. Share your pet!
JavaScript challenges - part 3
9 lessons 26 min
Your personality in emojis
11 lessons 30 min
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 - updated
10. My Emojis - Share It!
11. Congrats on completing Module 3
Essential CSS concepts
In this module, you'll level up your CSS skills, and build a neat NFT site.
Build an NFT Site
30 lessons1 hour 52 min
1. Essential CSS Concepts Intro
2. Build an NFT Site Intro
3. Semantic HTML - Header, Main, Section, Footer
4. Set up the CSS basics
5. Aside: Margins - strange behaviour
6. Header
7. The first section - image
8. The first section - text
9. Aside: Hover and active states
10. The first section - links
11. Aside: background full width
12. Content Container
13. CSS organisation new
14. The second section colors
15. A quick word about Flexbox
16. The second section imgs
17. Style the Footer
18. Grouping Selectors
19. Warning: Viewing Problems
20. Aside: Specificity
21. Aside: Compound selectors
22. Aside: Compound selectors and specificity
23. Line-height debug
24. Aside: Buttons/Links
25. Style the buttons individually new
26. Aside: Inline-block
27. space out the buttons
28. Aside: A main class and a modifier class
29. Refactor the buttons
30. Outro
CSS Fundamentals: Challenges
23 lessons1 hour 8 min
1. CSS Fundamentals: Challenges | Introduction
2. CSS Fundamentals: Challenge #1 - Setting up the layout
3. CSS Fundamentals: Solution #1 - Setting up the layout
4. CSS Fundamentals: Challenge #2 - Google fonts
5. CSS Fundamentals: Solution #2 - Google fonts
6. CSS Fundamentals: Challenge #3 - Setting up the typography
7. CSS Fundamentals: Solution #3 - Setting up the typography
8. CSS Fundamentals: Challenge #4 - Making things a little more fancy
9. CSS Fundamentals: Solution #4 - Making things a little more fancy
10. CSS Fundamentals: Challenge #5 - Breathing Room
11. CSS Fundamentals: Solution #5 - Breathing Room
12. CSS Fundamentals: Challenge #6 - Playing with colors
13. CSS Fundamentals: Solution #6 - Playing with colors
14. CSS Fundamentals: Challenge #7 - The finer details
15. CSS Fundamentals: Solution #7 - The finer details
16. CSS Fundamentals: Challenge #8 - Creating buttons
17. CSS Fundamentals: Solution #8 - Creating buttons
18. CSS Fundamentals: Challenge #9 - Fancier headings
19. CSS Fundamentals: Solution #9 - Fancier headings
20. CSS Fundamentals: Challenge #10 - Working with what you have
21. CSS Fundamentals: Solution #10 - Working with what you have
22. Solo Project - Oldagram
23. You've completed Module 4. Well done! 🙌
Build a Coworking Space Site
11 lessons 55 min
Essential JavaScript concepts
In this module, you'll level up your JavaScript skills and build three super-cool apps.
The World's Most Annoying Cookie Consent
32 lessons1 hour 47 min
1. Module 5 intro
2. Cookie Consent Intro
3. Aside: Position Fixed old
4. Position the modal
5. Aside: setTimeout
6. Set the timer
7. Aside: element.style
8. Make the modal reappear
9. Close the modal
10. Aside: Forms
11. Add a form 1
12. Aside: Forms - submitting
13. Aside: Forms - challenge
14. Submit the form
15. Aside: preventDefault
16. preventDefault Challenge
17. Buttons in forms - weird behaviour
18. Add modal message
19. Add modal messages 2
20. Add modal messages 3
21. Aside: FormData
22. Form Data 1
23. Aside: FormData methods
24. Form Data 2
25. Aside: Disabling elements
26. Disable the close button
27. There is no choice 1
28. Aside: Toggle
29. Aside: Classlist Toggle Challenge
30. There is no choice 2
31. Accessibility Issues
32. Recap
Pumpkin's Purrfect Meme Picker
36 lessons2 hours 37 min
1. Intro
2. What a horrible for loop
3. Aside: for of
4. Use a for of
5. Nest the for of
6. Render out the emotions 1
7. Render out emotions 2
8. Aside: import the data
9. Import the data
10. Aside: Radio Inputs
11. Render the radios inputs
12. Aside: .includes()
13. remove duplicates
14. Aside: e.target
15. Get the id of the clicked option
16. Aside: parentElement
17. Aside: classlist add/remove
18. Add colour to the selected emotion
19. Aside: getElementsByClassName
20. Remove the highlight class
21. Aside: querySelector and why it's useful
22. Connect the button
23. Has an emotion been chosen?
24. Aside: checkbox
25. isGif
26. Aside: filter()
27. Aside: filter() 2
28. Find matches with .filter()
29. Animated GIFs Only
30. Introducing two important functions
31. If there's only one cat...
32. If there's more than one cat...
33. renderCat()
34. Close the modal
35. The order of things
36. Recap
Twimba: Twitter Clone
40 lessons2 hours 36 min
1. Intro
2. Import the data
3. Aside: TextArea
4. Add TextArea
5. Tweet Boilerplate
6. Tweet Boilerplate Challenge
7. Aside: forEach()
8. Use forEach to build the html
9. Render the tweets to the feed
10. Aside: CDN Font Awesome
11. Add some awesome icons
12. Like a tweet part 1: explanation
13. Aside: Data attributes new
14. Aside: Data Attr JS and Challenge
15. Aside: Data Attribute Naming Issues
16. Like a tweet part 2: data attributes
17. Like a tweet part 3: eventListener
18. Like a tweet part 4: handleLikeClick()
19. Like a tweet part 5: find the tweet object
20. Aside: Copying objects and arrays
21. Like a tweet part 6: render the increment
22. Unlike a tweet
23. Flip a boolean
24. Retweet a tweet
25. Aside: Conditionally render CSS class
26. Color the icons
27. Replies 1: get uuids of tweets with replies
28. Replies 2: HTML string for replies and add to parent div
29. Replies 3: toggle hidden
30. Refactor the tweet btn
31. Aside: UUID
32. Build the new Tweet object
33. Render a new tweet
34. UX fixes
35. Recap
36. Deploy Twimba
37. Solo Project - Restaurant Ordering app
38. Deploy your Solo Project
39. Essential JS Concepts Wrap Up
40. Congratulations on completing module 5! 😃
Responsive design
This module teaches you how to make your websites work well on all screen sizes, a critical skill for any frontend developer.
Build a Responsive Site
33 lessons1 hour 57 min
1. Module intro
2. Responsive site intro
3. Thinking responsively
4. Aside: Relative units and percentages
5. Create flexible containers with percentage units
6. Controlling the width of images
7. Set width constraints with max-width
8. Aside: The em unit
9. Set font sizes with em
10. Aside: Margin and padding with em
11. Set margin and padding with em
12. Aside: The compounding issue with em
13. Aside: The rem unit
14. Change font sizes to rem
15. Text line height
16. How do you decide which unit to use?
17. Aside: Media queries
18. Add media queries to your site
19. Think “mobile-first”
20. Mobile-first in action
21. Common Breakpoints
22. Add a new breakpoint
23. Adapt the buttons for smaller screens
24. Adjust font size for smaller screens
25. Create a mobile-first navigation
26. Challenge: Narrow screens
27. Challenge: Wider screens
28. Solution: Wider screens
29. The viewport meta tag
30. Aside: Create a flexbox image grid
31. Wrap the featured items with flexbox
32. Recap
33. Deploy your site to Netlify
Build a Product Splash Page
22 lessons1 hour 11 min
1. Product splash page intro
2. Style the intro container
3. Style main content
4. Style the text
5. Aside: Transform text
6. Uppercase text
7. Add a breakpoint for wider screens
8. Aside: Viewport units
9. Viewport sized intro container
10. Adjust content for wider screens
11. Apply a full background image
12. Style the form inputs
13. Style the focus state
14. Style the submit button
15. Button modifiers
16. Aside: Reordering flex items
17. Adjust visual order of the intro text
18. Adjust line length
19. Aside: Control the size of elements with box-sizing
20. Apply box-sizing to the page
21. Product splash page recap
22. Deploy your splash page to Netlify
CSS Grid: The ultimate layout tool
19 lessons1 hour 37 min
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
Solo Project: Learning Journal
2 lessons 4 min 4 sec
Next-level JavaScript
In this module, you will take your JavaScript skills to the next level, and learn about modern JS patterns. You will also build a cool game.
Build a role-playing game part 1 - The setup
21 lessons1 hour 22 min
1. Next-level JavaScript Intro
2. Render the characters
3. The renderCharacter() function
4. Modify renderCharacter()
5. Aside: Object destructuring
6. Aside: Object destructuring challenge
7. Object Destructuring in renderCharacter()
8. Render multiple dice
9. The problem with for loops
10. Aside: .map()
11. Aside: .map() challenge
12. Aside: .join() challenge
13. Swap out for loop for map
14. Generate random value for dice
15. Aside: return a function
16. Render dice with random numbers
17. Aside: new Array constructor
18. Aside: .fill()
19. Aside: chaining .fill() and .map() onto a new Array
20. Use the Array constructor
21. Part 1 Outro
Build a role-playing game part 2 - Constructor functions
19 lessons 57 min
1. Part 2 Intro
2. Aside: Constructor functions
3. Aside: Constructor functions challenge
4. Aside: Methods on constructor functions
5. Aside: Methods on constructor functions challenge
6. Use a constructor function 1
7. Use a constructor function 2
8. Aside: Object.assign
9. Simplify constructor function 1
10. Simplify constructor function 2
11. Problem in the constructor function!
12. Fix the broken rendering
13. Amalgamate the objects
14. Too much code for one file!
15. Export getDiceRollArray()
16. Export Character constructor
17. Running your code locally
18. Good housekeeping
19. Part 2: Outro
Build a role-playing game part 3 - The gameplay
38 lessons2 hours 13 min
1. Part 3: Intro
2. Wire up the attack button
3. Launch the first attack!
4. Dice placeholders
5. Render placeholder dice
6. Well, that's embarrassing...
7. Fix the dice render problem 1
8. Fix the dice render problem 2
9. Inflicting damage
10. Inflicting damage 2
11. Aside: array.reduce()
12. Aside .reduce() challenge
13. Use .reduce() to calculate the damage
14. Stop health going negative
15. Is the character dead?
16. Calling endGame()
17. Aside: The Ternary Operator
18. Aside: Ternary Operator challenge
19. endGame()
20. endGame() 2
21. Aside: Arrow functions
22. Aside: Arrow functions challenge
23. Aside: inline arrow function challenge
24. Using arrow functions
25. Calculate percentage health remaining
26. The health bar
27. Displaying the health bar
28. Move getPercentage out of the constructor file
29. Adding more monsters 1
30. Add new monster 2
31. Back to one monster
32. When one monster dies, another appears
33. Aside: setTimeout
34. aside setTimeout challenge
35. Improve the UX - pause time
36. Improve the UX - disable the button
37. Tidy Up
38. Part 3 Outro
Build a role-playing game part 4 - Classes
8 lessons 27 min
Code reviews
Learn what code reviews are, why they matter, and how to give successful code reviews.
Code reviews
9 lessons 29 min
1. Why code reviews matter
2. The most common type of code review: GitHub PRs
3. What to look for in a code review
4. Your first textual code review
5. Scrim-based code reviews
6. Solo Project code review – password generator
7. Your first scrim-based code review
8. Share your scrim-based code review solution
9. Find a real Solo Project to review
Branching and Pull Requests with GitHub Desktop
7 lessons 19 min
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.
Intro to APIs & BoredBot
16 lessons1 hour
1. APIs Module Intro
2. What is an API?
3. Clients & Servers
4. Requests & Responses
5. BoredBot Intro
6. JSON Review
7. First fetch
8. .then() and Asynchronous JavaScript
9. Dog API Fetch and DOM Practice
10. Fetch idea from Bored API
11. Aside - apis.scrimba.com?
12. BoredBot - HTML
13. BoredBot - CSS
14. BoredBot - JavaScript
15. BoredBot - Extra Styling
16. Section Recap
URLs, REST, & BlogSpace
24 lessons1 hour 58 min
1. Section Intro
2. HTTP Requests
3. Requests - URLs and Endpoints
4. Requests - Methods
5. BlogSpace - GET first 5 blog posts
6. BlogSpace - Display blogs on page
7. BlogSpace - Add styling
8. BlogSpace - New post form
9. BlogSpace - Add style to form
10. BlogSpace - Form submit event listener
11. Requests - Body
12. Requests - Headers
13. BlogSpace - Send new post to server
14. BlogSpace - Add new post to list of posts
15. BlogSpace - Posts Refactor
16. BlogSpace - Reset form
17. REST
18. REST API Design
19. Nested Resources
20. URL Parameters - JSON Placeholder API
21. Query Strings
22. Query String Practice - OpenWeatherMap API
23. Solo Project - Color Scheme Generator
24. Section Recap
Async JavaScript & War
30 lessons2 hours 26 min
1. Async JS Intro & War Project
2. Callbacks Setup Challenge
3. Callback functions intro
4. Separate event listener callback
5. Callbacks - revisiting setTimeout
6. Callbacks - revisiting array.filter
7. Callbacks - make own filterArray function
8. Callbacks - put our custom filterArray function to use
9. Thought experiment: what if `fetch` used callbacks?
10. Promises
11. Context: method chaining
12. Promises - .then() chaining
13. Promises - .then()
14. Promises - passing basic values in the chain
15. War - save deckId for later use
16. War - draw 2 cards from our deck
17. War - Display our card images
18. War - Styling part 1
19. War - Styling part 2
20. War - Refactor card image placement
21. War - Determine the winning card part 1
22. War - Determine winning card part 2
23. War - display remaining cards when drawing
24. War - Display remaining cards on new deck
25. War - Disable the draw button when we get to 0 cards remaining
26. War - Keep score
27. War - Display the final winner
28. Sneak peak at ES8's Async/Await
29. Solo Project - Movie Watchlist
30. Section Recap
Promise Rejection & Capstone
25 lessons1 hour 51 min
1. Section Intro
2. Dashboard wireframe
3. Get photo from Unsplash
4. Add Author Info
5. Choosing a layout method
6. Set up flexbox
7. Promises review
8. Promise rejection
9. Promise rejection practice
10. Crypto - Add cryptocurrency data
11. Crypto - Get Dogecoin data
12. Check for error responses
13. Crypto - Display name and icon
14. Crypto - get prices
15. Time - Add current time with JavaScript
16. Time - Display time on page
17. Weather - start
18. Thought experiment - getCurrentLocation as a promise-based API?
19. Weather - Get user's current weather
20. Weather - Add icon
21. Weather - Add temp and city
22. Weather - CSS
23. Chrome extension time!
24. Module Outro
25. You've completed Module 9! 🥳
Learn UI design
In this module, you'll learn how to build apps that both look good and work well.
Intro to UI design
15 lessons1 hour 7 min
Build A Simple Layout
7 lessons 37 min
React basics
Learn the most popular library for building user interfaces. This will increase your productivity by an order of magnitude.
Build a React info site
31 lessons2 hours 33 min
1. Welcome to an Introduction to React!
2. What we'll learn
3. First React
4. First React Practice
5. Local setup (the quick way)
6. Why React? It's Composable!
7. Why React? It's declarative
8. JSX
9. Drag and Drop Deploy with Netlify
10. Goodbye, CDNs!
11. UPDATE: New React 18 createRoot API
12. Thought experiment: use .append() instead of ReactDOM.render()?
13. Project part 1 - markup
14. Pop quiz!
15. Custom Components
16. Custom Components part 2
17. Custom Components Quiz
18. Parent/Child Components
19. Styling with Classes
20. Organize components
21. Run React locally with Vite
22. Quick mental outline of project
23. Project setup
24. Quick Figma Walkthrough
25. Navbar & Styling
26. Main Section
27. Color the bullets
28. Add background logo
29. React Section 1 Solo Project
30. Deploy Your React App with Netlify
31. React Section 1 Recap
Build an AirBnb Experiences clone
27 lessons2 hours 12 min
1. Section intro & Figma file
2. Project setup: Navbar
3. Project setup: Hero
4. Project: Card Component
5. Problem - not reusable
6. Props Part 1: Understanding the Concept
7. Props Part 2: Reusable Components
8. Aside: JS inside JSX
9. Props part 3: Create a contact component
10. Props part 4: receiving props in a component
11. Prop quiz! (Get it?? 😆)
12. Destructuring props
13. Props practice
14. Passing in non-string props
15. Project: pass props to card component
16. Review - array .map()
17. React renders arrays
18. Mapping components
19. Map quiz!
20. Loading images from .map()
21. Project: Map experiences data into components
22. Project: key prop
23. Project: Sold Out Badge
24. Project: Pass object as props
25. Project: Spread object as props
26. React Section 2 Solo Project
27. React Section 2 Recap
Build a meme generator
64 lessons5 hours 7 min
1. Section Intro & Figma file
2. Meme Generator: Header
3. Meme Generator: Form
4. Project analysis
5. Event Listeners
6. Project: Get random meme
7. Our current conundrum
8. Props vs. State: Props
9. Props vs. State: State
10. Props vs. State Quiz!
11. useState
12. useState array destructuring
13. Changing state
14. useState - Counter practice
15. useState - Changing state with a callback function
16. Changing state quiz!
17. Project: Add images to the meme generator
18. Challenge: ternary practice
19. Challenge: flipping state back and forth
20. Complex state: arrays
21. Complex state: objects
22. Complex state: updating state objects
23. Project: Refactor state
24. Passing state as props
25. Setting state from child components
26. Passing data around
27. Boxes challenge part 1
28. Dynamic styles
29. Boxes challenge part 2
30. Boxes challenge part 3.1 - local state
31. Boxes challenge part 3.2 - unified state
32. Boxes challenge part 4
33. Boxes challenge part 5
34. Conditional rendering: &&
35. Conditional rendering: && practice
36. Conditional rendering: ternary
37. Conditional rendering practice
38. Conditional rendering quiz!
39. React forms intro
40. Watch for input changes in React
41. Form inputs practice
42. Forms state object
43. Form state object practice
44. Controlled inputs
45. Forms in React: Textarea
46. Forms in React: Checkbox
47. Forms in React: Radio buttons
48. Forms in React: Select & Option
49. Forms in React: Submitting the form
50. Forms quiz!
51. Sign up form practice
52. Project: Add text to image
53. Making API calls
54. Intro to useEffect
55. useEffect() syntax and default behavior
56. useEffect dependencies array
57. useEffect quiz!
58. useEffect for fetching data
59. useEffect: when to use dependencies
60. Project: Get Memes from API
61. State and Effect practices
62. useEffect cleanup function
63. Using an async function inside useEffect (Clone)
64. React Section 3 Recap
Build a notes app and Tenzies games
28 lessons2 hours 2 min
1. Section 4 Intro
2. Warm-up: Add Dark/Light modes to ReactFacts site
3. Notes App: Intro
4. Notes App: Features to add
5. Notes App: Sync notes with localStorage
6. Lazy State Initialization
7. Notes App: Note summary title
8. Notes App: Bump recent note to the top
9. Notes App: Delete note
10. Tenzies Project Intro
11. Tenzies: Setup
12. Tenzies: Die components
13. Tenzies: Generate array of 10 random numbers
14. Tenzies: Map array to Die components
15. Tenzies: Roll dice button
16. Tenzies: Change dice to objects
17. Tenzies: Styling held dice
18. Tenzies: Hold dice part 1
19. Tenzies: Hold dice part 2
20. Tenzies: Hold dice part 3
21. Tenzies: End game part 1
22. Tenzies: End game part 2
23. Tenzies: End game part 3
24. Tenzies: New Game
25. Tenzies: Extra Credit Ideas
26. React Section 4 Solo Project
27. Check out the class components crash course!
28. Congratulations on completing Module 13! 🤩
Advanced React
Level up your React JS skills to a professional level.
Learn class components in React
16 lessons1 hour 18 min
1. Class Components Section Intro
2. ES6 classes review
3. Intro to class components
4. Class components practice
5. State in class components
6. Setting state in class components
7. Challenge: convert to a class component with state
8. Constructor method in class components
9. Challenge: constructor method
10. Updating complex state with this.setState()
11. Lifecycle Methods Intro
12. Lifecycle methods: componentDidMount() 👶
13. Lifecycle methods: componentDidUpdate() part 1 ✏️
14. Lifecycle methods: componentDidUpdate() part 2 ✏️
15. Lifecycle methods: componentWillUnmount() 🪦
16. Other Lifecycle Methods
Reusability
13 lessons1 hour 55 min
1. Code Reuse in React
2. React Children
3. Challenge: React Children
4. Higher Order Components (HOCs) Part 1
5. Higher Order Components (HOCs) Part 2
6. Challenge: Higher Order Components (HOCs)
7. Higher Order Components (HOCs) Part 3
8. Render Props Part 1
9. Render Props Part 2
10. Render Props Part 3
11. IMPORTANT: Please watch before continuing the course
12. Challenge: Render Props
13. React's Tree Rendering 🌳
Performance
5 lessons 38 min
React Context
10 lessons1 hour 11 min
React Hooks
14 lessons1 hour 32 min
1. Speed Typing Game Intro
2. Speed Typing Game Part 1
3. Speed Typing Game Part 2
4. Speed Typing Game Part 3
5. Speed Typing Game Part 4
6. Speed Typing Game Part 5
7. Speed Typing Game Part 6
8. useRef
9. Speed Typing Game Part 7
10. useContext()
11. Hooks Practice - refactor themeContext
12. Custom Hooks
13. Custom Hooks practice - refactor toggler
14. Speed Typing Game Part 8
React Router
15 lessons1 hour 27 min
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
24 lessons1 hour 41 min
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
24. Congratulations on completing Module 14! ✨
Getting hired
Learn to nail the coding interview, and get your first job.
Getting hired
4 lessons 20 min
Using LinkedIn to get a job
12 lessons 27 min
1. Course Introduction (new)
2. Optimizing your headline
3. Crafting a great summary
4. Adding a professional headshot
5. Adding an awesome cover image
6. Increasing your visibility
7. Adding past work experience
8. Highlighting your accomplishments
9. Optimizing your keywords
10. Getting connected
11. Getting recommendations (new)
12. Outro
Frontend job interview tips
22 lessons1 hour 40 min
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. Resume tips
22. Job search strategy
JavaScript interview questions
22 lessons 34 min
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
React interview questions
12 lessons 42 min
1. React Interview Questions Course Introduction
2. The Virtual DOM
3. React Limitations
4. JSX
5. Props
6. State and Lifecycle
7. Effects
8. Refs
9. Context
10. Miscellaneous (but important!) Questions
11. React Interview Questions Course Conclusion
12. Congratulations on completing The Frontend Developer Career Path! ✨
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
Google clone
You’ll hone your skills in HTML and CSS by creating a clone of Google’s famous search page.
Passenger counter app
Your very first JavaScript app will be a passenger counter. This gives you an intro to the basic principles of web development.
Blackjack game
Your first JavaScript game will be Blackjack, the iconic Casino game that's loved by millions.
Bored Bot
Never be bored again - build a bot to give you entertainment ideas using an API.
A personal portfolio
A beautiful portfolio to show off to potential employers.
React fact page
Your very first React app will be a static site about React! This gives you an intro to the basic principles of the library.
AirBnB
You'll take your React skills to the next level by creating an AirBnB Experiences clone.
Meme generator
In section 3, Bob Ziroll guides you through building his classic meme generator, updated with the newest React features.
Tenzies game
Your first React game will be the popular dice game, Tenzies.
Photo store
Build a neat eCommerce site that pulls all your new React knowledge together.
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 
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://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.
