The Frontend Developer Career Path

Offered By: Scrimba

Course Description

Overview

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.

HTML
CSS
JavaScript
React
APIs
Web architecture
Responsive design
Web design
UI Design
Git
The job search
Getting hired
Coding interviews

Syllabus

Getting started

1. Why learning web development is a superpower
2. Let's Make a Cake!
3. Join the community

Your own personalized web app

1. Add your Name and Emoji
2. Display Photos
3. Change the Background Image
4. Choose a Color
5. Set the Font, Border, and Column Count
6. Share your website
7. Two ways to do the path

Build & deploy your first website

1. Module 2 intro - web dev basics
2. HTML tags
3. Write a news article!
4. Aside: Proper HTML heading structure
5. Aside: The tag
6. Aside: Nesting
7. Internet superpowers -> Change the BBC news!
8. Aside: Buttons
9. Aside: Input tags
10. Let's build Google!
11. Aside: Anchor tags
12. Add an anchor tag to Google.com
13. Aside: Proper document structure
14. Aside: Lists
15. Aside: Description lists
16. Build a Personal Website
17. Deploy your Personal Website
18. A quick intro to Web Standards (Updated)
19. Recap
20. Get to know the module channels! ð

Build a Google.com clone

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

1. Building your digital business card
2. Fix the image path
3. More on Relative Paths
4. Add alt attribute
5. Make image smaller
6. Add a border and padding
7. Aside: flexbox child containers
8. Flex item containers
9. Add a utility class
10. Justify the items
11. Center the card
12. Aside: inheritance (Updated)
13. Center the text via inheritance
14. Add colors
15. Web-safe fonts
16. Aside: margin/padding shorthand
17. Use the margin&padding shorthands
18. Make it your own!
19. Deploy your Digital Business Card
20. Git & GitHub Intro
21. Business Card recap

Build a Space Exploration site

1. Let's go to space!
2. Add a background image from unsplash
3. Center elements and style button
4. Aside: Google Fonts
5. Aside: @font-face
6. Aside: @font-face performance and usability
7. Aside: spans
8. Add an underline using a span
9. Use an ID for the logo
10. Replace the jpg with a webp
11. Aside: Replaced elements
12. Choose a color palette from an image
13. Add the terms & conditions section
14. Aside: text shadow
15. Improving the readability with text shadows
16. HTML lang attribute
17. Space Exploration recap

Build a Birthday GIFt Site

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 (Updated)
13. Add the hover effect
14. Create the next GIFt
15. Create two more GIFts
16. Create the final GIFt
17. ARIA roles and attributes for background images
18. Add the footer
19. Add a background gradient
20. The em and strong tags
21. Intro to audio and video part 1
22. Intro to audio and video part 2
23. Intro to audio and video part 3 (updated)
24. HTML tables
25. Personalize, deploy and share to Discord
26. GIFt site recap

Solo Project: Hometown Homepage

1. It's time to go solo!
2. Solo Project: Hometown Homepage
3. Get a code review!
4. Code Review by Guil Hernandez
5. Congratulations on completing Module 2! ð¥³

Build a passenger counter app

1. Making Websites Interactive - Module Intro
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. Escape!
24. Render a welcome message
25. Improve the message with string concatenation
26. Use plus equal for count
27. Create the save feature
28. Debugging online
29. Set the count to 0
30. Personalize and Download Your App
31. Deploy with Netlify
32. Congrats & recap
33. Share your win!

JavaScript challenges - part 1

1. Variables practice
2. Concatenate two strings in a function
3. Incrementing and decrementing
4. Strings and numbers
5. Rendering an error message
6. Calculator challenge
7. Arithmetic Operator Precedence
8. Figma tutorial
9. Solo Project (PRO) - Basketball Scoreboard
10. Build exclusive Solo Projects

Set Up a Local Dev Environment

1. Section Intro
2. Getting Started with GitHub Desktop
3. Edit with VS Code and Push to GitHub
4. Deploy and Share Your Solo Project

Build a Blackjack game

