Courses
All coursesFrontend PathFrontend Bootcamp

Not sure where to start?

Let us help you find your perfect course.
PricingCreate AccountLog in
Why Scrimba?
Courses
All coursesFrontend PathFrontend Bootcamp

Not sure where to start?

Let us help you find your perfect course.
Pricing
PricingCreate Account
Log in
Go Pro!

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Courses
All coursesFrontend PathFrontend Bootcamp

Not sure where to start?

Let us help you find your perfect course.

Karma

DashboardConnect to DiscordFind a courseSettingsNew scrim
Log out

The Frontend Developer Career Path

Unlock CourseGet started!

Join 14886 other students

Log in to get

Access to 30+ free courses
Interactive hands-on content
Challenge weeks - code to win!
Join a friendly community
Unlock Course
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
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 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

1. Why learning web development is a superpower
2:48
2. Let's Make a Cake!
4:54
3. Join the community
2:58
Your own personalized web app

7 lessons 15 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
7. 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)

15 lessons1 hour 7 min

1. HTML & CSS basics intro
1:37
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
15. Congrats on completing the HTML crash course!
1:29
CSS Crash Course (updated)

20 lessons1 hour 43 min

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

23 lessons1 hour 6 min

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
23. Get to know the module channels! 💜
1:34

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
1:39
2. Share your plan in #today-i-will!
0:35
3. Let's build a passenger counter app!
0:59
4. Setting up our JavaScript file
2:59
5. Write your first JavaScript variable
4:52
6. Basic mathematical operations
3:35
7. Reassigning and incrementing
3:46
8. Adding a button
1:31
9. The onclick event listener
3:25
10. Using functions to write less code
3:33
11. Write your first function
0:43
12. Write a function that logs the sum
2:46
13. Write a function that increments
1:54
14. Increment on clicks
2:08
15. Display the count
5:13
16. The Document Object Model
1:51
17. Display the count with innerText
0:39
18. Create the save button
2:05
19. What is a string?
1:33
20. Write your first string variable
3:39
21. Log a greeting to the console
1:16
22. Strings vs. Numbers
2:43
23. Render a welcome message
2:00
24. Improve the message with string concatenation
2:15
25. Use plus equal for count
0:25
26. Create the save feature
4:36
27. Debugging online
3:49
28. Set the count to 0
2:52
29. Congrats & recap
3:14
30. Share your win!
0:27
JavaScript challenges - part 1

8 lessons 20 min

1. Variables practice
1:52
2. Contatenate two strings in a function
0:58
3. Incrementing and decrementing
2:11
4. Strings and numbers
1:34
5. Rendering an error message
3:15
6. Calculator challenge
5:30
7. Figma tutorial
0:55
8. Module 3.2 - Solo Project - Unit Converter
3:48
Build a Blackjack game

55 lessons2 hours 43 min

1. Let's build a Blackjack game!
0:57
2. Live events on Scrimba
2:40
3. Add the firstCard, secondCard, and sum
0:52
4. If...else conditionals
5:39
5. Your first if...else statement
2:53
6. if/else...if/else statement
3:21
7. The if...else statement for our game
1:59
8. Add the hasBlackJack variable
2:03
9. Add the isAlive variable
1:44
10. Let's practice boolean conditions
3:25
11. Add the message variable
3:21
12. Link to stylesheet
2:32
13. Add basic styling
4:18
14. Make the start button work
5:49
15. Display the message
2:32
16. Display the sum
5:43
17. Display the cards
1:53
18. New card button
3:39
19. Add to the sum when newCard is clicked
3:16
20. Rename the startGame function
2:11
21. Solving our cards problem with an array
3:16
22. Intro to arrays
5:24
23. Array indexes
4:03
24. Arrays with multiple data types
2:18
25. Adding and removing items from arrays
4:20
26. Creating the cards array
1:04
27. Push a new card to the array
1:18
28. Counting in JavaScript
4:01
29. Write your first loop
3:22
30. For loops and arrays
3:43
31. Write you first array-based for loop
1:29
32. For loops, arrays, and DOM
2:55
33. Use a loop to render cards
2:16
34. How can we avoid to hard-code card values?
1:31
35. Returning values in functions
4:59
36. Use a function to set the card values
3:06
37. Generating random numbers with Math.random()
4:15
38. Math.random() * 6
1:43
39. Flooring the number with Math.floor()
1:24
40. Using Math.random() and Math.floor() to create a dice
1:40
41. Completing our dice function
2:37
42. Make getRandomCard() work
2:54
43. Complete getRandomNumber function
3:02
44. Assign values in the startGame function
2:42
45. Our new card feature is broken
0:59
46. The logical AND operator
3:41
47. Write your first logical operator
2:04
48. The logical OR operator
3:02
49. Only trigger newCard() if you're allowed to
1:27
50. Object sneak peek
4:32
51. Intro to objects
4:43
52. Create your first object
3:15
53. Use an object to store player data
2:37
54. Methods on object
1:58
55. Congrats & recap
4:24
JavaScript challenges - part 2

