The Frontend Developer Career Path

Unlock CourseGet started!

Join 7353 other students

Sign in to get
Access to 30+ free courses
New courses added monthly
Weekly coding challenge
Join a friendly community
Unlock Course
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
Subscribe now!

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
2 lessons - 7 min
1. Why learning web development is a superpower
2:48
2. Let's Make a Cake!
4:54
Your own personalized web app
6 lessons - 11 min
1. Add your Name and Emoji
2:41
2. Display Photos
2:16
3. Change the Background Image
1:19
4. Choose a Color
1:03
5. Set the Font, Border, and Column Count
2:25
6. Share your website
1:35
Join the community
3 lessons - 9 min
1. Live events to join every week
3:43
2. Discord
1:21
3. About the path - updated
3:57

HTML & CSS basics

Learn the very basics of HTML and CSS. Start creating layouts, and style them how you want.

HTML Crash Course (updated)
14 lessons - 1 hour
1. Welcome to Module 2
0:56
2. Introduction to the Crash Course
3:30
3. Getting Started with HTML
5:37
4. Let's make some changes
2:52
5. Introduction to HTML
4:17
6. Document Structure
4:57
7. Document Structure continued
7:03
8. Creating a new page
4:11
9. Inline Elements
6:56
10. Nesting
4:14
11. Attributes and Links
5:43
12. Images
7:55
13. Lists
4:16
14. 11 - It's your turn!
2:49
CSS Crash Course (updated)
20 lessons - 1 hour
1. Introduction to CSS - Syntax basics
5:06
2. Where does CSS live?
6:40
3. CSS Syntax continued
5:10
4. Linking to an external CSS file
3:52
5. Inheritance
4:10
6. The cascade
2:17
7. The box model - width and height
6:04
8. The box model - margin
8:01
9. The box model - Padding
3:57
10. The box model - borders
7:49
11. The box model - recap
2:37
12. Organizing our content with semantic HTML
5:35
13. Classes and IDs
9:30
14. Spans
4:36
15. Divs
5:37
16. Centering content
4:09
17. Creating columns
7:18
18. Background Images
6:26
19. Relative file paths
3:09
20. It's your turn!
1:30
HTML & CSS Challenges
22 lessons - 1 hour
1. Introduction
1:40
2. Challenge 1: Starting off with a blank file
2:00
3. Solution 1: Starting off with a blank file
1:54
4. Challenge 2: Adding lists to a page (updated)
1:55
5. Solution 2: Adding lists to a page
2:32
6. Challenge 3: Fix the image
1:34
7. Solution 3: Fix the image
1:50
8. Challenge 4: Adding some style to our page
1:39
9. Solution 4: Adding some style to our page
3:26
10. Challenge 5: Styling the title of our page
1:56
11. Solution 5: Styling the title of our page
7:40
12. Challenge 6: Styling the subheadings
1:03
13. Solution 6: Styling the subheadings
5:16
14. Challenge 7: Some extra style
1:49
15. Solution 7: Some extra style
3:33
16. Challenge 8: Containing our layout
2:18
17. Solution 8: Containing our layout
5:10
18. Challenge 9: Creating columns
2:28
19. Solution 9: Creating columns
4:45
20. Challenge 10: Styling the sidebar
1:59
21. Solution 10: Styling the sidebar
6:28
22. Bonus Challenge
1:28

Making websites interactive

Combine your newly acquired HTML & CSS skills with Javascript. This will allow you to create interactive websites.