1. Let's build a Blackjack game!
2. Add the firstCard, secondCard, and sum
3. If...else conditionals
4. Your first if...else statement
5. if/else...if/else statement
6. The if...else statement for our game
7. Aside: Booleans
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. Aside: Intro to arrays
23. Aside: Array indexes
24. Arrays with multiple data types
25. Aside: Array.push() and .pop()
26. Creating the cards array
27. Push a new card to the array
28. Aside: Loops
29. Write your first loop
30. Aside: 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. Aside: Returning values in functions
36. Use a function to set the card values
37. Aside: 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. Aside: The AND operator (&&)
47. Write your first logical operator
48. Aside: The OR operator (||)
49. Only trigger newCard() if you're allowed to
50. Object sneak peek
51. Aside: 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

1. Objects and functions
2. if else
3. Loops and arrays
4. push, pop, unshift, shift challenge
5. Logical operators
6. Rock papers scissors
7. EmojiFighter
8. Sorting fruits
9. Solo Project (PRO) - Password Generator

Build a Chrome Extension

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
elements with innerHTML
16. Write your first innerHTML
17. More innerHTML practice
18. Render the
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. Aside: another way to render leads
24. Add the tag
25. Template strings
26. Write your first template string
27. Make the template string even more dynamic
28. Template strings on multiple lines
29. Refactor the app to use a template string
30. Aside: Convert strings to numbers with Number()
31. Style the list
32. Preparing the deployment
33. Deploying the Chrome Extension
34. Aside: What is localStorage?
35. Your first localStorage
36. Storing arrays in localStorage
37. Save the leads to localStorage
38. Get the leads from localStorage
39. Aside: Truthy and falsy values
40. Guess the expression - truthy or falsy?
41. Checking localStorage before rendering
42. Style the delete button
43. Make the delete button work
44. How function parameters can improve our code
45. Write your first function parameter
46. Functions with multiple parameters
47. Numbers as function parameters
48. Aside: Arguments vs Parameters
49. Arrays as parameters
50. Refactor renderLeads() to use a parameter
51. Create the tabBtn
52. Save the tab url
53. How to get the current tab?
54. Use the Chrome API to get the tab
55. Deploy the final version
56. Congrats & recap
57. Share your pet!

JavaScript challenges - part 3

1. let & const
2. Log out items in an array
3. save to localStorage
4. addEventListener and object in array
5. Generate sentence
6. Render images
7. Rounding numbers
8. Convert string to number challenge
9. Solo Project (PRO) - Unit converter

Build a Mobile App

1. Let's Build a Mobile App with Firebase
2. Setting up app skeleton
3. Adding CSS
4. Aside: Firebase Realtime Database
5. Adding Firebase to project
6. Security Rules
7. innerHTML to append li to ul
8. Refactoring
9. Aside: Turning an Object into an Array
10. Aside: Fetching database items in realtime using onValue
11. Updating items in realtime
12. For loop to render database items
13. Let's smash the bug
14. Aside: Flexbox flex-wrap
15. Aside: Flexbox gap
16. Adding CSS for
to wrap items
17. Getting ID of item in database
18. Replacing innerHTML with createElement
19. Aside: Removing items from Firebase
20. Removing an item when clicked
21. Only fetching items from database if snapshot exists
22. Adding hover styles to buttons
23. Accessibility fix
24. Aside: user-select
25. Don't over-use user-select!
26. Aside: Setting the viewport
27. Making the app more mobile-friendly
28. Aside: Favicon
29. Adding favicon and phone icons
30. Aside: Web Application Manifest
31. Turning web app into "mobile" app
32. Personalise your app
33. Deploy to Netlify
34. Add app to home screen
35. Share your creation
36. Recap
37. Solo Project (PRO) - We are the Champions
38. Congrats on completing the Learn JavaScript course!

Build an NFT Site

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. CSS specificity and !important keyword
25. Aside: Buttons/Links
26. Style the buttons individually new
27. Aside: Inline-block
28. space out the buttons
29. Aside: A main class and a modifier class
30. Refactor the buttons
31. Aside: Flexbox flex-wrap
32. Aside: Overflow
33. Aside: CSS float
34. Outro

CSS Fundamentals: Challenges

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

Build a Coworking Space Site

1. Intro
2. Build the foundations
3. Aside: margin: auto on flexbox children
4. Position the menu icon
5. Aside: Position: relative & absolute
6. Add the image banner
7. Add buttons
8. Stop the vertical stretch on the button
9. Aside: Position Fixed
10. Add the chatbox
11. Aside: z-index
12. z-index challenge
13. Outro
14. You've completed Module 4. Well done! ð

The World's Most Annoying Cookie Consent