8 lessons 21 min

1. Objects and functions
2:00
2. if else
2:48
3. Loops and arrays
2:04
4. push, pop, unshift, shift challenge
3:25
5. Logical operators
1:56
6. Rock papers scissors
2:59
7. Sorting fruits
2:57
8. Module 3.4 - Solo Project - Password Generator
3:18
Build a Chrome Extension

55 lessons2 hours 46 min

1. Let's build a Chrome Extension!
4:33
2. Add button and input tag
1:33
3. Style the button and input tag
7:16
4. Make the input button work with onclick
1:17
5. Refactor to addEventListener
2:18
6. Write your first addEventListener()
1:44
7. Your turn to refactor
1:22
8. Create the myLeads array and inputEl
2:21
9. When to use let and const
3:17
10. Push to the myLeads array
1:10
11. Push the value from the input field
2:27
12. Use a for loop to log out leads
1:39
13. Create the unordered list
1:55
14. Render the leads in the unordered list
3:41
15. How to render <li> elements with innerHTML
1:33
16. Write your first innerHTML
1:31
17. More innerHTML practice
1:48
18. Render the <li> elements with innerHTML
1:07
19. Use createElement() and append() instead of innerHTML
3:35
20. Improving the performance of our app
3:17
21. Create the render function
2:00
22. Clear the input field
2:03
23. Add the <a> tag
4:28
24. Template strings
2:30
25. Write your first template string
1:15
26. Make the template string even more dynamic
0:51
27. Template strings on multiple lines
2:53
28. Refactor the app to use a template string
1:12
29. Style the list
3:50
30. Preparing the deployment
4:52
31. Deploying the Chrome Extension
2:28
32. What is localStorage?
3:02
33. Your first localStorage
3:48
34. Storing arrays in localStorage
6:23
35. Save the leads to localStorage
2:28
36. Get the leads from localStorage
3:50
37. Truthy and falsy values
7:54
38. Guess the expression - truthy or falsy?
2:22
39. Checking localStorage before rendering
3:37
40. Style the delete button
3:17
41. Make the delete button work
4:16
42. How function parameters can improve our code
5:54
43. Write your first function parameter
3:27
44. Functions with multiple parameters
3:11
45. Numbers as function parameters
1:41
46. Arguments vs Parameters
3:22
47. Arrays as parameters
1:54
48. Refactor renderLeads() to use a parameter
1:39
49. Create the tabBtn
3:19
50. Save the tab url
2:35
51. How to get the current tab?
4:19
52. Use the Chrome API to get the tab
6:18
53. Deploy the final version
2:14
54. Congrats & recap
5:43
55. Share your pet!
1:23
JavaScript challenges - part 3

6 lessons 20 min

1. let & const
3:12
2. Log out items in an array
1:17
3. save to localStorage
1:53
4. addEventListener and object in array
2:39
5. Generate sentence
4:53
6. Render images
6:05
Your personality in emojis

12 lessons 32 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
1:37
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
4:07
9. My Emojis - Pop and Shift - updated
2:50
10. My Emojis - Share It!
2:06
11. Module 3 Final Solo Project - Invoice Creator
2:50
12. Congrats on completing Module 3
4:44

CSS & JavaScript fundamentals

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

CSS Fundamentals

25 lessons2 hours 53 min

1. CSS & JavaScript fundamentals
1:37
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

21 lessons1 hour 3 min

