Cademy logoCademy Marketplace

Course Images

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

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

By Packt

  • 30 Day Money Back Guarantee
  • Completion Certificate
  • 24/7 Technical Support

Highlights

  • On-Demand course

  • 18 hours 36 minutes

  • All levels

Description

Sharpen your HTML, CSS, and JavaScript by working on a large variety of projects. In this course, we'll be working through a project a day using vanilla JavaScript. Over the next 50 days, you'll have 50 small, unique, DOM-oriented projects under your belt.

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. All code files are placed here: https://github.com/PacktPublishing/50-Projects-In-50-Days---HTML-CSS-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.

Approach

This course assumes zero prior knowledge about HTML, CSS, and JavaScript. It helps you bring out the best in these programming languages by working on 50 fun mini projects.

Key Features

Project-based teaching to sharpen your HTML, CSS, and JavaScript skills * DOM manipulation, events, array methods, HTTP requests, and more * Modern styling with flexbox, CSS animations, custom properties, and so on

Github Repo

https://github.com/PacktPublishing/50-Projects-In-50-Days---HTML-CSS-JavaScript

About the Author

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.

Course Outline

1. Welcome to the Course

1. Welcome

This video introduces you to the course.

2. Environment and Setup

This video introduces you to the environment and its setup.

3. Project Starter Boilerplate

This video introduces you to the project.


2. Day 1 - Expanding Cards

1. Project Introduction

This video explains the project.

2. Initial Cards

This video explains initial cards.

3. Expanding Effect

This video explains the expanding effect.


3. Day 2 - Progress Steps

1. Project Introduction

This video explains the project.

2. Creating the Steps

This video explains creating the steps.

3. Step Functionality

This video explains step functionality.


4. Day 3 - Rotating Navigation

1. Project Introduction

This video explains the project - rotating navigation.

2. Content and Circle Styling

This video explains content and circle styling.

3. Rotate and Slide Effect

This video explains the rotate and slide effect.


5. Day 4 - Hidden Search Widget

1. Project Introduction

This video explains the project: hidden search widget.

2. Hidden Search Widget

This video explains the entire project.


6. Day 5 - Blurry Loading

1. Project Introduction

This video explains the project.

2. Background Image and Loading Text

This video explains background image and loading text.

3. Load Blur Effect

This video explains the load blur effect.


7. Day 6 - Scroll Animation

1. Project Introduction

This video explains the project.

2. Scroll Animation

This video explains the animation.


8. Day 7 - Split Landing Page

1. Project Introduction

This video introduces you to the project.

2. Split Landing Page HTML and CSS

This video explains the split landing page: HTML and CSS.

3. Adding the Hover Effect

This video explains adding the hover effect.


9. Day 8 - Form Wave Animation

1. Project Introduction

This video explains the form wave animation project.

2. Styling the Form

This video explains styling the form.

3. Adding the Wave Effect

This video explains adding the wave effect.


10. Day 9 - Sound Board

1. Project Introduction

This video explains the sound board project.

2. Sound Board Project

This video explains the project further.


11. Day 10 - Dad Jokes

1. Project Introduction

This video explains the project.

2. Jokes: HTML and CSS

This video explains how HTML and CSS are used in the project

3. Working with Fetch and HTTP Requests/Responses

This video explains working with Fetch and HTTP requests/responses.

4. Fetching and Displaying Jokes

This video explains fetching and displaying jokes.


12. Day 11 - Event KeyCodes

1. Project Introduction

This video explains the project.

2. Key Boxes: HTML and CSS

This video explains key boxes: HTML and CSS.

3. Display Key Codes

This video explains how to display key codes.


13. Day 12 - FAQ Collapse

1. Project Introduction

This video explains the project.

2. FAQ Boxes

This video explains FAQ boxes.

3. Toggle Buttons

This video explains toggle buttons.


14. Day 13 - Random Choice Picker

1. Project Introduction

This video explains the project.

2. Choice Picker UI

This video explains choice picker UI.

3. Create Tags

This video explains how to create tags.

4. Select Random Tag

This video explains how to select a random tag.


15. Day 14 - Animated Navigation

1. Project Introduction

This video explains the section.

2. Nav Styling

This video explains Nav styling.

3. Icon Styling and Active Toggle

