50 Projects 50 Days
Tags: JavaScript , CSS
Sharpen your skills by building 50 quick, unique & fun mini projects
Last updated 2022-01-10 | 4.7
- 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
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
* Requirements
* A very basic understanding of HTML* CSS & JavaScript
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 & 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
Who this course is for:
- Beginner and intermediate web developers that want to build fun, unique projects with HTML, CSS & JavaScript
Course content
51 sections • 164 lectures
Welcome Preview 01:07
My Environment & Setup Preview 04:18
Project Starter Boilerplate Preview 07:36
Course Projects Code & Demos Preview 00:05
Project Intro Preview 01:05
Content & Circle Styling Preview 12:19
Rotate & Slide Effect Preview 11:02
Project Intro Preview 00:43
Hidden Search Widget Preview 09:06
Project Intro Preview 00:54
Background Image & Loading Text Preview 04:31
Load Blur Effect Preview 07:41
Project Intro Preview 01:02
Scroll Animation Preview 13:11
Project Intro Preview 00:55
Split Landing Page HTML & CSS Preview 14:29
Adding The Hover Effect Preview 07:11
Project Intro Preview 01:10
Sound Board Project Preview 09:52
Project Intro Preview 01:14
Jokes HTML & CSS Preview 06:40
Working With Fetch & HTTP Requests/Responses Preview 06:11
Fetching & Displaying Jokes Preview 10:29
Project Intro Preview 00:52
Choice Picker UI Preview 06:23
Create Tags Preview 05:41
Select Random Tag Preview 07:24
Project Intro Preview 00:38
Counters HTML & CSS Preview 05:28
Create & Display Increment Preview 06:46
Project Intro Preview 00:52
Create & Style The Cups Preview 15:15
Fill Small Cups Preview 06:32
Update Big Cup Preview 08:39
Project Intro Preview 01:27
Movies UI Layout Preview 14:02
Fetching Data From The API Preview 11:16
Adding Movies To The DOM Preview 09:26
Project Intro Preview 00:34
Starting The Clock Preview 12:51
Finish Clock Styling Preview 05:47
Mode & Clock Function Preview 16:39
Project Intro Preview 00:34
Button Style & Animation Preview 06:49
Button Click Effect Preview 08:09
Project Intro Preview 01:17
Drawing Pad UI Preview 06:32
Canvas Shapes Preview 07:06
Mouse Events & Drawing Preview 06:43
Toolbox Controls Preview 07:19
Project Intro Preview 00:24
Kinetic CSS Loader Preview 07:25
Project Intro Preview 00:53
Card HTML Preview 05:33
Card CSS Preview 05:05
Animation Timeout Effect Preview 10:35
Project Intro Preview 01:02
Create Toast Notifications Preview 14:59
Project Intro Preview 01:49
Github Profile Card Preview 14:48
Fetching Profile Data With Axios Preview 11:09
Dynamic Profile Cards Preview 08:02
Adding Repos To Card Preview 08:10
Project Intro Preview 01:27
HTML & CSS Preview 07:01
Show Heart Based On Click Position Preview 13:25
Project Intro Preview 00:54
Auto Text Effect Preview 09:13
Project Intro Preview 01:02
Password Generator UI Preview 13:45
Random Functions Preview 08:20
Generate Password Preview 16:00
Copy Password To Clipboard Preview 02:48
Project Intro Preview 01:00
Style Checkboxes Preview 07:59
Check Ball Animation Preview 04:07
JavaScript Logic Preview 04:52
Project Intro Preview 01:36
Notes HTML & CSS Preview 09:28
Adding Notes To The DOM Preview 10:05
Save Notes To Local Storage Preview 09:41
Project Intro Preview 01:14
Counter & Final Sections Preview 08:53
In & Out Animations Preview 07:39
Dynamic Animation With JS Preview 10:36
Project Intro Preview 01:08
Pokedex UI & Styling Preview 11:10
Fetching Pokemon Data Preview 05:04
Creating The Pokemon Cards Preview 10:23
Project Intro Preview 01:13
Creating The Form & Background Preview 08:57
Change Blur On Input Preview 04:41
Project Intro Preview 01:27
Creating The Button & Boxes Preview 15:56
Background Position & Rotate Event Preview 10:10
Project Intro Preview 00:58
Verify Account UI Project Preview 13:50
Project Intro Preview 00:39
Create Box & Progress Bar Preview 12:10
Testimonial Switch Preview 07:44
Project Intro Preview 01:04
Random Image Feed Project Preview 09:13
Project Intro Preview 00:53
Todo List UI Preview 08:48
Add, Remove & Mark Complete Preview 06:09
Saving Todos to Local Storage Preview 08:07
Project Intro Preview 01:22
Game Styling - Part 1 Preview 12:19
Game Styling - Part 2 Preview 09:03
Insect Game Functionality Preview 19:02
This course includes:
- 18.5 hours on-demand video
- Access on mobile and TV
- Certificate of completion
Related Courses
Recent Posts
4 ManyChat courses you need to know about
Facebook chatbot marketing is a method to engage customers and build brand credibility using a bot. There are many benefits of this marketing strategy. Therefore, ...Read more
How to Write a Marketing Email: 7 Tips to Write Compelling Email Copy?
In the past few years, the trend of email marketing has increased quite a lot. Most of the brands are utilizing fancy functionality and emphasizing ...Read more
Tips to improve mobile app conversion rate
There are thousands of apps for both Android and IOS. Everyday people install different apps for different uses. However, there are a few apps people ...Read more
Do you need a course to become a voice actor?
Voice actors bring life to animations and cartoon characters. Can anyone become a voice actor? I don’t think so. Voice acting can get intense. A ...Read more
6 Important Sales Skills Every Sales Rep. Must Master
Salespeople need to know a lot in order to reach their goal numbers, from the product and market expertise to messaging and value proposition. The ...Read more