1. CSS Fundamentals: Challenges | Introduction
1:00
2. CSS Fundamentals: Challenge #1 - Setting up the layout
1:01
3. CSS Fundamentals: Solution #1 - Setting up the layout
3:17
4. CSS Fundamentals: Challenge #2 - Google fonts
0:46
5. CSS Fundamentals: Solution #2 - Google fonts
1:40
6. CSS Fundamentals: Challenge #3 - Setting up the typography
1:20
7. CSS Fundamentals: Solution #3 - Setting up the typography
2:59
8. CSS Fundamentals: Challenge #4 - Making things a little more fancy
2:11
9. CSS Fundamentals: Solution #4 - Making things a little more fancy
7:43
10. CSS Fundamentals: Challenge #5 - Breathing Room
1:41
11. CSS Fundamentals: Solution #5 - Breathing Room
6:34
12. CSS Fundamentals: Challenge #6 - Playing with colors
1:07
13. CSS Fundamentals: Solution #6 - Playing with colors
3:05
14. CSS Fundamentals: Challenge #7 - The finer details
1:21
15. CSS Fundamentals: Solution #7 - The finer details
5:08
16. CSS Fundamentals: Challenge #8 - Creating buttons
2:57
17. CSS Fundamentals: Solution #8 - Creating buttons
5:32
18. CSS Fundamentals: Challenge #9 - Fancier headings
0:50
19. CSS Fundamentals: Solution #9 - Fancier headings
5:26
20. CSS Fundamentals: Challenge #10 - Working with what you have
2:28
21. CSS Fundamentals: Solution #10 - Working with what you have
5:01
JavaScript Challenges

24 lessons1 hour 48 min

1. How to join #power-hours
2:13
2. Build a Modal: HTML
7:01
3. Build a Modal: Buttons CSS
3:12
4. Build a Modal: Modal CSS
3:22
5. Build a Modal: Interactive Buttons
3:14
6. Build a Modal: Overlay CSS
4:38
7. Build a Modal: RGBA Colors
4:06
8. Build a Search Bar: Overview
2:42
9. Build a Search Bar: Events & toLowerCase()
6:26
10. Build a Search Bar: Capturing the user's search query
2:32
11. Build a Search Bar: Get all the names from the DOM
3:34
12. Build a Search Bar: Looping over all our names!
4:47
13. Build a Search Bar: Comparing the search query vs. the DOM names
4:54
14. Build a Carousel: Overview
3:58
15. Build a Carousel: Base HTML Structure
6:35
16. Build a Carousel: Styling the fundamentals of the carousel
6:22
17. Build a Carousel: Using translateY to get perfectly aligned buttons
3:34
18. Build a Carousel: Grabbing all carousel items and attaching button event listeners
6:35
19. Build a Carousel: Moving to the next slide
4:58
20. Build a Carousel: Looking at the for of loop
3:35
21. Build a Carousel: Hiding non-active slides
5:37
22. Build a Carousel: Moving to the previous slide
4:46
23. Build a Carousel: Smooth transitions using CSS keyframes
5:31
24. Build a Carousel: Make it your own
3:58
Build a dice game

12 lessons 40 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
12. You've completed Module 4. Well done! 🙌
1:41

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
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 our 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

23 lessons1 hour 2 min

1. Responsive Design Challenges - Introduction
0:47
2. Responsive Design: Challenge #1 - The first step toward a responsive design
1:06
3. Responsive Design: Solution #1 - The first step toward a responsive design
1:42
4. Responsive Design: Challenge #2 - Relative units
1:09
5. Responsive Design: Solution #2 - Relative Units
7:53
6. Responsive Design: Challenge #3 - Adapting the text and images
1:36
7. Responsive Design: Solution #3 - Adapting the text and images
5:26
8. Responsive Design: Challenge #4 - Some breathing room
1:44
9. Responsive Design: Solution #4 - Some breathing room
3:35
10. Responsive Design: Challenge #5 - Modifying the layout at large screens
1:13
11. Responsive Design: Solution #5 - Modifying the layout at large screens
2:38
12. Responsive Design: Challenge #6 - Color manipulation
1:29
13. Responsive Design: Solution #6 - Color manipulation
3:49
14. Responsive Design: Challenge #7 - More fun with colors
1:32
15. Responsive Design: Solution #7 - More fun with colors
5:23
16. Responsive Design: Challenge #8 - Vertical alignment
1:39
17. Responsive Design: Solution #8 - Vertical alignment
4:39
18. Responsive Design: Challenge #9 - Fixing a broken layout
1:29
19. Responsive Design: Solution #9 - Fixing a broken layout
1:38
20. Responsive Design: Challenge #10 - Horizontal alignment
1:57
21. Responsive Design: Solution #10 - Horizontal alignment
5:04
22. Responsive Design: Challenge #11 - Horizontal alignment
0:52
23. Responsive Design: Solution #11 - Horizontal alignment
3:35
Stepping up our style