This video explains icon styling and active toggle.


16. Day 15 - Incrementing Counter

1. Introduction

This video explains the project.

2. Counters: HTML and CSS

This video explains counters: HTML and CSS.

3. Create and Display Increment

This video explains create and display increment.


17. Day 16 - Drink Water

1. Project Introduction

This video explains the project.

2. Create and Style The Cups

This video explains how to create and style the cups.

3. Fill Small Cups

This video explains filling small cups.

4. Update Big Cup

This video explains how to update the big cup.


18. Day 17 - Movie App

1. Project Introduction

This video explains the project.

2. Movies UI Layout

This video explains the movies UI layout.

3. Fetching Data from the API

This video explains fetching data from the API.

4. Adding Movies to the DOM

This video explains adding movies to the DOM.


19. Day 18 - Background Slider

1. Project Introduction

This video explains the project.

2. HTML and CSS

This video explains HTML and CSS.

3. Changing Slides

This video explains changing slides.


20. Day 19 - Theme Clock

1. Project Introduction

This video explains the project.

2. Starting the Clock

This video explains how to start the clock.

3. Finish Clock Styling

This video explains how to complete the clock styling.

4. Mode and Clock Function

This video explains the mode and clock function.


21. Day 20 - Button Ripple Effect

1. Project Introduction

This video explains the project.

2. Button Style and Animation

This video explains button style and animation.

3. Button Click Effect

This video explains the button click effect.


22. Day 21 - Drag N Drop

1. Project Introduction

This video explains the project.

2. Create Drop Boxes

This video explains how to create drop boxes.

3. Drag Drop Events

This video explains drag drop events.


23. Day 22 - Drawing App

1. Project Introduction

This video explains the project.

2. Drawing Pad UI

This video explains drawing pad UI.

3. Canvas Shapes

This video explains canvas shapes.

4. Mouse Events and Drawing

This video explains mouse events and drawing.

5. Toolbox Controls

This video explains toolbox controls.


24. Day 23 - Kinetic CSS Loader

1. Project Introduction

This video explains the project.

2. Kinetic CSS Loader

This video explains kinetic CSS loader.


25. Day 24 - Content Placeholder

1. Project Introduction

This video explains the project.

2. Card HTML

This video explains card HTML.

3. Card CSS

This video explains card CSS.

4. Animation Timeout Effect

This video explains the animation timeout effect.


26. Day 25 - Sticky Navbar

1. Project Introduction

This video explains the project.

2. Website Content and Style

This video explains website content and style.

3. Navbar CSS and JS

This video explains Navbar CSS and JS.


27. Day 26 - Double Vertical Slider

1. Project Introduction

This video explains the project.

2. Vertical Slider UI

This video explains vertical slider UI.

3. Vertical Slider Function

This video explains the vertical slider function.


28. Day 27 - Toast Notification

1. Project Introduction

This video explains the project.

2. Create Toast Notifications

This video explains how to create toast notifications.


29. Day 28 - GitHub Profiles

1. Project Introduction

This video explains the section.

2. GitHub Profile Card

This video explains GitHub profile card.

3. Fetching Profile Data with Axios

This video explains fetching profile data with Axios.

4. Dynamic Profile Cards

This video explains dynamic profile cards.

5. Adding Repos to Card

This video explains adding repos to card.


30. Day 29 - Double Heart Click

1. Project Introduction

This video explains the section.

2. HTML and CSS

This video explains HTML and CSS.

3. Show Heart Based on Click Position

This video explains how to show the heart based on the click position.


31. Day 30 - Auto Text Effect

1. Project Introduction

This video explains the project.

2. Auto Text Effect

This video explains the auto text effect.


32. Day 31 - Password Generator

1. Project Introduction

This video explains the project.

2. Password Generator UI

This video explains password generator UI.

3. Random Functions

This video explains random functions.

4. Generate Password

This video explains how to generate password.

5. Copy Password to Clipboard

This video explains how to copy password to clipboard.


33. Day 32 - Good, Cheap, Fast Checkboxes

1. Project Introduction

This video explains the section.

2. Style Checkboxes

This video explains style checkboxes.

3. Check Ball Animation

This video explains how to check ball animation.

4. JavaScript Logic

This video explains JavaScript logic.


