50 Projects in 50 Days - HTML, CSS, and JavaScript

50 Projects in 50 Days - HTML, CSS, and JavaScript

by Brad Traversy, Florin Pop
Released August 2021
Publisher(s): Packt Publishing
ISBN: 9781801079976

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

This is a purely project-based course. It is geared toward beginners, but intermediate developers can also enjoy creating new things. This course includes 50 mini projects in HTML, CSS, and JavaScript that relate to the DOM (Document Object Model). Here is a list of what we will create in this course:

Expanding Cards

Progress Steps

Rotating Navigation Animation

Hidden Search Widget

Blurry Loading

Scroll Animation

Split Landing Page

Form Wave

Sound Board

Dad Jokes

Event Keycodes

FAQ Collapse

Random Choice Picker

Animated Navigation

Incrementing Counter

Drink Water

Movie App

Background Slider

Theme Clock

Button Ripple Effect

Drag N Drop

Drawing App

By the end of this course, you will be thorough with the basics and concepts in HTML, CSS, and JavaScript.

What You Will Learn

  • Understand the concept of content and circle styling in rotating navigation
  • Understand how to load the blur effect
  • Learn how to add the hover effect in a split landing page
  • Explore how to add the wave effect
  • Work with Fetch and HTTP requests/responses
  • Fetch data from the API

Audience

This course is for beginner and intermediate web developers who want to build fun and unique projects with HTML, CSS, and JavaScript.

About The Authors

Brad Traversy: Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad’s courses.

Florin Pop: Florin Pop is a web developer specializing in front-end development. He also has a YouTube channel where he teaches programming and often streams on Twitch different coding challenges. He loves coding and helping others on their journey of becoming better developers. You can also often find him on Twitter, sharing bits of his journey.

