50 Projects In 50 Days HTML, CSS JavaScript

50 Projects In 50 Days – HTML, CSS & JavaScript, available at $109.99, has an average rating of 4.6, with 167 lectures, based on 11864 reviews, and has 83353 subscribers.

You will learn about 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 This course is ideal for individuals who are Beginner and intermediate web developers that want to build fun, unique projects with HTML, CSS & JavaScript It is particularly useful for Beginner and intermediate web developers that want to build fun, unique projects with HTML, CSS & JavaScript.

Enroll now: 50 Projects In 50 Days – HTML, CSS & JavaScript

Summary

Title: 50 Projects In 50 Days – HTML, CSS & JavaScript

Price: $109.99

Average Rating: 4.6

Number of Lectures: 167

Number of Published Lectures: 167

Number of Curriculum Items: 167

Number of Published Curriculum Objects: 167

Original Price: $89.99

Quality Status: approved

Status: Live

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

Who Should Attend

Beginner and intermediate web developers that want to build fun, unique projects with HTML, CSS & JavaScript

Target Audiences

Beginner and intermediate web developers that want to build fun, unique projects with HTML, CSS & JavaScript

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

51. 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 Curriculum

Chapter 1: Introduction

Lecture 1: Welcome

Lecture 2: My Environment & Setup

Lecture 3: Project Starter Boilerplate

Lecture 4: Course Projects Code & Demos

Chapter 2: Day 1 – Expanding Cards

Lecture 1: Project Intro

Lecture 2: Initial Cards

Lecture 3: Expanding Effect

Chapter 3: Day 2 – Progress Steps

Lecture 1: Project Intro

Lecture 2: Creating The Steps

Lecture 3: Step Functionality

Chapter 4: Day 3 – Rotating Navigation

Lecture 1: Project Intro

Lecture 2: Content & Circle Styling

Lecture 3: Rotate & Slide Effect

Chapter 5: Day 4 – Hidden Search Widget

Lecture 1: Project Intro

Lecture 2: Hidden Search Widget

Chapter 6: Day 5 – Blurry Loading

Lecture 1: Project Intro

Lecture 2: Background Image & Loading Text

Lecture 3: Load Blur Effect

Chapter 7: Day 6 – Scroll Animation

Lecture 1: Project Intro

Lecture 2: Scroll Animation

Chapter 8: Day 7 – Split Landing Page

Lecture 1: Project Intro

Lecture 2: Split Landing Page HTML & CSS

Lecture 3: Adding The Hover Effect

Chapter 9: Day 8 – Form Wave Animation

Lecture 1: Project Intro

Lecture 2: Styling The Form

Lecture 3: Adding The Wave Effect

Chapter 10: Day 9 – Sound Board

Lecture 1: Project Intro

Lecture 2: Sound Board Project

Chapter 11: Day 10 – Dad Jokes

Lecture 1: Project Intro

Lecture 2: Jokes HTML & CSS

Lecture 3: Working With Fetch & HTTP Requests/Responses

Lecture 4: Fetching & Displaying Jokes

Chapter 12: Day 11 – Event KeyCodes

Lecture 1: Project Intro

Lecture 2: Key Boxes HTML & CSS

Lecture 3: Display Key Codes

Chapter 13: Day 12 – FAQ Collapse

Lecture 1: Project Intro

Lecture 2: FAQ Boxes

Lecture 3: Toggle Buttons

Chapter 14: Day 13 – Random Choice Picker

Lecture 1: Project Intro

Lecture 2: Choice Picker UI

Lecture 3: Create Tags

Lecture 4: Select Random Tag

Chapter 15: Day 14 – Animated Navigation

Lecture 1: Project Intro

Lecture 2: Nav Styling

Lecture 3: Icon Styling & Active Toggle

Chapter 16: Day 15 – Incrementing Counter

Lecture 1: Project Intro

Lecture 2: Counters HTML & CSS

Lecture 3: Create & Display Increment

Chapter 17: Day 16 – Drink Water

Lecture 1: Project Intro

Lecture 2: Create & Style The Cups

Lecture 3: Fill Small Cups

Lecture 4: Update Big Cup

Chapter 18: Day 17 – Movie App

Lecture 1: Project Intro

Lecture 2: Movies UI Layout

Lecture 3: Fetching Data From The API

Lecture 4: Adding Movies To The DOM

Chapter 19: Day 18 – Background Slider

Lecture 1: Project Intro

Lecture 2: HTML & CSS

Lecture 3: Changing Slides

Chapter 20: Day 19 – Theme Clock

Lecture 1: Project Intro

Lecture 2: Starting The Clock

Lecture 3: Finish Clock Styling

Lecture 4: Mode & Clock Function

Chapter 21: Day 20 – Button Ripple Effect

Lecture 1: Project Intro

Lecture 2: Button Style & Animation

Lecture 3: Button Click Effect

Chapter 22: Day 21 – Drag N Drop

Lecture 1: Project Intro

Lecture 2: Create Drop Boxes

Lecture 3: Drag Drop Events

Chapter 23: Day 22 – Drawing App

Lecture 1: Project Intro

Lecture 2: Drawing Pad UI

Lecture 3: Canvas Shapes

Lecture 4: Mouse Events & Drawing

Lecture 5: Toolbox Controls

Chapter 24: Day 23 – Kinetic CSS Loader

Lecture 1: Project Intro

Lecture 2: Kinetic CSS Loader

Instructors

Brad Traversy
Full Stack Web Developer & Instructor at Traversy Media

Florin Pop
Web developer, YouTuber and Streamer

Rating Distribution

1 stars: 99 votes

2 stars: 95 votes

3 stars: 562 votes

4 stars: 2911 votes

5 stars: 8201 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!