Your first interactive website
9 lessons - 34 min
1. Making Websites Interactive - Module Intro
3:09
2. Linking to the JavaScript file
4:28
3. Writing your first JavaScript code
4:37
4. Using JavaScript to change our website
6:37
5. Adding a button
2:52
6. Listening for button clicks
3:54
7. Changing the text of elements
2:33
8. Reassigning a variable
2:31
9. Creating a counter app
3:39
Intro to Javascript - updated
9 lessons - 58 min
1. Intro to Variables
5:10
2. Primitive Data Types
4:55
3. Complex Data Types - Arrays
5:32
4. Complex Data Types - Objects Part 1
5:16
5. Complex Data Types - Objects Part 2
8:56
6. Comparison Operators
6:57
7. Conditionals
8:43
8. Truthy and Falsy
4:55
9. Logic Operators
8:06
Intro to loops
12 lessons - 1 hour
1. Introduction
1:24
2. Explaining let, const and var
5:50
3. Challenge: Using let and const in a real life example
4:22
4. Explaining for loops
3:19
5. For loops with arrays
5:13
6. For loops with if statements
5:43
7. Challenge: Using for loops we colour a game board
5:01
8. Loops and arrays part 1
3:57
9. Loops and arrays part 2
6:42
10. Challenge: Loops and arrays
9:28
11. Explaining nested loops
3:59
12. Challenge: Final challenge
6:33
Intro to functions and methods
15 lessons - 1 hour
1. Introduction
1:28
2. Functions part 1
5:41
3. Functions part 1 - mini challenge
4:39
4. Functions part 2
4:14
5. Functions part 2 - mini challenge
4:50
6. Explaining Math.random() and Math.floor()
5:20
7. Challenge: We use Math.random() and Math.floor() to create a random Quote Generator
4:03
8. Explaining slice()
3:28
9. Explaining push()
3:10
10. Explaining unshift()
2:47
11. Challenge: using push() and unshift()
7:12
12. Explaining pop()
3:26
13. Explaining shift()
2:23
14. Challenge: using pop() and shift()
5:39
15. Whats next?
1:45
Intro to the DOM
14 lessons - 1 hour
1. Introduction to the DOM
3:35
2. What is the DOM?
3:45
3. Selecting Elements - getElementById
5:31
4. Selecting Multiple Elements
5:48
5. querySelector and querySelectorAll
8:13
6. Modifying an element's text
7:25
7. Modifying Styles
7:21
8. Modifying Styles - className and classList
7:06
9. Modifying elements - value
3:26
10. Creating elements in JS
5:53
11. Creating elements in JS - innerHTML
6:12
12. Creating elements in JS - for loops + createElement
5:47
13. Event Listeners
10:08
14. Self study - get the value from an input element
0:47
Your personality in emojis
10 lessons - 25 min
1. You in Emojis
1:21
2. My Emojis - log the emojis
1:38
3. My Emojis - grabbing the emojiContainer
1:35
4. My Emojis - Rendering the Emojis
2:03
5. My Emojis - adding the input and button
4:03
6. My Emojis - Push and Clear
2:41
7. My Emojis - Render the New Emoji to the Screen
3:20
8. My Emojis - Unshift an Emoji to the Array
3:47
9. My Emojis - Pop and Shift
2:52
10. My Emojis - Share It!
2:06
Build a diary app
20 lessons - 1 hour
1. Welcome to the course!
2:16
2. Add input field for entries
2:00
3. Style the h1 title and entries form
3:19
4. Style the submit button
2:03
5. Remove css outline on input field focus
3:17
6. Prevent page reload on submit
3:54
7. Accessing the user's input (1) [debugging]
3:08
8. Accessing the user's input (2) [debugging]
3:56
9. Adding the user's input to the DOM
3:48
10. Style the entries section
2:39
11. Clear entry textbox when submit button is clicked
2:57
12. Hide user entry by default
1:24
13. Add navigation buttons for each user entry
5:35
14. Make button count dynamic
3:15
15. Display an entry when its navigation button is clicked
2:44
16. Add a little more styling to the entries section
3:18
17. Display only one entry at a time (1)
4:02
18. Display only one entry at a time (2)
4:59
19. Let's wrap up!
1:07
20. Congrats on completing Module 3 🎉
1:15

CSS & JavaScript fundamentals

In this module, you'll level up your CSS and JavaScript skills, and build a super cool game.

CSS Fundamentals
25 lessons - 2 hours
1. CSS and JavaScript Fundamentals - Module Intro
2:05
2. GitHub links for all projects starting files
1:23
3. Introduction to the CSS Fundamentals module
2:58
4. Margin and Padding - Margins and spacing out text
4:56
5. Margin and Padding - Collapsing margins
6:36
6. Margin and Padding - Consistency and a new type of selector
5:19
7. Inline and Block elements
6:08
8. The span element
3:34
9. Styling links
12:23
10. Practice Time!
21:57
11. Inline-block
4:53
12. Styling buttons
9:15
13. Specificity basics
4:59
14. Specificity - two selectors of equal value
2:10
15. Compound Selectors
15:13
16. Compound selectors and specificity
6:56
17. A better way to name our CSS classes
8:39
18. The text properties
2:54
19. Font-family and font stacks
5:45
20. How to use Google fonts
8:55
21. Inheritance
1:55
22. Working with, overwriting, and applying inheritance
4:04
23. Putting it all together
8:27
24. Putting it all together - the CSS
17:42
25. Solution to the challenge and module wrap up
4:17
CSS fundamentals challenges
20 lessons - 1 hour
1. Introduction: Landing Page
1:31
2. Solution: Landing Page
14:18
3. Introduction: 4 Color Schemes
1:15
4. Solution: 4 Color Schemes
3:06
5. Introduction: CSS Challenge - Super-Styled Button
1:39
6. Solution: CSS Challenge - Super-Styled Button
4:41
7. Introduction: CSS Challenge - Proper Spacing
1:27
8. Solution: CSS Challenge - Proper Spacing
7:10
9. Introduction: CSS Challenge - Restricted Selectors
1:13
10. Solution: CSS Challenge - Restricted Selectors
2:48
11. Introduction: CSS Challenge - Structuring Blog Post
1:07
12. Solution: CSS Challenge - Structuring Blog Post
7:53
13. Introduction: CSS Challenge - Invitation Card
1:25
14. Solution: CSS Challenge - Invitation Card
6:41
15. Introduction: CSS Challenge - Image Collage
1:28
16. Solution: CSS Challenge - Image Collage
2:08
17. Introduction: CSS Challenge - Add a Blog Post
1:29
18. Solution: CSS Challenge - Add a Blog Post
3:45
19. Introduction: Transforming Text
1:52
20. Solution: Transforming Text
3:25
JavaScript Challenges
23 lessons - 1 hour
1. Build a Modal: HTML
7:01
2. Build a Modal: Buttons CSS
3:12
3. Build a Modal: Modal CSS
3:22
4. Build a Modal: Interactive Buttons
3:14
5. Build a Modal: Overlay CSS
4:38
6. Build a Modal: RGBA Colors
4:06
7. Build a Search Bar: Overview
2:42
8. Build a Search Bar: Events & toLowerCase()
6:26
9. Build a Search Bar: Capturing the user's search query
2:32
10. Build a Search Bar: Get all the names from the DOM
3:34
11. Build a Search Bar: Looping over all our names!
4:47
12. Build a Search Bar: Comparing the search query vs. the DOM names
4:54
13. Build a Carousel: Overview
3:58
14. Build a Carousel: Base HTML Structure
6:35
15. Build a Carousel: Styling the fundamentals of the carousel
6:22
16. Build a Carousel: Using translateY to get perfectly aligned buttons
3:34
17. Build a Carousel: Grabbing all carousel items and attaching button event listeners
6:35
18. Build a Carousel: Moving to the next slide
4:58
19. Build a Carousel: Looking at the for of loop
3:35
20. Build a Carousel: Hiding non-active slides
5:37
21. Build a Carousel: Moving to the previous slide
4:46
22. Build a Carousel: Smooth transitions using CSS keyframes
5:31
23. Build a Carousel: Make it your own
3:58
Build a dice game
11 lessons - 38 min
1. Challenge: Dice Game - Intro
1:08
2. Challenge: Dice Game - Setting up the game state
3:29
3. Challenge: Dice Game - Setting up the DOM nodes
4:01
4. Challenge: Dice Game - Roll the Dice
3:55
5. Challenge: Dice Game - Switching turns
4:22
6. Challenge: Dice Game - Displaying the dice number
4:22
7. Challenge: Dice Game - Keeping track of the score
2:28
8. Challenge: Dice Game - Declare a winner
3:45
9. Challenge: Dice Game - Make it DRYer
1:16
10. Challenge: Dice Game - Reset game
6:01
11. Challenge: Dice Game - Make it your own
3:43
Build a Snake Game
29 lessons - 1 hour
1. Introduction: Snake Game
3:02
2. Setting up our HTML
4:22
3. Adding CSS to our Snake Game
4:26
4. Picking out elements using document.querySelector()
4:35
5. Adding squares into our grid using JavaScript
7:27
6. Drawing the Snake on the grid
3:03
7. Using .pop() to remove the tail of our Snake
4:25
8. Using .unshift() to add a square to the direction of our Snake
4:04
9. Using .setInterval() to move our Snake on a time loop
4:02
10. KeyCodes
3:05
11. keyCode Update
1:23
12. Using .addEventListener() to listen out for key presses
2:41
13. Changing our Snake's direction
3:48
14. Google Challenge
2:55
15. Explaining Modulus
2:52
16. Using Modulus in our game
6:00
17. A quick lesson in refactoring
2:03
18. Generating random numbers
6:05
19. Pseudo-coding the Logic of Snake eating an Apple
2:28
20. Removing the Apple
2:52
21. Growing our Snake using .push()
3:21
22. Adding the score using the increment operator
1:56
23. The textContent Google Challenge Results
2:49
24. Speeding up our Snake
3:41
25. Implementing functionality to our Start Button
2:58
26. Implementing Restart Logic
3:11
27. Restarting our Game Code
3:40
28. Wrap up & What's next?
2:12
29. You've completed Module 4. Well done! 🙌
1:41

