Day 2 - Progress Steps | 50 Projects in 50 Days

Book Overview & Buying
Table Of Contents

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

By : Brad Traversy, Florin Pop

5 (3)

Buy this Video

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

5 (3)

By: Brad Traversy, Florin Pop

Buy this Video

Overview of this book

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

Welcome to the Course

Welcome

Environment and Setup

Project Starter Boilerplate

Day 1 - Expanding Cards

Project Introduction

Initial Cards

Expanding Effect

Day 2 - Progress Steps

Project Introduction

Creating the Steps

Step Functionality

Day 3 - Rotating Navigation

Project Introduction

Content and Circle Styling

Rotate and Slide Effect

Day 4 - Hidden Search Widget

Project Introduction

Hidden Search Widget

Day 5 - Blurry Loading

Project Introduction

Background Image and Loading Text

Load Blur Effect

Day 6 - Scroll Animation

Project Introduction

Scroll Animation

Day 7 - Split Landing Page

Project Introduction

Split Landing Page HTML and CSS

Adding the Hover Effect

Day 8 - Form Wave Animation

Project Introduction

Styling the Form

Adding the Wave Effect

Day 9 - Sound Board

Project Introduction

Sound Board Project

Day 10 - Dad Jokes

Project Introduction

Jokes: HTML and CSS

Working with Fetch and HTTP Requests/Responses

Fetching and Displaying Jokes

Day 11 - Event KeyCodes

Project Introduction

Key Boxes: HTML and CSS

Display Key Codes

Day 12 - FAQ Collapse

Project Introduction

FAQ Boxes

Toggle Buttons

Day 13 - Random Choice Picker

Project Introduction

Choice Picker UI

Create Tags

Select Random Tag

Day 14 - Animated Navigation

Project Introduction

Nav Styling

Icon Styling and Active Toggle

Day 15 - Incrementing Counter

Introduction

Counters: HTML and CSS

Create and Display Increment

Day 16 - Drink Water

Project Introduction

Create and Style The Cups

Fill Small Cups

Update Big Cup

Day 17 - Movie App

Project Introduction

Movies UI Layout

Fetching Data from the API

Adding Movies to the DOM

Day 18 - Background Slider

Project Introduction

HTML and CSS

Changing Slides

Day 19 - Theme Clock

Project Introduction

Starting the Clock

Finish Clock Styling

Mode and Clock Function

Day 20 - Button Ripple Effect

Project Introduction

Button Style and Animation

Button Click Effect

Day 21 - Drag N Drop

Project Introduction

Create Drop Boxes

Drag Drop Events

Day 22 - Drawing App

Project Introduction

Drawing Pad UI

Canvas Shapes

Mouse Events and Drawing

Toolbox Controls

Day 23 - Kinetic CSS Loader

Project Introduction

Kinetic CSS Loader

Day 24 - Content Placeholder

Project Introduction

Card HTML

Card CSS

Animation Timeout Effect

Day 25 - Sticky Navbar

Project Introduction

Website Content and Style

Navbar CSS and JS

Day 26 - Double Vertical Slider

Project Introduction

Vertical Slider UI

Vertical Slider Function

Day 27 - Toast Notification

Project Introduction

Create Toast Notifications

Day 28 - GitHub Profiles

Project Introduction

GitHub Profile Card

Fetching Profile Data with Axios

Dynamic Profile Cards

Adding Repos to Card

Day 29 - Double Heart Click

Project Introduction

HTML and CSS

Show Heart Based on Click Position

Day 30 - Auto Text Effect

Project Introduction

Auto Text Effect

Day 31 - Password Generator

Project Introduction

Password Generator UI

Random Functions

Generate Password

Copy Password to Clipboard

Day 32 - Good, Cheap, Fast Checkboxes

Project Introduction

Style Checkboxes

Check Ball Animation

JavaScript Logic

Day 33 - Notes App

Project Introduction

Notes HTML and CSS

Adding Notes to the DOM

Save Notes to Local Storage

Day 34 - Animated Countdown

Project Introduction

Counter and Final Sections

In and Out Animations

Dynamic Animation with JS

Day 35 - Image Carousel

Project Introduction

Carousel UI

Carousel Functionality

Day 36 - Hoverboard

Project Introduction

Styling the Board Squares

Hoverboard Effect

Day 37 - Pokedex

Project Introduction

Pokedex UI and Styling

Fetching Pokémon Data

Creating the Pokémon Cards

Day 38 - Mobile Tab Navigation

Project Introduction

Create and Style UI

Navigation Effect

Day 39 - Password Strength Background

Project Introduction

Creating the Form and Background

Change Blur on Input

Day 40 - 3D Background Boxes

Project Introduction

Creating the Button and Boxes

Background Position and Rotate Event

Day 41 - Verify Account UI

Project Introduction

Verify Account UI Project

Day 42 - Live User Filter

Project Introduction

User List UI

Fetch and Filter Users

Day 43 - Feedback UI Design

Project Introduction

Feedback Boxes

Select and Submit Feedback

Day 44 - Custom Range Slider

Project Introduction

Styling the Range

Label Value and Movement

Day 45 - Netflix Navigation

Project Introduction

Netflix Nav - Part 1

Netflix Nav - Part 2

Day 46 - Quiz App

Project Introduction

Quiz UI

Quiz Functionality

Day 47 - Testimonial Box Switcher

Project Introduction

Create Box and Progress Bar

Testimonial Switch

Day 48 - Random Image Feed

Project Introduction

Random Image Feed Project

Day 49 - Todo List

Project Introduction

Todo List UI

Add, Remove, and Mark Complete

Saving Todos to Local Storage

Day 50 - Todo List (Insect Game)

Project Introduction

Game Styling - Part 1

Game Styling - Part 2

Insect Game Functionality

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

By : Brad Traversy, Florin Pop

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

By: Brad Traversy, Florin Pop

Overview of this book

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access