34. Day 33 - Notes App

1. Project Introduction

This video explains the project.

2. Notes HTML and CSS

This video explains HTML and CSS.

3. Adding Notes to the DOM

This video explains adding notes to the DOM.

4. Save Notes to Local Storage

This video explains how to save notes to local storage.


35. Day 34 - Animated Countdown

1. Project Introduction

This video explains the project.

2. Counter and Final Sections

This video explains the counter and final sections.

3. In and Out Animations

This video explains in and out animations.

4. Dynamic Animation with JS

This video explains dynamic animation with JS.


36. Day 35 - Image Carousel

1. Project Introduction

This video explains the section.

2. Carousel UI

This video explains carousel UI.

3. Carousel Functionality

This video explains carousel functionality.


37. Day 36 - Hoverboard

1. Project Introduction

This video explains the section.

2. Styling the Board Squares

This video explains styling the board squares.

3. Hoverboard Effect

This video explains the hoverboard effect.


38. Day 37 - Pokedex

1. Project Introduction

This video explains the project.

2. Pokedex UI and Styling

This video explains Pokedex UI and styling.

3. Fetching Pokémon Data

This video explains fetching Pokémon data.

4. Creating the Pokémon Cards

This video explains creating the Pokémon cards.


39. Day 38 - Mobile Tab Navigation

1. Project Introduction

This video explains the section.

2. Create and Style UI

This video explains how to create and style UI.

3. Navigation Effect

This video explains the navigation effect.


40. Day 39 - Password Strength Background

1. Project Introduction

This video explains the project.

2. Creating the Form and Background

This video explains creating the form and background.

3. Change Blur on Input

This video explains how to change blur on input.


41. Day 40 - 3D Background Boxes

1. Project Introduction

This video explains the section.

2. Creating the Button and Boxes

This video explains how to create buttons and boxes.

3. Background Position and Rotate Event

This video explains the background position and rotate event.


42. Day 41 - Verify Account UI

1. Project Introduction

This video explains the project.

2. Verify Account UI Project

This video explains the verify account UI project.


43. Day 42 - Live User Filter

1. Project Introduction

This video explains the section.

2. User List UI

This video explains user list UI.

3. Fetch and Filter Users

This video explains fetch and filter users.


44. Day 43 - Feedback UI Design

1. Project Introduction

This video explains the project.

2. Feedback Boxes

This video explains feedback boxes.

3. Select and Submit Feedback

This video explains how to select and submit feedback.


45. Day 44 - Custom Range Slider

1. Project Introduction

This video explains the section.

2. Styling the Range

This video explains styling the range.

3. Label Value and Movement

This video explains label value and movement.


46. Day 45 - Netflix Navigation

1. Project Introduction

This video explains the project.

2. Netflix Nav - Part 1

This video explains Netflix navigation.

3. Netflix Nav - Part 2

This video further explains Netflix navigation.


47. Day 46 - Quiz App

1. Project Introduction

This video explains the project.

2. Quiz UI

This video explains the quiz UI.

3. Quiz Functionality

This video explains the quiz functionality.


48. Day 47 - Testimonial Box Switcher

1. Project Introduction

This video explains the project.

2. Create Box and Progress Bar

This video explains how to create box and progress bar.

3. Testimonial Switch

This video explains testimonial switch.


49. Day 48 - Random Image Feed

1. Project Introduction

This video explains the project.

2. Random Image Feed Project

This video explains the random image feed project in detail.


50. Day 49 - Todo List

1. Project Introduction

This video explains the project.

2. Todo List UI

This video explains todo list UI.

3. Add, Remove, and Mark Complete

This video explains how to add, remove, and mark complete.

4. Saving Todos to Local Storage

This video explains saving todos to local storage.


51. Day 50 - Todo List

1. Project Introduction

This video explains the project.

2. Game Styling - Part 1

This video explains game styling - part 1.

3. Game Styling - Part 2

This video explains game styling - part 2.

4. Insect Game Functionality

This video explains the insect game functionality.

Course Content

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

About The Provider

Packt
Packt
Birmingham
Founded in 2004 in Birmingham, UK, Packt’s mission is to help the world put software to work in new ways, through the delivery of effective learning and i...
Read more about Packt

Tags

Reviews

+ Add Review