The Frontend Developer Career Path
Unlock CourseGet started!
Join 18355 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 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.
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
18 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. Adding our project to GitHub
16. Deploying it to the web!
17. Recap
18. 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
18 lessons 51 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 and share it on Discord!
18. 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
30 lessons1 hour 13 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. Congrats & recap
30. Share your win!
JavaScript challenges - part 1
8 lessons 20 min
Set Up a Local Dev Environment
3 lessons 10 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! 🙌
Essential JavaScript concepts
In this module, you'll level up your JavaScript skills, and build a super cool game.
JavaScript Challenges
24 lessons1 hour 47 min
1. Essential JavaScript Concepts Intro
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
12 lessons 40 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
12. 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.
Starting to think responsively
45 lessons4 hours 7 min
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
23 lessons1 hour 2 min
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
Stepping up our style
39 lessons2 hours 53 min
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
39. You've completed module 6! 🥳
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 21 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 28 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! 🥳
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 lessons1 hour 20 min
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 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
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 9 min
Build A Simple Layout
7 lessons 37 min
Full Project Refactoring
7 lessons 42 min
Build and deploy your portfolio
21 lessons2 hours 23 min
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. Congratulations on completing Module 11! ✨
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 lessons2 hours 25 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. Goodbye, CDNs!
10. UPDATE: New React 18 createRoot API
11. Thought experiment: use .append() instead of ReactDOM.render()?
12. Project part 1 - markup
13. Pop quiz!
14. Custom Components
15. Custom Components part 2
16. Custom Components Quiz
17. Parent/Child Components
18. Styling with Classes
19. Organize components
20. Run React locally with Vite
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. React Section 1 Solo Project
29. 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
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 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.
Dice game
Take your JavaScript up a notch by building this fun dice game.
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.