Table of contents

  1. Chapter 1 : Welcome to the Course
    1. Welcome
    2. Environment and Setup
    3. Project Starter Boilerplate
  2. Chapter 2 : Day 1 - Expanding Cards
    1. Project Introduction
    2. Initial Cards
    3. Expanding Effect
  3. Chapter 3 : Day 2 – Progress Steps
    1. Project Introduction
    2. Creating the Steps
    3. Step Functionality
  4. Chapter 4 : Day 3 – Rotating Navigation
    1. Project Introduction
    2. Content and Circle Styling
    3. Rotate and Slide Effect
  5. Chapter 5 : Day 4 – Hidden Search Widget
    1. Project Introduction
    2. Hidden Search Widget
  6. Chapter 6 : Day 5 – Blurry Loading
    1. Project Introduction
    2. Background Image and Loading Text
    3. Load Blur Effect
  7. Chapter 7 : Day 6 - Scroll Animation
    1. Project Introduction
    2. Scroll Animation
  8. Chapter 8 : Day 7 – Split Landing Page
    1. Project Introduction
    2. Split Landing Page HTML and CSS
    3. Adding the Hover Effect
  9. Chapter 9 : Day 8 – Form Wave Animation
    1. Project Introduction
    2. Styling the Form
    3. Adding the Wave Effect
  10. Chapter 10 : Day 9 – Sound Board
    1. Project Introduction
    2. Sound Board Project
  11. Chapter 11 : Day 10 – Dad Jokes
    1. Project Introduction
    2. Jokes: HTML and CSS
    3. Working with Fetch and HTTP Requests/Responses
    4. Fetching and Displaying Jokes
  12. Chapter 12 : Day 11 – Event KeyCodes
    1. Project Introduction
    2. Key Boxes: HTML and CSS
    3. Display Key Codes
  13. Chapter 13 : Day 12 – FAQ Collapse
    1. Project Introduction
    2. FAQ Boxes
    3. Toggle Buttons
  14. Chapter 14 : Day 13 - Random Choice Picker
    1. Project Introduction
    2. Choice Picker UI
    3. Create Tags
    4. Select Random Tag
  15. Chapter 15 : Day 14 – Animated Navigation
    1. Project Introduction
    2. Nav Styling
    3. Icon Styling and Active Toggle
  16. Chapter 16 : Day 15 – Incrementing Counter
    1. Introduction
    2. Counters: HTML and CSS
    3. Create and Display Increment
  17. Chapter 17 : Day 16 – Drink Water
    1. Project Introduction
    2. Create and Style The Cups
    3. Fill Small Cups
    4. Update Big Cup
  18. Chapter 18 : Day 17 – Movie App
    1. Project Introduction
    2. Movies UI Layout
    3. Fetching Data from the API
    4. Adding Movies to the DOM
  19. Chapter 19 : Day 18 – Background Slider
    1. Project Introduction
    2. HTML and CSS
    3. Changing Slides
  20. Chapter 20 : Day 19 – Theme Clock
    1. Project Introduction
    2. Starting the Clock
    3. Finish Clock Styling
    4. Mode and Clock Function
  21. Chapter 21 : Day 20 – Button Ripple Effect
    1. Project Introduction
    2. Button Style and Animation
    3. Button Click Effect
  22. Chapter 22 : Day 21 – Drag N Drop
    1. Project Introduction
    2. Create Drop Boxes
    3. Drag Drop Events
  23. Chapter 23 : Day 22 – Drawing App
    1. Project Introduction
    2. Drawing Pad UI
    3. Canvas Shapes
    4. Mouse Events and Drawing
    5. Toolbox Controls
  24. Chapter 24 : Day 23 – Kinetic CSS Loader
    1. Project Introduction
    2. Kinetic CSS Loader
  25. Chapter 25 : Day 24 – Content Placeholder
    1. Project Introduction
    2. Card HTML
    3. Card CSS
    4. Animation Timeout Effect
  26. Chapter 26 : Day 25 – Sticky Navbar
    1. Project Introduction
    2. Website Content and Style
    3. Navbar CSS and JS
  27. Chapter 27 : Day 26 – Double Vertical Slider
    1. Project Introduction
    2. Vertical Slider UI
    3. Vertical Slider Function
  28. Chapter 28 : Day 27 – Toast Notification
    1. Project Introduction
    2. Create Toast Notifications
  29. Chapter 29 : Day 28 – GitHub Profiles
    1. Project Introduction
    2. GitHub Profile Card
    3. Fetching Profile Data with Axios
    4. Dynamic Profile Cards
    5. Adding Repos to Card
  30. Chapter 30 : Day 29 – Double Heart Click
    1. Project Introduction
    2. HTML and CSS
    3. Show Heart Based on Click Position
  31. Chapter 31 : Day 30 – Auto Text Effect
    1. Project Introduction
    2. Auto Text Effect
  32. Chapter 32 : Day 31 – Password Generator
    1. Project Introduction
    2. Password Generator UI
    3. Random Functions
    4. Generate Password
    5. Copy Password to Clipboard
  33. Chapter 33 : Day 32 – Good, Cheap, Fast Checkboxes
    1. Project Introduction
    2. Style Checkboxes
    3. Check Ball Animation
    4. JavaScript Logic
  34. Chapter 34 : Day 33 – Notes App
    1. Project Introduction
    2. Notes HTML and CSS
    3. Adding Notes to the DOM
    4. Save Notes to Local Storage
  35. Chapter 35 : Day 34 – Animated Countdown
    1. Project Introduction
    2. Counter and Final Sections
    3. In and Out Animations
    4. Dynamic Animation with JS
  36. Chapter 36 : Day 35 – Image Carousel
    1. Project Introduction
    2. Carousel UI
    3. Carousel Functionality
  37. Chapter 37 : Day 36 – Hoverboard
    1. Project Introduction
    2. Styling the Board Squares
    3. Hoverboard Effect
  38. Chapter 38 : Day 37 – Pokedex
    1. Project Introduction
    2. Pokedex UI and Styling
    3. Fetching Pokémon Data
    4. Creating the Pokémon Cards
  39. Chapter 39 : Day 38 – Mobile Tab Navigation
    1. Project Introduction
    2. Create and Style UI
    3. Navigation Effect
  40. Chapter 40 : Day 39 – Password Strength Background
    1. Project Introduction
    2. Creating the Form and Background
    3. Change Blur on Input
  41. Chapter 41 : Day 40 – 3D Background Boxes
    1. Project Introduction
    2. Creating the Button and Boxes
    3. Background Position and Rotate Event
  42. Chapter 42 : Day 41 – Verify Account UI
    1. Project Introduction
    2. Verify Account UI Project
  43. Chapter 43 : Day 42 – Live User Filter
    1. Project Introduction
    2. User List UI
    3. Fetch and Filter Users
  44. Chapter 44 : Day 43 – Feedback UI Design
    1. Project Introduction
    2. Feedback Boxes
    3. Select and Submit Feedback
  45. Chapter 45 : Day 44 – Custom Range Slider
    1. Project Introduction
    2. Styling the Range
    3. Label Value and Movement
  46. Chapter 46 : Day 45 – Netflix Navigation
    1. Project Introduction
    2. Netflix Nav - Part 1
    3. Netflix Nav - Part 2
  47. Chapter 47 : Day 46 – Quiz App
    1. Project Introduction
    2. Quiz UI
    3. Quiz Functionality
  48. Chapter 48 : Day 47 – Testimonial Box Switcher
    1. Project Introduction
    2. Create Box and Progress Bar
    3. Testimonial Switch
  49. Chapter 49 : Day 48 – Random Image Feed
    1. Project Introduction
    2. Random Image Feed Project
  50. Chapter 50 : Day 49 – Todo List
    1. Project Introduction
    2. Todo List UI
    3. Add, Remove, and Mark Complete
    4. Saving Todos to Local Storage
  51. Chapter 51 : Day 50 – Todo List
    1. Project Introduction
    2. Game Styling - Part 1
    3. Game Styling - Part 2
    4. Insect Game Functionality

Product information

  • Title: 50 Projects in 50 Days - HTML, CSS, and JavaScript
  • Author(s): Brad Traversy, Florin Pop
  • Release date: August 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781801079976