1. Module 5 intro
2. Cookie Consent Intro
3. Position the modal
4. Aside: setTimeout
5. Set the timer
6. Aside: element.style
7. Make the modal reappear
8. Close the modal
9. Aside: Forms
10. Add a form 1
11. Aside: Forms - submitting
12. Aside: Forms - challenge
13. Aside: Validation Attributes
14. Submit the form
15. Aside: preventDefault
16. preventDefault Challenge
17. Buttons in forms - weird behaviour
18. Add modal message
19. Add modal messages 2
20. Add modal messages 3
21. Aside: FormData
22. Form Data 1
23. Aside: FormData methods
24. Form Data 2
25. Aside: Disabling elements
26. Disable the close button
27. There is no choice 1
28. Aside: classlist.toggle
29. Aside: Classlist Toggle Challenge
30. There is no choice 2
31. Accessibility Issues
32. Recap

Pumpkin's Purrfect Meme Picker

1. Intro
2. What a horrible for loop
3. Aside: for of
4. Use a for of
5. Nest the for of
6. Render out the emotions 1
7. Render out emotions 2
8. Aside: import the data
9. Import the data
10. Aside: Radio Inputs
11. Render the radios inputs
12. Aside: .includes()
13. remove duplicates
14. Aside: e.target
15. Get the id of the clicked option
16. Aside: parentElement
17. Aside: classlist add/remove
18. Add colour to the selected emotion
19. Aside: getElementsByClassName
20. Remove the highlight class
21. Aside: querySelector and why it's useful
22. Connect the button
23. Has an emotion been chosen?
24. Aside: checkbox
25. isGif
26. Aside: filter()
27. Aside: filter() 2
28. Find matches with .filter()
29. Animated GIFs Only
30. Introducing two important functions
31. If there's only one cat...
32. If there's more than one cat...
33. renderCat()
34. Close the modal
35. The order of things
36. Aside: Select Element
37. Recap
38. Get expert feedback on your JavaScript and build exclusive projects

Twimba: Twitter Clone

1. Intro
2. Import the data
3. Aside: TextArea
4. Add TextArea
5. Tweet Boilerplate
6. Tweet Boilerplate Challenge
7. Aside: forEach()
8. Use forEach to build the html
9. Render the tweets to the feed
10. Aside: CDN Font Awesome
11. Add some awesome icons
12. Like a tweet part 1: explanation
13. Aside: Data attributes new
14. Aside: Data Attr JS and Challenge
15. Aside: Data Attribute Naming Issues
16. Like a tweet part 2: data attributes
17. Like a tweet part 3: eventListener
18. Like a tweet part 4: handleLikeClick()
19. Like a tweet part 5: find the tweet object
20. Aside: Copying objects and arrays
21. Like a tweet part 6: render the increment
22. Unlike a tweet
23. Flip a boolean
24. Retweet a tweet
25. Aside: Conditionally render CSS class
26. Color the icons
27. Replies 1: get uuids of tweets with replies
28. Replies 2: HTML string for replies and add to parent div
29. Replies 3: toggle hidden
30. Refactor the tweet btn
31. Aside: UUID
32. Build the new Tweet object
33. Render a new tweet
34. UX fixes
35. Recap
36. Deploy Twimba

Essential JS Mini Projects

1. Intro to Mini Projects
2. Object Destructuring
3. Object Destructuring Challenge
4. The .map() Method
5. The .map() Method Challenge
6. The .join() Method
7. The .join() Method Challenge
8. .map() vs .forEach()
9. For loop Break and Continue
10. The dangers of innerHTML
11. Beyond Function Declarations 1: Function Expressions
12. Beyond Function Declarations 2: Function Expression Challenge
13. Beyond Function Declarations 3: Arrow Functions
14. Arrow Functions Challenge
15. Inline Arrow Functions Challenge
16. Import Export (named)
17. Import Export (default)
18. The .reduce() Method
19. The .reduce() Method Challenge
20. The .reduce() Method with Objects
21. The .reduce() Method with Objects Challenge
22. Default Parameters
23. Super Challenge Set-up
24. Super Challenge Solution
25. The Ternary Operator
26. The Ternary Operator for Complex Conditionals
27. Ternary Operator Challenge
28. Twimba Ternary Refactor
29. The Rest Parameter
30. The Rest Parameter Challenge
31. Spread Syntax (...)
32. Spread Syntax (...) Challenge
33. Short-circuiting with OR (||)
34. Short-circuiting with OR (||) Challenge
35. Short-circuiting with AND (&&)
36. Short-circuiting with AND (&&) Challenge
37. Switch Statements (new)
38. Constructors: Date()
39. The Error() Constructor
40. Objects with Methods and 'this'
41. Objects to Constructor Functions
42. Constructor Function Challenge
43. Constructor Functions to Classes
44. Constructor Functions to Classes Challenge
45. Debugging: Errors (new)
46. Debugging: console.error
47. Debugging: try...catch
48. Recap
49. Solo Project - Restaurant Ordering app
50. Deploy your Solo Project
51. Congratulations on completing module 5! ð