38 lessons2 hours 53 min

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

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:59
2. Render the characters
4:57
3. The renderCharacter() function
4:28
4. Modify renderCharacter()
4:19
5. Aside: Object destructuring
4:10
6. Aside: Object destructuring challenge
2:47
7. Object Destructuring in renderCharacter()
1:23
8. Render multiple dice
3:29
9. The problem with for loops
3:38
10. Aside: .map()
6:54
11. Aside: .map() challenge
2:40
12. Aside: .join() challenge
5:14
13. Swap out for loop for map
3:07
14. Generate random value for dice
6:12
15. Aside: return a function
4:48
16. Render dice with random numbers
5:54
17. Aside: new Array constructor
4:10
18. Aside: .fill()
3:05
19. Aside: chaining .fill() and .map() onto a new Array
2:40
20. Use the Array constructor
2:40
21. Part 1 Outro
1:23
Build a Role-playing Game Part 2 - Constructor functions

19 lessons 57 min

1. Part 2 Intro
0:56
2. Aside: Constructor functions
7:31
3. Aside: Constructor functions challenge
2:14
4. Aside: Methods on constructor functions
3:38
5. Aside: Methods on constructor functions challenge
3:11
6. Use a constructor function 1
1:57
7. Use a constructor function 2
3:42
8. Aside: Object.assign
5:32
9. Simplify constructor function 1
1:19
10. Simplify constructor function 2
2:31
11. Problem in the constructor function!
1:37
12. Fix the broken rendering
4:24
13. Amalgamate the objects
3:17
14. Too much code for one file!
4:55
15. Export getDiceRollArray()
3:13
16. Export Character constructor
3:30
17. Running your code locally
1:54
18. Good housekeeping
1:14
19. Part 2: Outro
1:08
Build a Role-playing Game Part 3 - The Gameplay

38 lessons2 hours 13 min

1. Part 3: Intro
0:47
2. Wire up the attack button
2:10
3. Launch the first attack!
2:16
4. Dice placeholders
4:40
5. Render placeholder dice
3:34
6. Well, that's embarrassing...
1:49
7. Fix the dice render problem 1
3:11
8. Fix the dice render problem 2
2:58
9. Inflicting damage
2:30
10. Inflicting damage 2
2:54
11. Aside: array.reduce()
6:06
12. Aside .reduce() challenge
2:28
13. Use .reduce() to calculate the damage
4:02
14. Stop health going negative
2:02
15. Is the character dead?
1:47
16. Calling endGame()
2:47
17. Aside: The Ternary Operator
5:18
18. Aside: Ternary Operator challenge
3:11
19. endGame()
4:11
20. endGame() 2
4:08
21. Aside: Arrow functions
5:50
22. Aside: Arrow functions challenge
4:00
23. Aside: inline arrow function challenge
2:34
24. Using arrow functions
3:30
25. Calculate percentage health remaining
5:51
26. The health bar
2:47
27. Displaying the health bar
4:09
28. Move getPercentage out of the constructor file
1:35
29. Adding more monsters 1
4:49
30. Add new monster 2
3:43
31. Back to one monster
2:50
32. When one monster dies, another appears
5:41
33. Aside: setTimeout
2:54
34. aside setTimeout challenge
3:33
35. Improve the UX - pause time
4:28
36. Improve the UX - disable the button
5:02
37. Tidy Up
6:41
38. Part 3 Outro
0:51
Build a Role-playing Game Part 4 - Classes

7 lessons 25 min

1. Part 4 Intro
0:57
2. Aside: Classes 1
5:55
3. Aside: Classes 2
5:19
4. Aside: Classes challenge 1
1:58
5. Aside: Classes challenge 2
6:26
6. Convert the constructor function to a class
2:52
7. Outro
1:59

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 lessons1 hour

