The Frontend Developer Career Path
Unlock CourseGet started!
Join 12537 other students
Log 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 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
HTML & CSS basics
Learn the very basics of HTML and CSS. Start creating layouts, and style them how you want.
HTML Crash Course (updated)
15 lessons - 1 hour
1. HTML & CSS basics intro
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!
15. Congrats on completing the HTML crash course!
CSS Crash Course (updated)
20 lessons - 1 hour
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
23 lessons - 1 hour
1. Introduction
2. Get to know the Module channels!
3. Challenge 1: Starting off with a blank file
4. Solution 1: Starting off with a blank file
5. Challenge 2: Adding lists to a page (updated)
6. Solution 2: Adding lists to a page
7. Challenge 3: Fix the image
8. Solution 3: Fix the image
9. Challenge 4: Adding some style to our page
10. Solution 4: Adding some style to our page
11. Challenge 5: Styling the title of our page
12. Solution 5: Styling the title of our page
13. Challenge 6: Styling the subheadings
14. Solution 6: Styling the subheadings
15. Challenge 7: Some extra style
16. Solution 7: Some extra style
17. Challenge 8: Containing our layout
18. Solution 8: Containing our layout
19. Challenge 9: Creating columns
20. Solution 9: Creating columns
21. Challenge 10: Styling the sidebar
22. Solution 10: Styling the sidebar
23. Bonus Challenge
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
30 lessons - 1 hour
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. Congrats & recap
30. Share your win!
JavaScript challenges - part 1
6 lessons - 15 min
Build a Blackjack game
55 lessons - 2 hours
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 you 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
8 lessons - 19 min
Build a Chrome Extension
55 lessons - 2 hours
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
6 lessons - 20 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
CSS & JavaScript fundamentals
In this module, you'll level up your CSS and JavaScript skills, and build a super cool game.
CSS Fundamentals
26 lessons - 2 hours
1. CSS & JavaScript fundamentals
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
26. Want a weekly coding challenge?
CSS Fundamentals: Challenges
21 lessons - 1 hour
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
JavaScript Challenges
24 lessons - 1 hour
1. How to join #power-hours
2. Build a Modal: HTML
3. Build a Modal: Buttons CSS
4. Build a Modal: Modal CSS
5. Build a Modal: Interactive Buttons
6. Build a Modal: Overlay CSS
7. Build a Modal: RGBA Colors
8. Build a Search Bar: Overview
9. Build a Search Bar: Events & toLowerCase()
10. Build a Search Bar: Capturing the user's search query
11. Build a Search Bar: Get all the names from the DOM
12. Build a Search Bar: Looping over all our names!
13. Build a Search Bar: Comparing the search query vs. the DOM names
14. Build a Carousel: Overview
15. Build a Carousel: Base HTML Structure
16. Build a Carousel: Styling the fundamentals of the carousel
17. Build a Carousel: Using translateY to get perfectly aligned buttons
18. Build a Carousel: Grabbing all carousel items and attaching button event listeners
19. Build a Carousel: Moving to the next slide
20. Build a Carousel: Looking at the for of loop
21. Build a Carousel: Hiding non-active slides
22. Build a Carousel: Moving to the previous slide
23. Build a Carousel: Smooth transitions using CSS keyframes
24. Build a Carousel: Make it your own
Build a dice game
11 lessons - 38 min
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
29 lessons - 1 hour
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. e.keyCode Update
12. Using .addEventListener() to listen out for key presses
13. Changing our Snake's direction
14. Google Challenge
15. Explaining Modulus
16. Using Modulus in our game
17. A quick lesson in refactoring
18. Generating random numbers
19. Pseudo-coding the Logic of Snake eating an Apple
20. Removing the Apple
21. Growing our Snake using .push()
22. Adding the score using the increment operator
23. The textContent Google Challenge Results
24. Speeding up our Snake
25. Implementing functionality to our Start Button
26. Implementing Restart Logic
27. Restarting our Game Code
28. Wrap up & What's next?
29. You've completed Module 4. Well done! 🙌
Responsive design
This 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
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 our 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
24 lessons - 1 hour
1. Responsive Design Challenges - Introduction
2. Responsive Design: Challenge #1 - The first step toward a responsive design
3. Responsive Design: Solution #1 - The first step toward a responsive design
4. Responsive Design: Challenge #2 - Relative units
5. Responsive Design: Solution #2 - Relative Units
6. Responsive Design: Challenge #3 - Adapting the text and images
7. Responsive Design: Solution #3 - Adapting the text and images
8. Responsive Design: Challenge #4 - Some breathing room
9. Responsive Design: Solution #4 - Some breathing room
10. Responsive Design: Challenge #5 - Modifying the layout at large screens
11. Responsive Design: Solution #5 - Modifying the layout at large screens
12. Responsive Design: Challenge #6 - Color manipulation
13. Responsive Design: Solution #6 - Color manipulation
14. Responsive Design: Challenge #7 - More fun with colors
15. Responsive Design: Solution #7 - More fun with colors
16. Responsive Design: Challenge #8 - Vertical alignment
17. Responsive Design: Solution #8 - Vertical alignment
18. Responsive Design: Challenge #9 - Fixing a broken layout
19. Responsive Design: Solution #9 - Fixing a broken layout
20. Responsive Design: Challenge #10 - Horizontal alignment
21. Responsive Design: Solution #10 - Horizontal alignment
22. Responsive Design: Challenge #11 - Horizontal alignment
23. Responsive Design: Solution #11 - Horizontal alignment
24. Check out the #daily-polls channel!
Stepping up our style
38 lessons - 2 hours
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
3 lessons - 8 min
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.
Introduction to ES6+
25 lessons - 1 hour
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
JavaScript Challenges
14 lessons - 20 min
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
30 lessons - 1 hour
1. Introduction to Pacman and Prerequisites
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. e.keyCode Update (Clone)
10. Switch Statements
11. Explaining Modulus
12. Moving Pacman with classList.add() and classList.remove()
13. Implementing statements to move our Pacman
14. Avoiding walls by using classList.contains()
15. Avoiding the ghost-lair using classList.contains()
16. Implementing Pacman's shortcut using indexes
17. Eating Pacdots and displaying the score using innerHTML()
18. Making ghosts using Classes and the Constructor Method
19. Drawing the ghosts using forEach()
20. Storing other variables in our Constructor
21. Passing parameters into functions
22. Using setInterval() to move ghosts at specific speeds
23. Making sure ghosts avoid walls and other ghosts
24. Eating Power Pellets using setTimeout()
25. Styling our scared ghosts
26. Eating scared ghosts
27. Defining a Game Over
28. Defining a Win!
29. Code Refactoring and Tidying
30. You've completed module 6! 🥳
Working with APIs - updated
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 lessons - 1 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
23 lessons - 1 hour
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. Section Recap
Async JavaScript & War
29 lessons - 2 hours
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 (Remade - needs editing)
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. Section Recap
Promise Rejection & Capstone
25 lessons - 1 hour
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 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
18 lessons - 1 hour
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
12 lessons - 42 min
CSS Grid: The ultimate layout tool
19 lessons - 1 hour
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
15 lessons - 1 hour
Build A Simple Layout
7 lessons - 37 min
Full Project Refactoring
7 lessons - 42 min
Build and deploy your portfolio
21 lessons - 2 hours
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.
Build a React info site
29 lessons - 2 hours
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. Goodbye, CDNs!
10. Thought experiment: use .append() instead of ReactDOM.render()?
11. Project part 1 - markup
12. Pop quiz!
13. Custom Components
14. Custom Components part 2
15. Custom Components Quiz
16. Parent/Child Components
17. Styling with Classes
18. Organize components
19. Set up a local React environment with Create React App
20. Styles and images with CRA
21. Quick mental outline of project
22. Project setup
23. Quick Figma Walkthrough
24. Navbar & Styling
25. Main Section
26. Color the bullets
27. Add background logo
28. Section 1 Solo Project
29. Section 1 Recap
Build an AirBnb Experiences clone
27 lessons - 2 hours
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. Section 2 Solo Project
27. Section 2 recap
Build a meme generator
64 lessons - 5 hours
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
64. Section 3 Recap
Build a notes app and Tenzies games
28 lessons - 2 hours
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. Section 4 Solo Project
27. Check out the class components crash course!
28. Congrats!
Advanced React
Level up your React JS skills to a professional level.
Learn class components in React
16 lessons - 1 hour
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 lessons - 1 hour
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 lessons - 1 hour
React Hooks
14 lessons - 1 hour
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 lessons - 1 hour
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
23 lessons - 1 hour
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
Getting hired
Learn to nail the coding interview, and get your first job.
Getting hired
3 lessons - 17 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 lessons - 1 hour
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 - 41 min
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
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.
Dice game
Take your JavaScript up a notch by building this fun dice game.
BBQ page
Hone your UI design skills by building a slick BBQ landing page
Pac-Man
Build the legendary game from the old age of computers.
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://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.