Build a Responsive Site

1. Module intro
2. Responsive site intro
3. Thinking responsively
4. Aside: Relative units and percentages
5. Create flexible containers with percentage units
6. Controlling the width of images
7. Set width constraints with max-width
8. Aside: The em unit
9. Set font sizes with em
10. Aside: Margin and padding with em
11. Set margin and padding with em
12. Aside: The compounding issue with em
13. Aside: The rem unit
14. Change font sizes to rem
15. Text line height
16. How do you decide which unit to use?
17. Aside: Media queries
18. Add media queries to your site
19. Think âmobile-firstâ
20. Mobile-first in action
21. Common Breakpoints
22. Add a new breakpoint
23. Adapt the buttons for smaller screens
24. Adjust font size for smaller screens
25. Create a mobile-first navigation
26. Challenge: Narrow screens
27. Challenge: Wider screens
28. Solution: Wider screens
29. The viewport meta tag
30. Aside: Create a flexbox image grid
31. Wrap the featured items with flexbox
32. Recap
33. Deploy your site to Netlify

Build a Product Splash Page

1. Product splash page intro
2. Style the intro container
3. Style main content
4. Style the text
5. Aside: Transform text
6. Uppercase text
7. Add a breakpoint for wider screens
8. Aside: Viewport units
9. Viewport sized intro container
10. Adjust content for wider screens
11. Apply a full background image
12. Style the form inputs
13. Style the focus state
14. Style the submit button
15. Button modifiers
16. Aside: Reordering flex items
17. Adjust visual order of the intro text
18. Adjust line length
19. Aside: Control the size of elements with box-sizing
20. Apply box-sizing to the page
21. Product splash page recap
22. Deploy your splash page to Netlify

Build a Responsive Layout with CSS Grid

1. Intro
2. Starter Code
3. Aside: Grid Columns and Gap
4. Aside: fr units
5. The Mobile Layout
6. Aside: Grid rows and implicit grid
7. Aside: Span
8. Tablet view with span
9. Aside: Repeat function
10. Aside: grid lines
11. Laptop view with grid lines
12. Aside: grid template areas and Dev Tools
13. Convert to grid template areas
14. Aside: A responsive image grid
15. Aside: grid-auto-flow: dense and MinMax
16. Use minmax
17. The header and footer
18. Outro

Solo Project: Learning Journal

1. Solo Project - Learning Journal
2. Access exclusive responsive design Solo Projects
3. Deploy your learning journal project
4. You've completed module 6! ð¥³

Code reviews

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

1. Introduction to Branching and Pull Requests
2. Make an Issue in GitHub
3. Creating a Branch
4. Creating a Pull Request
5. Resolving Merge Conflicts
6. Pulling
7. SSH/GPG Keys in GitHub

Intro to APIs & BoredBot

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. BoredBot - Improve A11y
17. Section Recap

URLs, REST, & BlogSpace

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

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. A quick look at Async/Await
29. Solo Project - Movie Watchlist
30. Unlock exclusive API projects and code reviews
31. Section Recap

Promise Rejection & Capstone

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. Quick update - Modern CSS
25. Update - using await
26. Update - try...catch
27. Module Outro

Intro to UI design

1. Welcome to Learn UI Design
2. Course Introduction
3. White Space
4. Alignment
5. Design Challenge: 1
6. Contrast
7. Scale
8. Design Challenge: 2
9. Typography
10. Color
11. Design Challenge: 3
12. Visual Hierarchy
13. Design Challenge: 4
14. The Final Challenge
15. Closing Thoughts

Build A Simple Layout

1. Building a simple layout - intro
2. Keeping it Ultra Simple
3. Making our Layout Dark
4. Challenge 1
5. Multi-Columns
6. Working with Photographs
7. Final Chapter Lesson