1. APIs Module Intro
4:56
2. What is an API?
8:01
3. Clients & Servers
3:29
4. Requests & Responses
5:32
5. BoredBot Intro
1:15
6. JSON Review
5:14
7. First fetch
2:51
8. .then() and Asynchronous JavaScript
2:19
9. Dog API Fetch and DOM Practice
2:51
10. Fetch idea from Bored API
2:54
11. Aside - apis.scrimba.com?
1:51
12. BoredBot - HTML
1:34
13. BoredBot - CSS
4:51
14. BoredBot - JavaScript
6:44
15. BoredBot - Extra Styling
4:18
16. Section Recap
1:29
URLs, REST, & BlogSpace

24 lessons1 hour 58 min

1. Section Intro
1:29
2. HTTP Requests
9:56
3. Requests - URLs and Endpoints
7:00
4. Requests - Methods
7:40
5. BlogSpace - GET first 5 blog posts
3:30
6. BlogSpace - Display blogs on page
4:06
7. BlogSpace - Add styling
6:35
8. BlogSpace - New post form
3:38
9. BlogSpace - Add style to form
3:02
10. BlogSpace - Form submit event listener
3:37
11. Requests - Body
5:42
12. Requests - Headers
4:32
13. BlogSpace - Send new post to server
3:08
14. BlogSpace - Add new post to list of posts
4:20
15. BlogSpace - Posts Refactor
5:42
16. BlogSpace - Reset form
4:42
17. REST
5:41
18. REST API Design
9:59
19. Nested Resources
4:54
20. URL Parameters - JSON Placeholder API
3:06
21. Query Strings
5:58
22. Query String Practice - OpenWeatherMap API
4:35
23. Module 7.2 - Solo Project - Color Scheme Generator
3:08
24. Section Recap
2:38
Async JavaScript & War

30 lessons2 hours 26 min

1. Async JS Intro & War Project
6:36
2. Callbacks Setup Challenge
2:28
3. Callback functions intro
3:38
4. Separate event listener callback
2:53
5. Callbacks - revisiting setTimeout
4:10
6. Callbacks - revisiting array.filter
7:42
7. Callbacks - make own filterArray function
6:06
8. Callbacks - put our custom filterArray function to use
4:17
9. Thought experiment: what if `fetch` used callbacks?
2:20
10. Promises
5:07
11. Context: method chaining
7:07
12. Promises - .then() chaining
3:25
13. Promises - .then()
2:11
14. Promises - passing basic values in the chain
5:18
15. War - save deckId for later use
1:45
16. War - draw 2 cards from our deck
6:19
17. War - Display our card images
3:59
18. War - Styling part 1
8:09
19. War - Styling part 2
6:46
20. War - Refactor card image placement
5:48
21. War - Determine the winning card part 1
8:32
22. War - Determine winning card part 2
5:48
23. War - display remaining cards when drawing
6:51
24. War - Display remaining cards on new deck
1:47
25. War - Disable the draw button when we get to 0 cards remaining
3:45
26. War - Keep score
4:44
27. War - Display the final winner
4:50
28. Sneak peak at ES8's Async/Await
6:47
29. Module 7.3 - Solo Project - Movie Watchlist
3:08
30. Section Recap
3:40
Promise Rejection & Capstone

25 lessons1 hour 51 min

1. Section Intro
1:45
2. Dashboard wireframe
2:15
3. Get photo from Unsplash
4:13
4. Add Author Info
3:46
5. Choosing a layout method
2:46
6. Set up flexbox
5:35
7. Promises review
4:59
8. Promise rejection
6:13
9. Promise rejection practice
3:32
10. Crypto - Add cryptocurrency data
3:36
11. Crypto - Get Dogecoin data
2:10
12. Check for error responses
7:00
13. Crypto - Display name and icon
4:37
14. Crypto - get prices
4:22
15. Time - Add current time with JavaScript
7:44
16. Time - Display time on page
3:50
17. Weather - start
6:16
18. Thought experiment - getCurrentLocation as a promise-based API?
2:40
19. Weather - Get user's current weather
4:46
20. Weather - Add icon
4:24
21. Weather - Add temp and city
2:52
22. Weather - CSS
8:07
23. Chrome extension time!
8:10
24. Module Outro
4:26
25. 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 lessons1 hour 20 min

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 lessons1 hour 37 min

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 lessons1 hour 9 min

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 lessons2 hours 24 min

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.

