Udemy

Platform

English

Language

Web Development

Category

Brad Traversy

Instructor

50 Projects In 50 Days - HTML, CSS & JavaScript

Sharpen your skills by building 50 quick, unique & fun mini projects

4.77 (2246 reviews)

16114

Students

18.5 hours

Content

Dec 2020

Last Update
$99.99
Regular Price

What you will 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

Topics

JavaScriptCSS

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:


  1. Expanding Cards

  2. Progress Steps

  3. Rotating Navigation Animation

  4. Hidden Search Widget

  5. Blurry Loading

  6. Scroll Animation

  7. Split Landing Page

  8. Form Wave

  9. Sound Board

  10. Dad Jokes

  11. Event Keycodes

  12. Faq Collapse

  13. Random Choice Picker

  14. Animated Navigation

  15. Incrementing Counter

  16. Drink Water

  17. Movie App

  18. Background Slider

  19. Theme Clock

  20. Button Ripple Effect

  21. Drag N Drop

  22. Drawing App

  23. Kinetic Loader

  24. Content Placeholder

  25. Sticky Navbar

  26. Double Vertical Slider

  27. Toast Notification

  28. Github Profiles

  29. Double Click Heart

  30. Auto Text Effect

  31. Password Generator

  32. Good Cheap Fast

  33. Notes App

  34. Animated Countdown

  35. Image Carousel

  36. Hoverboard

  37. Pokedex

  38. Mobile Tab Navigation

  39. Password Strength Background

  40. 3d Background Boxes

  41. Verify Account UI

  42. Live User Filter

  43. Feedback UI Design

  44. Custom Range Slider

  45. Netflix Mobile Navigation

  46. Quiz App

  47. Testimonial Box Switcher

  48. Random Image Feed

  49. Todo List

  50. Insect Catch Game

Screenshots

50 Projects In 50 Days - HTML, CSS & JavaScript
50 Projects In 50 Days - HTML, CSS & JavaScript
50 Projects In 50 Days - HTML, CSS & JavaScript
50 Projects In 50 Days - HTML, CSS & JavaScript

Content

Introduction

Welcome

My Environment & Setup

Project Starter Boilerplate

Course Projects Code & Demos

Day 1 - Expanding Cards

Project Intro

Initial Cards

Expanding Effect

Day 2 - Progress Steps

Project Intro

Creating The Steps

Step Functionality

Day 3 - Rotating Navigation

Project Intro

Content & Circle Styling

Rotate & Slide Effect

Day 4 - Hidden Search Widget

Project Intro

Hidden Search Widget

Day 5 - Blurry Loading

Project Intro

Background Image & Loading Text

Load Blur Effect

Day 6 - Scroll Animation

Project Intro

Scroll Animation

Day 7 - Split Landing Page

Project Intro

Split Landing Page HTML & CSS

Adding The Hover Effect

Day 8 - Form Wave Animation

Project Intro

Styling The Form

Adding The Wave Effect

Day 9 - Sound Board

Project Intro

Sound Board Project

Day 10 - Dad Jokes

Project Intro

Jokes HTML & CSS

Working With Fetch & HTTP Requests/Responses

Fetching & Displaying Jokes

Day 11 - Event KeyCodes

Project Intro

Key Boxes HTML & CSS

Display Key Codes

Day 12 - FAQ Collapse

Project Intro

FAQ Boxes

Toggle Buttons

Day 13 - Random Choice Picker

Project Intro

Choice Picker UI

Create Tags

Select Random Tag

Day 14 - Animated Navigation

Project Intro

Nav Styling

Icon Styling & Active Toggle

Day 15 - Incrementing Counter

Project Intro

Counters HTML & CSS

Create & Display Increment

Day 16 - Drink Water

Project Intro

Create & Style The Cups

Fill Small Cups

Update Big Cup

Day 17 - Movie App

Project Intro

Movies UI Layout

Fetching Data From The API

Adding Movies To The DOM

Day 18 - Background Slider

Project Intro

HTML & CSS

Changing Slides

Day 19 - Theme Clock

Project Intro

Starting The Clock

Finish Clock Styling

Mode & Clock Function

Day 20 - Button Ripple Effect

Project Intro

Button Style & Animation

Button Click Effect

Day 21 - Drag N Drop

Project Intro

Create Drop Boxes

Drag Drop Events

Day 22 - Drawing App

Project Intro

Drawing Pad UI

Canvas Shapes

Mouse Events & Drawing

Day 23 - Kinetic CSS Loader

Project Intro

Kinetic CSS Loader

Day 24 - Content Placeholder

Project Intro

Card HTML

Card CSS

Day 25 - Sticky Navbar

Project Intro

Website Content & Style

Navbar CSS & JS

Day 26 - Double Vertical Slider

Project Intro

Vertical Slider UI

Vertical Slider Function

Day 27 - Toast Notification

Project Intro

Create Toast Notifications

Day 28 - Github Profiles

Project Intro

Github Profile Card

Fetching Profile Data With Axios

Dynamic Profile Cards

Adding Repos To Card

Day 29 - Double Heart Click

Project Intro