Responsive design

his module teaches you how to make your websites work well on all screen sizes, a critical skill for any frontend developer.

Starting to think responsively
45 lessons - 4 hours
1. Starting to think responsively
3:00
2. CSS Units
3:11
3. CSS Units - Percentage
5:55
4. Controlling the width of images
4:47
5. min-width and max-width
2:46
6. CSS Units - The em unit
5:27
7. The problem with ems
2:29
8. CSS Units - rems
4:44
9. Picking which unit to use
3:31
10. ems and rems - an example
7:47
11. Flexbox refresher and setting up some HTML
7:51
12. Basic styles and setting up the columns
7:02
13. Adding the background color
4:10
14. Setting the column widths
3:36
15. Spacing out the columns
4:24
16. Controlling the vertical position of flex items
5:12
17. Media Query basics
10:05
18. Making out layout responsive with flex-direction
6:52
19. flex-direction explained
3:04
20. Creating a navigation
4:44
21. Using flexbox to start styling our navigation
7:36
22. Making our navigation look good
7:15
23. Adding the underline
3:58
24. A more complicated navigation
6:41
25. Making the navigation responsive
6:53
26. Taking a look at the rest of the project
4:10
27. Setting up the structure
8:22
28. Featured article structure
5:05
29. The home page - HTML for the recent articles
2:29
30. home page - html for the aside
6:03
31. Starting the CSS for our page
15:26
32. Starting the layout - looking at the big picture
8:30
33. Starting to think mobile first
2:46
34. Styling the featured article
6:22
35. Changing the visual order with flexbox
5:12
36. Playing with the title's position, and the downsides of negative margins
4:42
37. Styling recent articles for large screens
7:44
38. Changing image sizes with object-fit
3:53
39. Setting up the widgets and talking breakpoints
6:48
40. Using a new pseudo-class to wrap-up the homepage
7:28
41. Creating the recent posts page
3:25
42. Setting up the About Me page
4:12
43. Fixing up some loose ends
4:28
44. Important Note: The viewport meta tag
3:39
45. Module wrap up
3:14
Responsive design challenges
20 lessons - 1 hour
1. Introduction: Responsive Boxes
1:12
2. Solution: Responsive Boxes
3:24
3. Introduction: Fix This Card
1:09
4. Solution: Fix This Card
5:09
5. Introduction: Responsive Image Collage
2:05
6. Solution: Responsive Image Collage
7:38
7. Introduction: Blog Posts Page
1:35
8. Solution: Blog Posts Page
12:23
9. Introduction: Navbar
1:40
10. Solution: Navbar
13:53
11. Introduction: Responsive Call-To-Action
0:50
12. Solution: Responsive Call-To-Action
5:34
13. Introduction: CSS Stairs
0:53
14. Solution: CSS Stairs
2:45
15. Introduction: Fix This Grid
0:54
16. Solution: Fix This Grid
2:31
17. Introduction: Flashing Boxes
0:54
18. Solution: Flashing Boxes
4:50
19. Introduction: Responsive Navigation
1:14
20. Solution: Responsive Navigation
5:50
Stepping up our style
38 lessons - 2 hours
1. It's time to step up our style
2:40
2. A look at line-height
5:12
3. text-transform: uppercase
4:01
4. Making things easier to read with letter-spacing
4:02
5. A nice color trick with rgba()
4:52
6. background-images
3:59
7. Background images and the file path (very important note)
2:05
8. Controlling our background images
7:55
9. BBQ Splash Page - Project Introduction
3:23
10. Writing the HTML for the BBQ splash page
7:01
11. Starting to style it up - BBQ Splash Page
11:07
12. Adding the background image - BBQ Splash Page
3:46
13. Changing the order - BBQ Splash Page
3:45
14. Styling the main content area - BBQ Splash page
2:51
15. Adding the media query - BBQ Splash Page
4:22
16. Setting up the typography for large screens - BBQ Splash Page
2:13
17. Starting to set things up for large screens - BBQ Splash Page
3:22
18. Viewport units
7:29
19. Adding viewport units to the BBQ Splash Page
2:08
20. Enter box-sizing: border-box
7:07
21. Using flexbox to vertically center the main content - BBQ Splash Page
3:19
22. Fixing the intro section on both small and large screens - BBQ Splash Page
2:34
23. Dealing with very large screens solution #1
4:24
24. Dealing with very big screens solution #2
5:30
25. The very basics of forms
10:49
26. Form basics - form attributes
4:13
27. The basics of styling form
5:11
28. Adding the form - BBQ Splash Page
3:30
29. Starting to style up the form - BBQ Splash Page
4:03
30. Making the inputs look good - BBQ Splash Page
3:54
31. CSS Gradients
5:31
32. Styling the button - BBQ Splash Page
5:09
33. Basic transitions
4:44
34. Intro to transforms (and a quick word on performance)
3:01
35. We can transition more than :hover
2:54
36. Border gradients
4:52
37. Blending images, colors, and gradients with background-blend-mode
4:16
38. Wrap up
1:41
Making the BBQ page interactive
3 lessons - 8 min
1. Making the BBQ Page Interactive
5:26
2. Challenge: Making the BBQ Page Interactive
2:31
3. You've completed module 5! 🥳
0:48

