get app

    50 Projects In 50 Days - HTML, CSS & JavaScript

    BY
    Udemy

    Brochure Enquire
    Mode

    Online

    Fees

    ₹ 4099

    Quick Facts

    particular details
    Medium of instructions English
    Mode of learning Self study
    Mode of Delivery Video and Text Based

    Course and certificate fees

    Fees information
    ₹ 4,099
    certificate availability

    Yes

    certificate providing authority

    Udemy

    The syllabus

    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
    • Toolbox Controls

    Day 23 - Kinetic CSS Loader

    • Project Intro
    • Kinetic CSS Loader

    Day 24 - Content Placeholder

    • Project Intro
    • Card HTML
    • Card CSS
    • Animation Timeout Effect

    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 Clicks

    • 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 - Customer 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

    Instructors

    Mr Brad Traversy

    Mr Brad Traversy
    instructor
    Freelancer

    Mr Florin Pop

    Mr Florin Pop
    instructor
    Freelancer

    Articles

    Popular Articles

    Top 12 Certification Courses Offered by IIT Bombay Top 12 Certification Courses Offered by IIT Bombay Updated On 06 Dec, 2024
    The Scope of Artificial Intelligence in India The Scope of Artificial Intelligence in India Updated On 04 Dec, 2024
    150+ UGC Approved Online Degree Courses by Top Universities 150+ UGC Approved Online Degree Courses by Top ... Updated On 29 Nov, 2024
    Top 10 Online Healthcare and Hospital Management Courses Top 10 Online Healthcare and Hospital Managemen... Updated On 19 Nov, 2024
    Top 10 Indian Universities Offering Online Degrees Top 10 Indian Universities Offering Online Degrees Updated On 02 Nov, 2024
    Top 16 IIT Madras Online Degree, Diploma, and Certification Courses Top 16 IIT Madras Online Degree, Diploma, and C... Updated On 11 Oct, 2024
    UGC Guidelines to Pursue Online Courses UGC Guidelines to Pursue Online Courses Updated On 13 Mar, 2024
    Reasons to Enroll for an Online Content Writing Course Reasons to Enroll for an Online Content Writing... Updated On 29 Feb, 2024
    Top 10 Online Animation Certificate Courses for a Better Career Top 10 Online Animation Certificate Courses for... Updated On 27 Feb, 2024
    Best Programming Languages to Learn in 2024 Best Programming Languages to Learn in 2024 Updated On 13 Feb, 2024

    Latest Articles

    MEAN Stack Developer Salary in India for Freshers & Experienced Updated On 07 Nov, 2024
    20 Beginner-Friendly Online Bootstrap Courses for Frontend Development Updated On 07 Nov, 2024
    Top 18+ Online Courses to Pursue for a Career in Web Development Updated On 05 Nov, 2024
    17+ Courses on HTML5 for Beginners to Become a Web Developer Updated On 05 Nov, 2024
    Top 50 MVC Interview Questions And Answers To Prepare Updated On 16 Apr, 2024
    50 Best Bootstrap Interview Questions and Answers Updated On 16 Apr, 2024
    Top 16 Online Courses on Typescript Development Updated On 07 Apr, 2024
    Top 50 Must Know Interview Questions for PHP Updated On 04 Apr, 2024
    25 Free Web Development Courses to Pursue in Online Mode Updated On 19 Mar, 2024
    Top 50 Interview Questions for Web Developer With Answers Updated On 15 Feb, 2024
    14+ GitHub Courses to Become a Skilled Web Developer Updated On 15 Feb, 2024
    Top 50 GIT Interview Questions and Answers to Know Updated On 15 Feb, 2024

    Trending Courses

    Digital Marketing Courses Fashion Design Courses Data Science Courses Interior Design Courses Graphic Designing Courses Cyber Security Courses Nursing Courses Tally Courses Data Analysis Courses Web Designing Courses Artificial Intelligence Courses Ethical Hacking Courses Free Digital Marketing Courses And certifications Free Artificial Intelligence Courses And Certifications Free Data Analysis Courses And Certifications Free Cyber Security Courses And Certifications Free Data Science Courses And Certifications Free Cloud Computing Courses And Certifications Free Python Courses And Certifications Free Fashion And Textiles Courses And Certifications Free Graphic Designing Courses And Certifications Free Web Designing Courses And Certifications

    Popular Courses

    General Management Courses Public Health Courses Teaching and Education Courses Financial Management Courses Web Development Courses Mathematics Courses Data Science Courses Cyber Security Courses Programming Courses Digital Marketing Courses Law Courses Mechanical Engineering Courses Explore all courses

    Popular Platforms

    upGrad Courses Udemy Courses Edx Courses Swayam Courses Coursera Courses Futurelearn Courses Mindmajix Technologies Courses Vskills Courses NPTEL Courses IIT Kharagpur Courses Emeritus Courses IIT Kanpur Courses Explore all platforms

    Learn more about the Courses

    10 Reasons to Enrol Yourself in a Digital Marketing Course 8 Must-Have Skills for AWS Cloud Architects Planning to Upskill Yourself? Enrol for a Program in Data Science 25+ Tips for Improving Your Graphic Design Skills Top Universities in India Offering Cyber Security Courses 15+ Courses for Learning Data Mining How to Make a Career in the Field of Artificial Intelligence Top 10 Benefits Of Holding A Certification In Business Intelligence Which are the best certification courses for Photography in India A Beginner's Guide to Pursue Python Programming Want to Pursue a Career in Blockchain Technology? Here is all that you need to Know How Entrepreneurs Can Use Machine Learning to Make their Business Successful? The Scope of Artificial Intelligence in India Top 10 Online Courses for Travel Lovers 10 Best Certification Courses After Hospital and Healthcare Management
    Providers
    Close

    Download the Careers360 App on your Android phone

    Regular exam updates, QnA, Predictors, College Applications & E-books now on your Mobile

    Careers360 App
    150M+ Students
    30,000+ Colleges
    500+ Exams
    1500+ E-books