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