HOT
blank

50 Projects In 50 Days – HTML, CSS & JavaScript

Development

Rating4.6
Enroll Now

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
    Brad Traversy
    Full Stack Web Developer & Instructor at Traversy Media
  • Florin Pop
    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!

You may also like

Top 10 Ethical AI Courses to Learn in November 2024

Top 10 Game Development Courses to Learn in November 2024

Top 10 Software Testing Courses to Learn in November 2024