Build a React info site

29 lessons2 hours 24 min

1. Welcome to an Introduction to React!
3:25
2. What we'll learn
3:38
3. First React
8:02
4. First React Practice
1:48
5. Local setup (the quick way)
1:57
6. Why React? It's Composable!
4:47
7. Why React? It's declarative
4:42
8. JSX
9:39
9. Goodbye, CDNs!
4:05
10. Thought experiment: use .append() instead of ReactDOM.render()?
5:28
11. Project part 1 - markup
4:44
12. Pop quiz!
5:08
13. Custom Components
6:55
14. Custom Components part 2
3:57
15. Custom Components Quiz
2:47
16. Parent/Child Components
4:54
17. Styling with Classes
6:43
18. Organize components
7:41
19. Set up a local React environment with Create React App
8:21
20. Styles and images with CRA
4:29
21. Quick mental outline of project
3:54
22. Project setup
7:13
23. Quick Figma Walkthrough
1:40
24. Navbar & Styling
7:16
25. Main Section
7:44
26. Color the bullets
2:23
27. Add background logo
4:17
28. Section 1 Solo Project
3:52
29. Section 1 Recap
2:37
Build an AirBnb Experiences clone

27 lessons2 hours 12 min

1. Section intro & Figma file
4:11
2. Project setup: Navbar
5:40
3. Project setup: Hero
5:46
4. Project: Card Component
7:18
5. Problem - not reusable
1:55
6. Props Part 1: Understanding the Concept
3:17
7. Props Part 2: Reusable Components
1:56
8. Aside: JS inside JSX
6:50
9. Props part 3: Create a contact component
8:28
10. Props part 4: receiving props in a component
5:28
11. Prop quiz! (Get it?? 😆)
4:25
12. Destructuring props
3:53
13. Props practice
9:03
14. Passing in non-string props
3:57
15. Project: pass props to card component
6:55
16. Review - array .map()
7:27
17. React renders arrays
4:29
18. Mapping components
4:32
19. Map quiz!
3:38
20. Loading images from .map()
1:34
21. Project: Map experiences data into components
5:20
22. Project: key prop
3:29
23. Project: Sold Out Badge
9:06
24. Project: Pass object as props
4:25
25. Project: Spread object as props
3:54
26. Section 2 Solo Project (NEW)
3:22
27. Section 2 recap
1:42
Build a meme generator

64 lessons5 hours 7 min

1. Section Intro & Figma file
4:17
2. Meme Generator: Header
5:08
3. Meme Generator: Form
6:01
4. Project analysis
1:04
5. Event Listeners
6:07
6. Project: Get random meme
5:42
7. Our current conundrum
8:09
8. Props vs. State: Props
5:08
9. Props vs. State: State
4:28
10. Props vs. State Quiz!
4:03
11. useState
3:52
12. useState array destructuring
1:46
13. Changing state
3:03
14. useState - Counter practice
5:45
15. useState - Changing state with a callback function
4:18
16. Changing state quiz!
2:30
17. Project: Add images to the meme generator
2:56
18. Challenge: ternary practice
3:50
19. Challenge: flipping state back and forth
5:59
20. Complex state: arrays
10:28
21. Complex state: objects
3:58
22. Complex state: updating state objects
6:35
23. Project: Refactor state
4:10
24. Passing state as props
5:52
25. Setting state from child components
6:28
26. Passing data around
6:26
27. Boxes challenge part 1
3:49
28. Dynamic styles
5:42
29. Boxes challenge part 2
3:37
30. Boxes challenge part 3.1 - local state
4:54
31. Boxes challenge part 3.2 - unified state
7:45
32. Boxes challenge part 4
5:50
33. Boxes challenge part 5
5:57
34. Conditional rendering: &&
6:36
35. Conditional rendering: && practice
1:45
36. Conditional rendering: ternary
2:49
37. Conditional rendering practice
4:45
38. Conditional rendering quiz!
3:56
39. React forms intro
3:25
40. Watch for input changes in React
4:30
41. Form inputs practice
2:22
42. Forms state object
6:09
43. Form state object practice
1:49
44. Controlled inputs
4:14
45. Forms in React: Textarea
3:33
46. Forms in React: Checkbox
6:39
47. Forms in React: Radio buttons
6:00
48. Forms in React: Select & Option
2:49
49. Forms in React: Submitting the form
4:31
50. Forms quiz!
3:13
51. Sign up form practice
8:26
52. Project: Add text to image
3:58
53. Making API calls
4:00
54. Intro to useEffect
5:43
55. useEffect() syntax and default behavior
2:59
56. useEffect dependencies array
8:01
57. useEffect quiz!
3:48
58. useEffect for fetching data
5:48
59. useEffect: when to use dependencies
3:02
60. Project: Get Memes from API
8:11
61. State and Effect practices
7:02
62. useEffect cleanup function
5:53
63. Using an async function inside useEffect (Clone)
3:07
64. Section 3 Recap
2:17
Build a notes app and Tenzies games