Full Project Refactoring

1. Project Refactoring: Introduction & Defining the HTML
2. Fixing the Color & Contrast
3. Fixing the Type & Visual Hierarchy
4. Fixing White Space
5. Initial Media Queries
6. Tablet Media Queries
7. Desktop Media Query
8. Aside: Common Design & Non-dev Roles

Build a React info site

1. Introduction to React
2. What we'll learn
3. First React
4. First React Practice
5. Local setup (the quick way)
6. Libraries/Frameworks
7. Why React? It's Composable!
8. Why React? It's declarative
9. JSX
10. Drag and Drop Deploy with Netlify
11. Get detailed reviews of your React projects â Scrimba Bootcamp
12. Goodbye, CDNs!
13. UPDATE: New React 18 createRoot API
14. Thought experiment: use .append() instead of ReactDOM.render()?
15. Project part 1 - markup (Update)
16. Pop quiz!
17. Custom Components
18. Custom Components part 2
19. Custom Components Quiz
20. Parent/Child Components
21. Styling with Classes
22. Organize components
23. Run React locally with Vite
24. Quick mental outline of project
25. Project setup
26. Quick Figma Walkthrough
27. Navbar & Styling
28. Main Section
29. Color the bullets
30. Add background logo
31. Solo Project (PRO) - Digital Business Card
32. Deploy Your React App with Netlify
33. React Section 1 Recap

Build an AirBnb Experiences clone

1. Section intro & Figma file
2. Project setup: Navbar
3. Project setup: Hero
4. Project: Card Component
5. Update: A11Y Audit
6. Problem - not reusable
7. Props Part 1: Understanding the Concept
8. Props Part 2: Reusable Components
9. Aside: JS inside JSX
10. Props part 3: Create a contact component
11. Props part 4: receiving props in a component
12. Prop quiz! (Get it?? ð)
13. Destructuring props
14. Props practice
15. Passing in non-string props
16. Project: pass props to card component
17. Review - array .map()
18. React renders arrays
19. Mapping components
20. Map quiz!
21. Loading images from .map()
22. Project: Map experiences data into components
23. Project: key prop
24. Project: Sold Out Badge
25. Project: Pass object as props
26. Project: Spread object as props
27. Solo Project (PRO) - Travel Journal
28. React Section 2 Recap

Build a meme generator

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

Build a notes app and Tenzies games

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. Update to Notes app - adding Firebase! ð¥
11. Updating to Vite
12. Small refactors
13. Local Setup
14. Firebase Intro & Setup
15. Firebase Code Setup
16. onSnapshot - part 1
17. onSnapshot - part 2
18. Create new blank note
19. Delete Note
20. Update note - part 1
21. Update note - part 2
22. Challenge: createdAt and updatedAt
23. Challenge: sort notes
24. Debouncing updates - part 1
25. Debouncing updates - part 2
26. Debouncing updates - part 3
27. Tenzies Project Intro
28. Tenzies: Setup
29. Tenzies: Die components
30. Tenzies: Generate array of 10 random numbers
31. Tenzies: Map array to Die components
32. Tenzies: Roll dice button
33. Tenzies: Change dice to objects
34. Tenzies: Styling held dice
35. Tenzies: Hold dice part 1
36. Tenzies: Hold dice part 2
37. Tenzies: Hold dice part 3
38. Tenzies: End game part 1
39. Tenzies: End game part 2
40. Tenzies: End game part 3
41. Tenzies: New Game
42. Tenzies: Extra Credit Ideas
43. Solo Project (PRO) - Quizzical
44. Check out the class components crash course!

Reusability