Next-level JavaScript

The web is built on APIs, so you'll need to know how to handle them with JavaScript. This module contains two real-world projects, and a ton of challenges.

Introduction to ES6+
32 lessons - 1 hour
1. Next-level JavaScript - module intro
1:42
2. Template Literals
4:22
3. Destructuring objects
4:59
4. Destructuring Objects (Challenge)
2:18
5. Destructuring Arrays
1:46
6. Object Literal
1:58
7. Object Literal (Challenge)
1:52
8. For of Loop
2:52
9. For of Loop (Challenge)
2:33
10. Spread Operator
5:55
11. Spread Operator (Challenge)
1:54
12. Rest Operator
2:00
13. Arrow Functions
4:22
14. Default Params
2:47
15. Default Params (Challenge)
2:50
16. includes()
1:10
17. includes() (Challenge)
2:19
18. Let & Const
3:52
19. Import & Export
2:30
20. Import & Export (Challenge)
2:52
21. padStart() & padEnd()
1:21
22. padStart() & padEnd() (Challenge)
1:04
23. Classes
11:48
24. Classes (Challenge)
8:51
25. Trailing Commas
1:26
26. Promises
6:27
27. Challenge: Promises
2:46
28. Introduction: Fetch
4:29
29. Challenge: Fetch
3:03
30. Async & Await
5:55
31. Async & Await ( Challenge )
2:18
32. Sets in ES6
2:46
JavaScript Challenges
14 lessons - 20 min
1. Introduction: Array Replace
0:50
2. Solution: Array Replace
1:36
3. Introduction: Case Insensitive Palindrome
1:16
4. Solution: Case Insensitive Palindrome
4:18
5. Introduction: Enclose in Brackets
0:49
6. Solution: Enclose in Brackets
1:43
7. Introduction: Factorial Number
1:05
8. Solution: Factorial Number
1:18
9. Introduction: First Digit
0:58
10. Solution: First Digit
1:28
11. Introduction: Largest Number
0:42
12. Solution: Largest Number
2:27
13. Introduction: Max Multiple
0:47
14. Solution: Max Multiple
1:07
Build Pac-Man in JavaScript
30 lessons - 1 hour
1. Introduction to Pacman
3:38
2. Setting up your HTML and CSS
7:05
3. Creating our grid in JavaScript Part 1
7:32
4. Creating our grid in JavaScript Part 2
4:19
5. for Loops Challenge
3:47
6. Adding layouts using if else statements + challenge
5:19
7. Working with Indexes and Arrays
3:39
8. Moving Pacman with Keys and EventListeners
5:20
9. keyCode Update (Pacman)
1:23
10. Switch Statements
4:25
11. Explaining Modulus
3:37
12. Moving Pacman with classList.add() and classList.remove()
2:18
13. Implementing statements to move our Pacman
2:45
14. Avoiding walls by using classList.contains()
4:31
15. Avoiding the ghost-lair using classList.contains()
4:33
16. Implementing Pacman's shortcut using indexes
2:04
17. Eating Pacdots and displaying the score using innerHTML()
3:22
18. Making ghosts using Classes and the Constructor Method
4:50
19. Drawing the ghosts using forEach()
2:46
20. Storing other variables in our Constructor
1:42
21. Passing parameters into functions
3:39
22. Using setInterval() to move ghosts at specific speeds
4:28
23. Making sure ghosts avoid walls and other ghosts
4:39
24. Eating Power Pellets using setTimeout()
5:32
25. Styling our scared ghosts
3:04
26. Eating scared ghosts
4:29
27. Defining a Game Over
5:17
28. Defining a Win!
4:08
29. Code Refactoring and Tidying
1:36
30. You've completed module 6! 🥳
0:43