28 lessons2 hours 2 min

1. Section 4 Intro
2:33
2. Warm-up: Add Dark/Light modes to ReactFacts site
6:39
3. Notes App: Intro
9:55
4. Notes App: Features to add
1:25
5. Notes App: Sync notes with localStorage
5:59
6. Lazy State Initialization
5:12
7. Notes App: Note summary title
4:51
8. Notes App: Bump recent note to the top
6:49
9. Notes App: Delete note
8:59
10. Tenzies Project Intro
1:18
11. Tenzies: Setup
3:26
12. Tenzies: Die components
6:50
13. Tenzies: Generate array of 10 random numbers
3:53
14. Tenzies: Map array to Die components
3:08
15. Tenzies: Roll dice button
4:41
16. Tenzies: Change dice to objects
4:32
17. Tenzies: Styling held dice
3:38
18. Tenzies: Hold dice part 1
5:17
19. Tenzies: Hold dice part 2
3:09
20. Tenzies: Hold dice part 3
4:01
21. Tenzies: End game part 1
2:35
22. Tenzies: End game part 2
4:55
23. Tenzies: End game part 3
4:15
24. Tenzies: New Game
3:12
25. Tenzies: Extra Credit Ideas
1:35
26. Section 4 Solo Project
2:55
27. Check out the class components crash course!
1:06
28. Congrats!
5:53

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
3:31
2. Intro to class components
3:55
3. Class components practice
3:10
4. State in class components
3:07
5. Setting state in class components
6:17
6. Challenge: convert to a class component with state
5:58
7. Constructor method in class components
7:55
8. Challenge: constructor method
2:09
9. Updating complex state with this.setState()
6:52
10. Lifecycle Methods Intro
2:49
11. Lifecycle methods: componentDidMount() 👶
6:30
12. Lifecycle methods: componentDidUpdate() part 1 ✏️
6:39
13. Lifecycle methods: componentDidUpdate() part 2 ✏️
6:30
14. Lifecycle methods: componentWillUnmount() 🪦
4:08
15. Other Lifecycle Methods
3:25
Reusability

13 lessons1 hour 55 min

1. Code Reuse in React
4:33
2. React Children
9:18
3. Challenge: React Children
6:44
4. Higher Order Components (HOCs) Part 1
4:16
5. Higher Order Components (HOCs) Part 2
7:47
6. Challenge: Higher Order Components (HOCs)
5:38
7. Higher Order Components (HOCs) Part 3
26:00
8. Render Props Part 1
4:59
9. Render Props Part 2
13:54
10. Render Props Part 3
19:15
11. IMPORTANT: Please watch before continuing the course
0:29
12. Challenge: Render Props
7:57
13. 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 lessons1 hour 11 min

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 lessons1 hour 32 min

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 lessons1 hour 27 min

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 lessons1 hour 41 min

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

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
Using LinkedIn to get a job

12 lessons 27 min

1. Course Introduction (new)
1:56
2. Optimizing your headline
2:00
3. Crafting a great summary
4:15
4. Adding a professional headshot
1:37
5. Adding an awesome cover image
1:40
6. Increasing your visibility
2:27
7. Adding past work experience
2:35
8. Highlighting your accomplishments
3:00
9. Optimizing your keywords
2:37
10. Getting connected
2:04
11. Getting recommendations (new)
2:26
12. Outro
0:38
Frontend job interview tips