1. Advanced React Intro
2. Button - props review challenge
3. Aside - children in HTML
4. Aside - React Children
5. Challenge - Button w/ Children
6. Button - More Complex React Children
7. Challenge - add onClick event listener
8. Aside - props spreading
9. Aside - Destructuring props
10. Button - size prop
11. Button - fix className issue
12. Challenge - Button w/ Variants
13. Mega Challenge - Overloaded Avatar Component
14. Menu Component Intro
15. Prop Drilling
16. Aside: Compound Components Intro
17. Compound Components in React - Part 1
18. Compound Components Quiz
19. Compound Components in React - Part 2
20. Compound Components in React - Part 3
21. Summarize Challenge - Compound Components in React
22. Prop Drilling Problem #2 - Implicit State
23. The React.Children API
24. React.Children shortcomings
25. Context Intro
26. createContext() & Context Provider
27. useContext()
28. Add context to the Menu component
29. State + Context
30. Theme switcher final touches
31. Menu component final touches
32. A11y in menu component
33. Aside - Compound components w/ dot syntax
34. Headless Toggle component
35. Toggle - setup
36. Toggle - Planning
37. Toggle Context
38. Toggle.Button
39. Toggle.On & Toggle.Off
40. Remove Star component
41. Use Toggle with Menu component
42. Composing new components with Toggle
43. onToggle event listener
44. Menu onClose event
45. Intro to Refs
46. Refs and DOM manipulation
47. Fix onToggle bug using refs
48. Fix missing onToggle bug using a noop function
49. Render Props Part 1
50. Render Props Part 2
51. Render Props Part 3
52. Render Props Part 4 - children as render props
53. Toggle.Display intro
54. Toggle.Display
55. Custom Hooks Intro
56. Custom Hooks - useEffectOnUpdate
57. Custom Hooks - useToggle
58. Custom Hooks - useToggle part 2
59. Custom Hooks - useToggle part 3
60. Custom Hooks - useToggle part 4
61. Custom Hooks - useToggle part 5
62. Custom Hooks - useToggle part 6
63. Custom Hooks - useToggle part 7
64. Custom Hooks - useToggle part 8
65. Custom Hooks - useToggle part 9
66. Reusability section recap
67. Solo Project - Component Library++

React Router 6

1. Introduction to React Router 6
2. Multi-page vs single-page apps
3. React Router Setup & BrowserRouter
4. Routes
5. BrowserRouter & Routes challenge
6. Route, path, & element
7. Quick Re-org
8. Link
9. VanLife project bootstrapping
10. Initial Deploy to Netlify
11. Mirage JS Server
12. Challenge: Vans Page - Part 1
13. Challenge: Vans Page - Part 2
14. Route Params - part 1
15. Route Params - part 2
16. A11y Update - wrapping complex content in a link
17. Route Params part 3.1 - useParams() & challenge
18. Route Params part 3.2 - useParams() challenge
19. Route Params Quiz
20. Nested Routes Intro
21. Fixing the Navbar with a Layout Route
22. Fixing the Navbar with a Layout Route part 2
23. Bootstrap the Host pages
24. Nesting the /host routes
25. Creating the Host Layout
26. Relative Paths
27. Index Routes
28. To nest or not to nest?
29. Nested Routes Quiz
30. Add Footer
31. NavLink
32. Active Link Styling with NavLink
33. Active Link Styling with NavLink - part 2
34. Adding Host Vans Routes
35. ð Optional Side Quest - Building out the Host Vans List and Detail Pages
36. Building out the Host Van Detail page
37. Relative Links
38. Back to all vans
39. Add /host/vans/:id Nested Routes
40. Add the Final Navbar!
41. Outlet Context
42. Search Params Intro
43. useSearchParams
44. Challenge: Set up search params in VanLife
45. Filter the array w/ the search param
46. Challenge: Filter the vans in VanLife
47. Using Links to add search params
48. Challenge: Filter the vans with Links
49. Using the search params setter function
50. Challenge: Filter the vans with a setter function
51. Caveats to setting params
52. Merging search params with Links
53. Merging search params with the setSearchParams function
54. Challenge: Conditional rendering practice
55. Fix remaining absolute paths
56. Back to all vans
57. Link state
58. useLocation
59. Challenge: conditionally render the back button text
60. 404 Page
61. "Happy Path" vs. "Sad Path" (new)
62. Quick update to our fetching code
63. Coding the Sad Path - Loading state (new)
64. Coding the Sad Path - Error handling
65. Update: Accessibility Addition
66. Initial Login Form
67. Note from the future: importing image assets in Vite
68. Protected Routes Intro (FDCP)
69. Protected Routes - AuthRequired Layout Route (FDCP)
70. Protected Routes - Implementing "auth" (FDCP)
71. Protected Routes - Navigate (FDCP)
72. VanLife Protected Routes (FDCP)
73. Protected Routes Quiz
74. Navigation State (FDCP)
75. Setup for authentication - happy path (FDCP)
76. Authentication setup - sad path (FDCP)
77. Navigate to /host route after login (FDCP)
78. History Stack and Replace (FDCP)
79. Challenge - send user to original page
80. Placeholders are gone! ð
81. Cloud Firestore Setup ð¥
82. Cloud Firestore Code Setup
83. Collection ref and getVans() function
84. Create getVan function
85. Refactor getHostVans function
86. Final loose ends
87. Outro