Working with APIs

Web APIs are the backbone of the web. In this module, you'll learn to use it, and build several different projects.

Basics of Web Architecture
13 lessons - 1 hour
1. Building Apps With APIs - Module Intro
3:10
2. Basics of Web Architecture
2:27
3. Map of the internet
4:18
4. Requests
11:54
5. Responses
4:52
6. SSL
6:27
7. Domains, Routing, DNS
8:02
8. Caching
5:18
9. Web servers and applications
3:22
10. Applications and Databases
8:53
11. Hosting and Serverless
5:18
12. Microservices and firewalls
9:01
13. Recap
1:20
Fetch basics
22 lessons - 1 hour
1. Introduction to Fetch
2:47
2. Local Files - Basic Text
3:39
3. JSON Intro
2:56
4. JSON Example
1:11
5. Local Files - JSON Data
5:16
6. Fetch A Photo From An API
3:04
7. Error Handling
1:58
8. Intro to Async/Await
2:59
9. Fetch Blog Posts using async/await (GET)
5:45
10. Error Handling (async/await)
2:00
11. Fetch Blog Posts (POST)
8:02
12. Fetch Blog Posts (POST) - Exercise
2:26
13. Random Jokes Project - Preview
0:43
14. Random Jokes Project - HTML
1:52
15. Random Jokes Project - CSS
6:22
16. Random Jokes Project - JavaScript 1
2:00
17. Random Jokes Project - JavaScript Part 2
2:35
18. Random Jokes Project - JavaScript Part 3
1:32
19. Random Jokes Project - JavaScript Part 4
2:29
20. Random Jokes Project - JavaScript Part 5
3:02
21. Random Jokes Project - JavaScript Part 6
2:56
22. Conclusion
0:47
Async JavaScript Challenges
12 lessons - 41 min
1. Async JavaScript Intro
2:45
2. Challenge: Async (promise chaining)
3:54
3. Challenge: Async/Await
4:27
4. Challenge: Error handling
2:40
5. Introduction: Promise
4:32
6. Challenge: Promise
3:15
7. Challenge: Promise - finally method
2:28
8. Challenge: Fulfil all promises
3:12
9. Challenge: Fulfil the fastest promise
3:27
10. Challenge: Parallel Execution
3:39
11. Challenge: Promises Traffic Light
5:32
12. Async JavaScript Outro
1:11
Fetch advanced
21 lessons - 1 hour
1. Introduction to Advanced Fetch
1:40
2. Recap Fetch Basics
4:11
3. Submit Form Data
7:53
4. Uploading a File Using Fetch
6:37
5. Uploading Multiple Files With Fetch
4:07
6. Working With Multiple Fetch Requests
6:06
7. Project Preview (Beer App)
0:41
8. Project Build Part 1 - HTML
7:29
9. Project Build Part 2 - CSS Resets & Header
3:23
10. Project Build Part 3 - CSS Filter Cards
10:54
11. Project Build Part 4 - JavaScript Fetch Exercise 1
4:35
12. Project Build Part 5 - JavaScript Fetch Exercise 2
3:37
13. Project Build Part 6 - CSS Beer Card Styling
2:53
14. Project Build Part 7 - JavaScript Fetch Exercise 3
2:52
15. Project Build Part 8 - CSS Beer Card Hover
5:30
16. Project Build Part 9 - JavaScript Filter Data
5:37
17. Project Build Part 10 - JavaScript Filter Data Exercise
3:26
18. Project Build Part 11 - JavaScript Data Pagination
6:12
19. Project Build Part 12 - Dealing With Data Inconsistency
1:52
20. Fetch Advanced Conclusion
0:43
21. You've completed Module 7! 🥳
1:08

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
1:43
2. Taking flexbox to the next level
1:39
3. flex-direction, flex-wrap, and flex-flow
5:15
4. justify-content and align-items and their relationship to flex-direction
7:16
5. Exploring align-content
4:23
6. flex-grow and flex-shrink explained
5:06
7. flex-basis
5:33
8. The flex shorthand property
4:25
9. Aligning individual elements with align-self
1:37
10. Margin auto and flexbox
4:29
11. Building a card component with flexbox - Introduction
2:34
12. Building a card component with flexbox - The markup
4:35
13. Building a card component with flexbox - Typography
5:42
14. Building a card component with flexbox - Mobile layout
11:00
15. Building a card component with flexbox - Large screens part one
5:10
16. Building a card component with flexbox - Large screens part two
5:18
17. Centering something on the screen with flexbox
2:20
18. Module wrap-up
1:51
Flexbox & Fetch
12 lessons - 42 min
1. 🚨IMPORTANT: Please watch before continuing
0:25
2. Color Picker
5:15
3. Challenge: Color Picker
1:57
4. Photo Gallery I
3:48
5. Photo Gallery II
7:40
6. Challenge: Photo Gallery
2:47
7. Online Users
4:47
8. Online Users II
2:13
9. Challenge: Online Users
2:20
10. User Profile
7:38
11. Challenge: User Profile
3:11
12. Wrap Up
0:47
CSS Grid: The ultimate layout tool
19 lessons - 1 hour
1. Introduction to CSS Grid
3:16
2. Setting up a basic grid
5:21
3. Placing items on the grid
4:03
4. grid-row and grid-column shorthands
5:13
5. Spanning columns
1:42
6. Some similarities to flexbox
5:28
7. Using grid for our card component
13:13
8. The grid-gap property
2:32
9. Adding the gap to our card
2:52
10. The implicit and explicit grid
6:00
11. Exploring grid areas
8:11
12. grid-areas and media queries
6:18
13. minmax()
3:35
14. the fr unit
3:01
15. minmax() and the fr unit
2:27
16. Putting grid to use - part 1
11:32
17. Putting grid to use - part 2
3:30
18. repeat()
3:22
19. auto-fit and auto-fill
5:14
Grid & Fetch
11 lessons - 45 min
1. Jeopardy Explanation
1:03
2. Jeopardy
7:10
3. Challenge: Jeopardy
2:32
4. Pokedex
7:56
5. Challenge: Pokedex
2:20
6. Library
6:48
7. Challenge: Library
1:40
8. TV Guide
4:48
9. Challenge: TV Guide
2:25
10. Challenge: An API for APIs
7:46
11. You've completed Module 8! 🥳
0:53

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
1. Learn UI Design - Module Intro
3:10
2. Course Introduction
1:06
3. White Space
4:45
4. Alignment
3:06
5. Design Challenge: 1
4:20
6. Contrast
4:26
7. Scale
4:29
8. Design Challenge: 2
7:14
9. Typography
6:12
10. Color
5:41
11. Design Challenge: 3
4:07
12. Visual Hierarchy
7:42
13. Design Challenge: 4
6:22
14. The Final Challenge
5:29
15. Closing Thoughts
0:59
Build A Simple Layout
7 lessons - 37 min
1. Building a simple layout - intro
1:19
2. Keeping it Ultra Simple
5:40
3. Making our Layout Dark
5:48
4. Challenge 1
6:36
5. Multi-Columns
4:35
6. Working with Photographs
5:32
7. Final Chapter Lesson
7:54
Full Project Refactoring
7 lessons - 42 min
1. Project Refactoring: Introduction & Defining the HTML
6:07
2. Fixing the Color & Contrast
3:57
3. Fixing the Type & Visual Hierarchy
6:56
4. Fixing White Space
5:32
5. Initial Media Queries
6:14
6. Tablet Media Queries
4:55
7. Desktop Media Query
8:37
Build and deploy your portfolio
21 lessons - 2 hours
1. Introduction
5:32
2. Setting things up - HTML
4:30
3. The header area - HTML
4:55
4. Intro section
5:51
5. About me, Work and Footer - HTML
8:40
6. Setting up the custom properties and general styles
10:38
7. Styling the titles and subtitles
4:14
8. Setting up the intro section
12:15
9. Styling the services section
12:50
10. The About me section
10:58
11. The portfolio
8:45
12. Adding the social icons with Font Awesome
2:56
13. Styling the footer
5:43
14. Setting up the navigation styles
6:53
15. Creating the hamburger
6:50
16. Adding the JS
9:10
17. Creating the portfolio item page
6:09
18. Customizing your page
1:59
19. DigitalOcean Droplets - What they are and how to set one up
10:14
20. DigitalOcean Droplets - Uploading files via FTP
4:10
21. You've completed Module 9! 🥳
1:01