22 lessons1 hour 40 min

1. Course Introduction
1:52
2. Falsy Values
3:06
3. const vs let vs var
4:29
4. Double vs triple equal
2:11
5. map() vs filter() vs reduce()
6:45
6. undefined vs null
2:54
7. Data Types
1:58
8. Spread & Rest Operators
5:55
9. Destructuring Objects and Arrays
3:29
10. Git Fundamentals
2:51
11. Agile & Scrum
4:31
12. CSS Selectors
2:45
13. Responsive Design
2:18
14. Number Issues
1:52
15. Promises
5:20
16. Pass by value vs pass by reference
3:09
17. Five questions to be prepared for
5:35
18. Five preparation tips
5:54
19. Got any questions for me?
6:20
20. GitHub tips
4:08
21. Resume tips
14:38
22. Job search strategy
8:00
JavaScript interview questions

22 lessons 34 min

1. Course intro
1:43
2. Introduction: Pangram check function
0:54
3. Solution: Pangram check function
3:06
4. Introduction: API array methods
0:32
5. Solution: API array methods
2:57
6. Introduction: Rain language translator
0:46
7. Solution: Rain language translator
2:16
8. Introduction: Write isogram check function
0:42
9. Solution: Write isogram check function
3:20
10. Introduction: Write leap year check function
0:45
11. Solution: Write leap year check function
2:20
12. Introduction: Write run length encoding/decoding function
0:44
13. Solution: Write run length encoding/decoding function
3:01
14. Introduction: Remove duplicates from array with reduce()
0:26
15. Solution: Remove duplicates from array with reduce()
2:10
16. Introduction: Implement array map with reduce()
0:39
17. Solution: Implement array map with reduce()
2:35
18. Introduction: Flatten array with reduce()
0:42
19. Solution: Flatten array with reduce()
2:25
20. Introduction: Transpose matrix
0:31
21. Solution: Transpose matrix
1:29
22. Wrap up
0:27
React interview questions

12 lessons 41 min

1. React Interview Questions Course Introduction
1:54
2. The Virtual DOM
4:18
3. React Limitations
4:19
4. JSX
4:04
5. Props
3:10
6. State and Lifecycle
4:35
7. Effects
3:25
8. Refs
2:26
9. Context
3:13
10. Miscellaneous (but important!) Questions
7:49
11. React Interview Questions Course Conclusion
1:20
12. Congrats on completing the Career Path!
1:08

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

screenshot
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.

screenshot
Blackjack game

Your first JavaScript game will be Blackjack, the iconic Casino game that's loved by millions.

screenshot
Dice game

Take your JavaScript up a notch by building this fun dice game.

screenshot
BBQ page

Hone your UI design skills by building a slick BBQ landing page

screenshot
Pac-Man

Build the legendary game from the old age of computers.

screenshot
Bored Bot

Never be bored again - build a bot to give you entertainment ideas using an API.

screenshot
A personal portfolio

A beautiful portfolio to show off to potential employers.

screenshot
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.

screenshot
AirBnB

You'll take your React skills to the next level by creating an AirBnB Experiences clone.

screenshot
Meme generator

In section 3, Bob Ziroll guides you through building his classic meme generator, updated with the newest React features.

screenshot
Tenzies game

Your first React game will be the popular dice game, Tenzies.

screenshot
Photo store

Build a neat eCommerce site that pulls all your new React knowledge together.

Profile image of teacher Per Harald Borgen
Profile image of teacher Karl Hadwen
Profile image of teacher Kevin Powell
Profile image of teacher undefined
Profile image of teacher Gary Simon
Profile image of teacher Bob Ziroll
Profile image of teacher undefined
Profile image of teacher Cassidy Williams
Profile image of teacher Leanne from Scrimba

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 oracle to the Q
What 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 [email protected] 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 [email protected]

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 [email protected]

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 [email protected] We’d be happy to help.

HomePlans & PricingGift membershipScholarship ProgramTeacher talent program

Community

Explore the communityCommunity HandbookPodcastYouTube Blog

Courses

All courses Free coursesPro coursesFrontend PathSelf-paced Bootcamp

Company

About usSupport centerTermsPrivacyBuilt with Imba