HTML & CSS

Show Heart Based On Click Position

Day 30 - Auto Text Effect

Project Intro

Auto Text Effect

Day 31 - Password Generator

Project Intro

Password Generator UI

Random Functions

Generate Password

Copy Password To Clipboard

Day 32 - Good, Cheap, Fast Checkboxes

Project Intro

Style Checkboxes

Check Ball Animation

JavaScript Logic

Day 33 - Notes App

Project Intro

Notes HTML & CSS

Adding Notes To The DOM

Save Notes To Local Storage

Day 34 - Animated Countdown

Project Intro

Counter & Final Sections

In & Out Animations

Dynamic Animation With JS

Day 35 - Image Carousel

Project Intro

Carousel UI

Carousel Functionality

Day 36 - Hoverboard

Project Intro

Styling The Board Squares

Hoverboard Effect

Day 37 - Pokedex

Project Intro

Pokedex UI & Styling

Fetching Pokemon Data

Creating The Pokemon Cards

Day 38 - Mobile Tab Navigation

Project Intro

Create & Style UI

Navigation Effect

Day 39 - Password Strength Background

Project Intro

Creating The Form & Background

Change Blur On Input

Day 40 - 3D Background Boxes

Project Intro

Creating The Button & Boxes

Background Position & Rotate Event

Day 41 - Verify Account UI

Project Intro

Verify Account UI Project

Day 42 - Live User Filter

Project Intro

User List UI

Fetch & Filter Users

Day 43 - Feedback UI Design

Project Intro

Feedback Boxes

Select & Submit Feedback

Day 44 - Custom Range Slider

Project Intro

Styling The Range

Label Value & Movement

Day 45 - Netflix Navigation

Project Intro

Netflix Nav - Part 1

Netflix Nav - Part 2

Day 46 - Quiz App

Project Intro

Quiz UI

Quiz Functionality

Day 47 - Testimonial Box Switcher

Project Intro

Create Box & Progress Bar

Testimonial Switch

Day 48 - Random Image Feed

Project Intro

Random Image Feed Project

Day 49 - Todo List

Project Intro

Todo List UI

Add, Remove & Mark Complete

Saving Todos to Local Storage

Day 50 - Insect Catch Game

Project Intro

Game Styling - Part 1

Game Styling - Part 2

Insect Game Functionality

Reviews

J
Julio4 December 2020

On day three. Projects are highly engaging, and are exactly what I was looking for to ignite my creativity!

C
Colton4 December 2020

Despite only being 4 projects deep, I can tell this has already helped me tap back in to what I know and refine it while also showing and experimenting with a lot of new properties I would likely otherwise not have interacted with.

G
Grace4 December 2020

Brad does a great job of putting out good content. Always enjoy his course and easy to follow and understand.

S
Shawn3 December 2020

I love these projects. It's a great frontend refresher. My only niggle is that Brad sometimes talks a little too quickly when he's coding.

A
Adam2 December 2020

I'm coming into this course with 'basic' exposure to HTML/CSS/JS. Thus far I'm comfortable with everything being shared. Further, picking up a few VScode tips/tricks in watching the templates get setup, has been very much welcomed for someone at my stage of development.

M
Muthu2 December 2020

I learnt a lot from Brad and Florin from their Youtube videos. I'm sure the content will be very good. A small way to support them!

S
Shumon1 December 2020

when I watch his YouTube videos, every time I like the video 1st & then start watching it. I hope this gives an idea of how good his every video is... BRAD, you deserve the 5 STARS

V
Vincent1 December 2020

Brad and Florin are excellent teachers! I wish there were more courses like this. Hint: Stuff like this is great for keeping that GitHub calendar green. Happy hacking!

B
Ben1 December 2020

I'm a mid-level dev trying to separate myself from my team and become the lead dev. I chose this course to learn techniques that will make me more efficient on my daily tasks.

S
Shahid1 December 2020

I needed projects based learning to put all I know about the subject in something that is fully functional

J
Jsuddsjr1 December 2020

I learned so much from this Traversy courses. He's got a knack for simplifying the subject, but simultaneously teaching everything you need to know.

P
Paul1 December 2020

Absolute bargain of a course. I can't express how grateful I am for this. 50 projects for £9.99. Florin Pop and Brad, thank you. I am going to learn alot of new tricks, and rather than search for individual videos I now have it all in one place. Absolutely buzzing for this....Paul Maximus from Youtube.

N
Nigel1 December 2020

I remember struggling with creating a modal dialog back in the day and I stumbled upon you youtube video. So clear and concise...

G
Graham1 December 2020

Great! Just the right amount of info and description, good pace but i'm running, just keeping up! Enjoying it.

E
Enrica1 December 2020

This is so informative. I never knew about the universal tag on CSS the * but just now. Absolutely is for beginners.

Coupons

StatusDateDiscount
Expired12/1/202090% OFF
Expired12/6/202087% OFF

3671332

Udemy ID

11/30/2020

Course created date

12/1/2020

Course Indexed date
Bot
Course Submitted by
Twitter
Telegram
Android PlayStore
Apple Appstore