Learn Git

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

Introduction to Github
8 lessons - 19 min
1. Hello Work
2:18
2. Tools of the Trade
2:00
3. Birth of a Repo
2:07
4. Commits & Changes
2:15
5. Sharing is Caring
3:49
6. Be Different
2:59
7. Pulling it Together
3:05
8. You've completed Module 10! 🥳
0:42

React Basics

Learn the most popular library for building user interfaces. This will increase your productivity by an order of magnitude.

Learn React
59 lessons - 6 hours
1. React Basics - Module Intro
1:26
2. Course Introduction & Learning Philosophy
6:40
3. What we'll be building
0:58
4. Why use React?
2:56
5. ReactDOM & JSX
6:49
6. ReactDOM & JSX Practice
4:11
7. React Functional Components
3:52
8. React Functional Components Practice
5:05
9. OUT NOW: The React Bootcamp 🔥
1:53
10. Move Components into Separate Files
5:20
11. React Parent/Child Components
8:03
12. React Parent/Child Component Practice
4:53
13. React Todo App - Phase 1
2:31
14. Styling React with CSS Classes
5:00
15. Some Caveats
2:13
16. JSX to JavaScript and Back
3:53
17. React Inline Styles with the Style Property
7:05
18. React Todo App - Phase 2
3:17
19. React Props Part 1: Understanding the Concept
2:08
20. React Props Part 2: Reusable Components
2:28
21. React Props
12:05
22. React Props and Styling Practice
10:41
23. Mapping Components in React
7:57
24. Mapping Components Practice
6:25
25. React Todo App: Phase 3
4:28
26. Class-based Components
5:10
27. Class-based Components Practice
3:34
28. React State
4:51
29. React State Practice
3:32
30. React State Practice 2
4:09
31. React Todo App: Phase 4
2:01
32. Handling Events in React
3:42
33. React Todo App: Phase 5
1:13
34. React setState: Changing the State
12:15
35. React Todo App: Phase 6
7:40
36. React Todo App: Phase 6.1 😑🙄
2:42
37. React Lifecycle Methods Part 1
9:25
38. React Lifecycle Methods Part 2
3:18
39. Lifecycle Methods Part 3 - componentDidUpdate
8:34
40. React Conditional Render
11:14
41. React Conditional Render Part 2
2:50
42. React Conditional Render Practice
8:32
43. React Todo App: Phase 7
2:30
44. API Update: Please watch before proceeding
1:26
45. Fetching data from an API with React
10:55
46. React Forms Part 1
12:06
47. React Form Part 2
15:21
48. React Form Practice
20:13
49. React Container & Component Architecture
11:20
50. React Meme Generator Capstone Project
20:11
51. Writing Modern React Apps
6:03
52. Hooks Intro
1:44
53. useState() Part 1 - Creating State
7:18
54. useState() Part 2 - Changing State
7:45
55. useState() Part 3 - Changing More Complex State
8:33
56. useEffect() Part 1
8:01
57. useEffect() Part 2
10:16
58. React Project Ideas for Practicing
0:43
59. Conclusion - React Tutorial
2:50
Build a React Movie Search App
12 lessons - 55 min
1. Course Introduction
4:26
2. How To Get Your Movie DB API Key
2:10
3. Add Base Styles to Our App
5:50
4. Create Your First Component
5:58
5. Style the Search Movies Component
6:18
6. Create the Search Movies Function
6:02
7. Manage State with React useState Hook
6:29
8. Display Movie Information
7:11
9. Style the Movie Cards
2:52
10. Create the Movie Card Component (Challenge)
5:38
11. Wrap Up
1:14
12. You've completed Module 11! 🥳
0:50