Performance

1. Performance Intro
2. Recursive rendering
3. Three phases of "rendering"
4. Rendering Phases Quiz
5. Using Dev Tools to Measure Performance
6. StrictMode - double renders components
7. StrictMode - rerunning side effects
8. Code Splitting, lazy, Suspense - Part 1
9. Code Splitting, lazy, Suspense - Part 2
10. useMemo()
11. useMemo() practice
12. React.memo() - reducing rerenders
13. React.memo() practice
14. Value vs. Reference Types & referential equality
15. useMemo(), React.memo(), and referential equality
16. useMemo() practice
17. useCallback()
18. useCallback() practice
19. Course Outro

Getting hired

1. Getting hired - Module Intro
2. Getting Hired
3. Getting Hired - Problem Solving
4. Getting a portfolio

Using LinkedIn to get a job

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

1. Course Introduction
2. Falsy Values
3. const vs let vs var
4. Double vs triple equal
5. undefined vs null
6. Data Types
7. Spread & Rest Operators
8. Destructuring Objects and Arrays
9. Git Fundamentals
10. Agile & Scrum
11. CSS Selectors
12. Responsive Design
13. Number Issues
14. Promises
15. Pass by value vs pass by reference
16. Five questions to be prepared for
17. Five preparation tips
18. Got any questions for me?
19. GitHub tips
20. Resume tips
21. Job search strategy

JavaScript Interview Challenges

1. Technical Interview Challenges - Intro
2. Challenge - Panic Function
3. Solution - Panic Function
4. Challenge - Shh... Whispering Function
5. Solution - Shh... Whisper Function
6. Challenge - Alternating Caps
7. Solution - Alternating Caps
8. Challenge - toTitleCase()
9. Solution - toTitleCase()
10. Challenge - Definitely Not FizzBuzz
11. Solution - Definitely Not FizzBuzz
12. Challenge - Emojify!
13. Solution - Emojify!
14. Challenge: Is it an Anagram?
15. Solution - Is It an Anagram?
16. Challenge - Decode an Alien Message
17. Solution - Decode an Alien Message
18. Challenge - Palindromes
19. Solution - Palindromes
20. Challenge - Save Grandpa's Password
21. Solution - Save Grandpa's Password
22. Challenge - Frequency of Letters in Your Name
23. Solution - Frequency of Letters in Your Name
24. Challenge: Chef Mario's Recipe Book
25. Solution Pt 1: Chef Mario's Recipe Book
26. Solution Pt 2: Chef Mario's Recipe Book
27. Challenge - Pumpkin's Prizes
28. Solution - Pumpkin's Prizes
29. Challenge - Count the Scrimba Students
30. Solution - Count the Scrimba Students
31. Challenge - Pizza Night?
32. Solution - Pizza Night?
33. Challenge - Totally Private Data Farm
34. Solution - Totally Private Data Farm
35. Challenge - Find Free Podcasts
36. Solution - Find Free Podcasts
37. Challenge - Candy Sale
38. Solution - Candy Sale
39. Challenge - Shopping Cart
40. Solution - Shopping Cart
41. Challenge - Total Savory Items
42. Solution - Total Savory Items
43. Challenge - Holiday Gift Shopping
44. Solution - Holiday Gift Shopping
45. Challenge - Collect Unique Genre Tags
46. Solution Pt 1: Collect Unique Genre Tags
47. Solution Pt 2: Collect Unique Genre Tags
48. Challenge - Welcome Aboard Scrimba Airlines
49. Solution - Welcome Aboard Scrimba Airlines
50. Challenge - Popularity Contest
51. Solution - Popularity Contest
52. Challenge - Night at the Scrimbies
53. Solution - Night at the Scrimbies
54. Challenge - Save the Weekend
55. Solution - Save the Weekend
56. Challenge - Find Anagrams in an Array
57. Solution - Find Anagrams in an Array
58. Challenge - Emoji Flower Bed
59. Solution - Emoji Flower Bed
60. Challenge - Emoji Slot Machine
61. Solution - Emoji Slot Machine

React interview questions

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! â¨

The Frontend Developer Career Path

Tags

Course Description

Overview

Syllabus

Related Courses

Login to Continue