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:
-
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 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!
You may also like
- Top 10 Video Editing Courses to Learn in November 2024
- Top 10 Music Production Courses to Learn in November 2024
- Top 10 Animation Courses to Learn in November 2024
- Top 10 Digital Illustration Courses to Learn in November 2024
- Top 10 Renewable Energy Courses to Learn in November 2024
- Top 10 Sustainable Living Courses to Learn in November 2024
- Top 10 Ethical AI Courses to Learn in November 2024
- Top 10 Cybersecurity Fundamentals Courses to Learn in November 2024
- Top 10 Smart Home Technology Courses to Learn in November 2024
- Top 10 Holistic Health Courses to Learn in November 2024
- Top 10 Nutrition And Diet Planning Courses to Learn in November 2024
- Top 10 Yoga Instruction Courses to Learn in November 2024
- Top 10 Stress Management Courses to Learn in November 2024
- Top 10 Mindfulness Meditation Courses to Learn in November 2024
- Top 10 Life Coaching Courses to Learn in November 2024
- Top 10 Career Development Courses to Learn in November 2024
- Top 10 Relationship Building Courses to Learn in November 2024
- Top 10 Parenting Skills Courses to Learn in November 2024
- Top 10 Home Improvement Courses to Learn in November 2024
- Top 10 Gardening Courses to Learn in November 2024