Advanced React

Level up your React JS skills to a professional level.

Reusability
14 lessons - 1 hour
1. Advanced React - Module Intro
2:01
2. Code Reuse in React
4:33
3. React Children
9:18
4. Challenge: React Children
6:44
5. Higher Order Components (HOCs) Part 1
4:16
6. Higher Order Components (HOCs) Part 2
7:47
7. Challenge: Higher Order Components (HOCs)
5:38
8. Higher Order Components (HOCs) Part 3
26:00
9. Render Props Part 1
4:59
10. Render Props Part 2
13:54
11. Render Props Part 3
19:15
12. IMPORTANT: Please watch before continuing the course
0:29
13. Challenge: Render Props
7:57
14. React's Tree Rendering 🌳
4:29
Performance
5 lessons - 38 min
1. What is "Shallow Comparison"?
9:23
2. shouldComponentUpdate()
11:33
3. React.PureComponent
7:15
4. React.memo()
10:06
5. Feedback - Performance
0:20
React Context
10 lessons - 1 hour
1. Context Intro
6:24
2. Context Provider
4:01
3. contextType
7:00
4. Challenge: Context Practice 1
5:29
5. Context.Consumer
12:12
6. Challenge: Context Practice 2
3:17
7. Move Context Provider to its own component
8:41
8. Challenge: Changing Context
6:36
9. Challenge: Context Practice 3
14:08
10. Context Conclusion
4:02
React Hooks
14 lessons - 1 hour
1. Speed Typing Game Intro
2:04
2. Speed Typing Game Part 1
2:58
3. Speed Typing Game Part 2
3:58
4. Speed Typing Game Part 3
7:17
5. Speed Typing Game Part 4
6:01
6. Speed Typing Game Part 5
6:49
7. Speed Typing Game Part 6
12:57
8. useRef
5:03
9. Speed Typing Game Part 7
5:11
10. useContext()
6:38
11. Hooks Practice - refactor themeContext
5:23
12. Custom Hooks
10:22
13. Custom Hooks practice - refactor toggler
11:08
14. Speed Typing Game Part 8
6:49
React Router
15 lessons - 1 hour
1. Intro to React Router
6:35
2. React Router - BrowserRouter
3:30
3. React Router - Link
3:19
4. React Router - Switch & Route
8:03
5. Challenge: React Router
4:33
6. React Router - props passed to routed components
4:17
7. NOTE: watch this before proceeding
1:16
8. React Router Nested Routes
7:39
9. React Router useParams
14:25
10. React Router useRouteMatch
5:35
11. React Router useHistory
5:07
12. React Router useLocation
2:54
13. React Router - Redirect
7:13
14. Challenge: React Router Practice Part 1
5:02
15. Challenge: React Router Practice Part 2
7:55
Capstone Project
23 lessons - 1 hour
1. What we're building
5:20
2. Update: Please watch before proceeding
1:22
3. React Router Setup
5:30
4. Context Setup
4:06
5. Context State
1:24
6. Fetch Photos
3:39
7. Map Photos
10:24
8. Track Hover State
2:41
9. Display Icons on Hover
3:31
10. Toggle isFavorite
8:55
11. Display Favorites
3:56
12. Image propTypes
4:23
13. Add Image to Cart
3:17
14. Indicate When Image is Already in Cart
5:58
15. Remove From Cart
4:28
16. Update Header Cart Icon
3:27
17. Cart Page Setup
5:04
18. Remove Items from Cart Page
2:07
19. Calculate Total Cost
3:07
20. Place Order
3:23
21. Minor UX Improvements
5:48
22. Custom Hover Hook
8:58
23. Feedback - Capstone Project
0:20
Building Reusable React
32 lessons - 3 hours
1. Course Introduction
4:58
2. Fundamentals Part 1: Rendering and Props
20:38
3. Fundamentals Part 2: Custom Events and Props
7:52
4. Fundamentals Exercise: Badge Component
4:17
5. Controlled Components and Refs Part 1: Building an interactive form
3:48
6. Controlled Components and Refs Part 2: What does "controlled" mean?
10:15
7. Controlled Components and Refs Exercise 1: Character Counter Input
6:16
8. Controlled Components and Refs Part 3: State in Class vs Function components
7:14
9. Controlled Components and Refs Part 4: Implementing useState
13:12
10. Controlled Components and Refs Part 5: The useRef Hook
4:24
11. Controlled Components and Refs Part 6: Updating Refs with Side Effects
7:14
12. Controlled Components and Refs Part 7: Forwarding Refs
3:40
13. Controlled Components and Refs Exercise 2: Toggleable Form
15:43
14. Reducers Part 1: Why are they a part of React?
5:04
15. Reducers Part 2: How reducers work
6:40
16. Reducers Exercise 1: Expanding our reducer function
3:10
17. Reducers Part 3: The useReducer Hook
5:49
18. Reducers Part 4: useReducer vs useState
3:56
19. Reducers Part 5: Custom Hooks
4:29
20. Reducers Exercise 2: Character Sheet Application
17:12
21. Reducers Part 6: A Promise-based State Machine
15:03
22. Compound Components Part 1: A Single Data-Entry Point Component
3:45
23. Compound Components Part 2: Reordering Elements
3:32
24. Compound Components Exercise 1: Adding a disabled Property
5:10
25. Compound Components Part 3: Too many props!
2:35
26. Compound Components Part 4: What is a Compound Component?
3:01
27. Compound Components Part 5: Replacing Props with Compound Components
6:11
28. Compound Components Part 6: Sharing State with the Context API
7:36
29. Compound Components Exercise 2: Adding More Context
5:05
30. Compound Components Exercise 3: A Date Picker Compound Component
5:11
31. Course Conclusion
1:47
32. You've completed Module 12! 🥳
1:00

