Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
19 Hour(s) 23 Minute(s)
Language
English
Taught by
Brad Traversy, Florin Pop
Certificate
- Available
- *The delivery and distribution of the certificate are subject to the policies and arrangements of the course provider.
Rating
Course Overview
Sharpen your skills by building 50+ quick, unique and fun mini projects
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 & 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
Kinetic Loader
Content Placeholder
Sticky Navbar
Double Vertical Slider
Toast Notification
Github Profiles
Double Click Heart
Auto Text Effect
Password Generator
Good Cheap Fast
Notes App
Animated Countdown
Image Carousel
Hoverboard
Pokedex
Mobile Tab Navigation
Password Strength Background
3d Background Boxes
Verify Account UI
Live User Filter
Feedback UI Design
Custom Range Slider
Netflix Mobile Navigation
Quiz App
Testimonial Box Switcher
Random Image Feed
Todo List
Insect Catch Game
Simple Timer (Bonus Day 1)
Many people jump into a frontend framework too early. Learning vanilla JavaScript and understanding how the document object model works are essential before moving to a framework. This course teaches you this by creating real-world projects of all types.
You will also learn more about HTML5 and CSS including semantic tags in your markup, basic CSS properties such as colors, alignment, flexbox, and shadows as well as creating responsive layouts with CSS media queries, CSS custom properties, animations/transitions, and more.
50 projects may seem like a lot, but we were able to make them small enough to where you can complete a project in just a few hours. Of course, this depends on your skill level.
Course Content
- 53 section(s)
- 170 lecture(s)
- Section 1 Introduction
- Section 2 Day 1 - Expanding Cards
- Section 3 Day 2 - Progress Steps
- Section 4 Day 3 - Rotating Navigation
- Section 5 Day 4 - Hidden Search Widget
- Section 6 Day 5 - Blurry Loading
- Section 7 Day 6 - Scroll Animation
- Section 8 Day 7 - Split Landing Page
- Section 9 Day 8 - Form Wave Animation
- Section 10 Day 9 - Sound Board
- Section 11 Day 10 - Dad Jokes
- Section 12 Day 11 - Event KeyCodes
- Section 13 Day 12 - FAQ Collapse
- Section 14 Day 13 - Random Choice Picker
- Section 15 Day 14 - Animated Navigation
- Section 16 Day 15 - Incrementing Counter
- Section 17 Day 16 - Drink Water
- Section 18 Day 17 - Movie App
- Section 19 Day 18 - Background Slider
- Section 20 Day 19 - Theme Clock
- Section 21 Day 20 - Button Ripple Effect
- Section 22 Day 21 - Drag N Drop
- Section 23 Day 22 - Drawing App
- Section 24 Day 23 - Kinetic CSS Loader
- Section 25 Day 24 - Content Placeholder
- Section 26 Day 25 - Sticky Navbar
- Section 27 Day 26 - Double Vertical Slider
- Section 28 Day 27 - Toast Notification
- Section 29 Day 28 - Github Profiles
- Section 30 Day 29 - Double Heart Click
- Section 31 Day 30 - Auto Text Effect
- Section 32 Day 31 - Password Generator
- Section 33 Day 32 - Good, Cheap, Fast Checkboxes
- Section 34 Day 33 - Notes App
- Section 35 Day 34 - Animated Countdown
- Section 36 Day 35 - Image Carousel
- Section 37 Day 36 - Hoverboard
- Section 38 Day 37 - Pokedex
- Section 39 Day 38 - Mobile Tab Navigation
- Section 40 Day 39 - Password Strength Background
- Section 41 Day 40 - 3D Background Boxes
- Section 42 Day 41 - Verify Account UI
- Section 43 Day 42 - Live User Filter
- Section 44 Day 43 - Feedback UI Design
- Section 45 Day 44 - Custom Range Slider
- Section 46 Day 45 - Netflix Navigation
- Section 47 Day 46 - Quiz App
- Section 48 Day 47 - Testimonial Box Switcher
- Section 49 Day 48 - Random Image Feed
- Section 50 Day 49 - Todo List
- Section 51 Day 50 - Insect Catch Game
- Section 52 Bonus Day 1 - Simple Timer
- Section 53 Bonus Day 2 - Dice Roller
What You’ll Learn
- Project based teaching to sharpen your HTML, CSS & JavaScript skills
- Perfect for beginners looking for things to build unique projects in a short timeframe
- Modern styling with flexbox, CSS animations, custom properties, etc
- DOM manipulation, events, array methods, HTTP requests & more
Skills covered in this course
Reviews
-
ZZuzana Kotkova
I have been following Brad Traversy for some years now. Bought several his courses, and as always this one is great, never disappointed. Nice little projects to practice your JS skills, especially DOM manipulation.
-
VViktor Pinneker
Very interesting course. Small fun projects, but very useful
-
SShohrukh Koyirov
I find this tutorial very cool. You enjoy small projects. It will not boring. The duration of each project is also perfect, so it will be not boring. I enjoyed this course and gladly suggest this tutorial to other people too!
-
JJason Luu
thorough instruction and well explanation
