Tutorialspoint

April Learning Carnival is here, Use code FEST10 for an extra 10% off

50 Projects in 50 Days - HTML, CSS, and JavaScript

person icon Packt Publishing

4.3

50 Projects in 50 Days - HTML, CSS, and JavaScript

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

updated on icon Updated on Apr, 2024

language icon Language - English

person icon Packt Publishing

English [CC]

category icon Development,Web Development

Lectures -163

Duration -18.5 hours

4.3

price-loader

30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.

Course 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, and 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

By the end of this course, you will be thorough with the basics and concepts in HTML, CSS, and JavaScript.

All code files are placed here: https://github.com/PacktPublishing/50-Projects-In-50-Days---HTML-CSS-JavaScript

Audience

This course is for beginner and intermediate web developers who want to build fun and unique projects with HTML, CSS, and JavaScript.

Goals

What will you learn in this course:

  • Understand the concept of content and circle styling in rotating navigation
  • Understand how to load the blur effect
  • Learn how to add the hover effect in a split landing page
  • Explore how to add the wave effect
  • Work with Fetch and HTTP requests/responses
  • Fetch data from the API

Prerequisites

What are the prerequisites for this course?

  • This course is for beginner and intermediate web developers
50 Projects in 50 Days - HTML, CSS, and JavaScript

Curriculum

Check out the detailed breakdown of what’s inside the course

Welcome to the Course
3 Lectures
  • play icon Welcome 01:07 01:07
  • play icon Environment and Setup 04:20 04:20
  • play icon Project Starter Boilerplate 07:39 07:39
Day 1 - Expanding Cards
3 Lectures
Tutorialspoint
Day 2 - Progress Steps
3 Lectures
Tutorialspoint
Day 3 – Rotating Navigation
3 Lectures
Tutorialspoint
Day 4 – Hidden Search Widget
2 Lectures
Tutorialspoint
Day 5 – Blurry Loading
3 Lectures
Tutorialspoint
Day 6 - Scroll Animation
2 Lectures
Tutorialspoint
Day 7 – Split Landing Page
3 Lectures
Tutorialspoint
Day 8 – Form Wave Animation
3 Lectures
Tutorialspoint
Day 9 – Sound Board
2 Lectures
Tutorialspoint
Day 10 – Dad Jokes
4 Lectures
Tutorialspoint
Day 11 – Event KeyCodes
3 Lectures
Tutorialspoint
Day 12 – FAQ Collapse
3 Lectures
Tutorialspoint
Day 13 - Random Choice Picker
4 Lectures
Tutorialspoint
Day 14 – Animated Navigation
3 Lectures
Tutorialspoint
Day 15 – Incrementing Counter
3 Lectures
Tutorialspoint
Day 16 – Drink Water
4 Lectures
Tutorialspoint
Day 17 – Movie App
4 Lectures
Tutorialspoint
Day 18 – Background Slider
3 Lectures
Tutorialspoint
Day 19 – Theme Clock
4 Lectures
Tutorialspoint
Day 20 – Button Ripple Effect
3 Lectures
Tutorialspoint
Day 21 – Drag N Drop
3 Lectures
Tutorialspoint
Day 22 – Drawing App
5 Lectures
Tutorialspoint
Day 23 – Kinetic CSS Loader
2 Lectures
Tutorialspoint
Day 24 – Content Placeholder
4 Lectures
Tutorialspoint
Day 25 – Sticky Navbar
3 Lectures
Tutorialspoint
Day 26 – Double Vertical Slider
3 Lectures
Tutorialspoint
Day 27 – Toast Notification
2 Lectures
Tutorialspoint
Day 28 – GitHub Profiles
5 Lectures
Tutorialspoint
Day 29 – Double Heart Click
3 Lectures
Tutorialspoint
Day 30 – Auto Text Effect
2 Lectures
Tutorialspoint
Day 31 – Password Generator
5 Lectures
Tutorialspoint
Day 32 – Good, Cheap, Fast Checkboxes
4 Lectures
Tutorialspoint
Day 33 – Notes App
4 Lectures
Tutorialspoint
Day 34 – Animated Countdown
4 Lectures
Tutorialspoint
Day 35 – Image Carousel
3 Lectures
Tutorialspoint
Day 36 – Hoverboard
3 Lectures
Tutorialspoint
Day 37 – Pokedex
4 Lectures
Tutorialspoint
Day 38 – Mobile Tab Navigation
3 Lectures
Tutorialspoint
Day 39 – Password Strength Background
3 Lectures
Tutorialspoint
Day 40 – 3D Background Boxes
3 Lectures
Tutorialspoint
Day 41 – Verify Account UI
2 Lectures
Tutorialspoint
Day 42 – Live User Filter
3 Lectures
Tutorialspoint
Day 43 – Feedback UI Design
3 Lectures
Tutorialspoint
Day 44 – Custom Range Slider
3 Lectures
Tutorialspoint
Day 45 – Netflix Navigation
3 Lectures
Tutorialspoint
Day 46 – Quiz App
3 Lectures
Tutorialspoint
Day 47 – Testimonial Box Switcher
3 Lectures
Tutorialspoint
Day 48 – Random Image Feed
2 Lectures
Tutorialspoint
Day 49 – Todo List
4 Lectures
Tutorialspoint
Day 50 – Todo List
4 Lectures
Tutorialspoint

Instructor Details

Packt Publishing

Packt Publishing

e


Course Certificate

Use your certificate to make a career change or to advance in your current career.

sample Tutorialspoint certificate

Our students work
with the Best

Related Video Courses

View More

Annual Membership

Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses

Subscribe now
Annual Membership

Online Certifications

Master prominent technologies at full length and become a valued certified professional.

Explore Now
Online Certifications

Talk to us

1800-202-0515