Building a Netflix clone

Learn how to build a Netflix clone using React

Netflix in React JS
57 lessons - 6 hours
1. Building a Netflix clone - Module Intro
2:10
2. Welcome to Building Netflix!
6:51
3. Technologies Overview
4:08
4. Compound Components
2:29
5. Application Architecture
5:51
6. Application Structure & Dependencies
9:46
7. Building the Jumbotron Component
12:09
8. Styling the Jumbotron Component
14:24
9. Housing our Jumbotron within a Container
15:32
10. Component Library Tree Shaking 🌳
8:01
11. Implementing Global Styles With Styled Components
5:20
12. Building the Footer Component
11:35
13. Styling the Footer Component
5:12
14. Building the Accordion Component
12:08
15. Styling the Accordion Component
8:43
16. Accordion Context & State
7:53
17. Building the Opt-Form Component
5:39
18. Styling the Opt-Form Component
7:52
19. Adding a Routes Constant File
1:30
20. Building out the Header Component
12:47
21. Styling the Header Component
6:37
22. Building out the Feature Component
7:15
23. Styling the Feature Component
3:15
24. Hooking our Application up to Firebase
4:22
25. Connecting our Application to Firebase
4:28
26. Building the Form Component & Sign In Page
12:10
27. Styling the Form Component & Sign In Page
9:56
28. Managing Form Validation on the Sign In Page
2:47
29. Adding the Footer to the Sign In Page
1:40
30. Creating the Sign Up Page
8:27
31. Architecting the Browse Page
8:19
32. Building out the Profile Component & Container
11:44
33. Styling the Profile Component
3:24
34. Firebase Auth Setup
1:40
35. Adding Firebase Sign Up Functionality
6:32
36. Adding Firebase Sign In Functionality
4:19
37. Adding our Header to the Browse Container
6:48
38. Adding a Feature to Our Header Component
5:27
39. Adding a Search Box to Our Header Component
6:26
40. Adding a Dropdown (Profiles) to Our Header Component
8:03
41. Profiles to Browse Page Loading Spinner
9:23
42. Hydrating Our Firestore with Data
1:48
43. Creating a Custom Firebase useContent Hook
5:00
44. Creating a Data SelectionMap Utility
4:09
45. Architecture of The Card Component
3:55
46. Adding the Card Component Skelton to Our Container
6:43
47. Building out the Card Component
13:27
48. Data Driven Card Component with Styling
16:59
49. Implementing Live Search Using Fuse.js
5:28
50. Building out the Player Component
9:29
51. Styling the Player Component
6:10
52. Creating a Custom Auth Listener Hook
6:22
53. Implementing our Custom Auth Listener Hook
1:10
54. Modifying Our App Routes to Be Protected
8:24
55. React State Update on an Unmounted Component
4:23
56. Course Conclusion
5:36
57. You have completed Module 13! 🥳
1:00

Getting hired

Learn to nail the coding interview, and get your first job.

Getting hired
3 lessons - 17 min
1. Getting hired - Module Intro
2:10
2. Getting Hired
9:21
3. Getting Hired - Problem Solving
5:59
Frontend job interview tips
23 lessons - 1 hour
1. Course Introduction
1:52
2. Falsy Values
3:06
3. const vs let vs var
4:29