0

Explore Products

Best Sellers

New Releases

Books

Videos

Audiobooks

Free Learning

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

50 Projects in 50 Days - HTML, CSS, and JavaScript : Sharpen your skills by building 50 quick, unique, and fun mini projects

Brad Traversy Florin Pop

$54.99

Video Aug 2021 18hrs 36mins 1st Edition

Renews at $19.99p/m

Brad Traversy Florin Pop

$54.99

Video Aug 2021 18hrs 36mins 1st Edition

Renews at $19.99p/m

Renews at $19.99p/m

What do you get with a video?

Download this video in MP4 format

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

View table of contents Download Code

Key benefits

Project-based teaching to sharpen your HTML, CSS, and JavaScript skills
DOM manipulation, events, array methods, HTTP requests, and more
Modern styling with flexbox, CSS animations, custom properties, and so on

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

Who is this book for?

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

What you will learn

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

What do you get with a video?

Download this video in MP4 format

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Product Details

Publication date : Aug 27, 2021

Length: 18hrs 36mins

Edition : 1st

Language : English

ISBN-13 : 9781801079976

Category :

Web Development

Languages :

CSS

Concepts :

Web Programming

Tools :

HTTP

Frequently bought together

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

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

Aug 2021 18hrs 36mins

Video

$54.99

JavaScript from Beginner to Professional

JavaScript from Beginner to Professional

Dec 2021 546 pages

eBook

$21.99 ~~$31.99~~

Learn Python Programming, 3rd edition

Learn Python Programming, 3rd edition

Oct 2021 554 pages

eBook

$25.99 ~~$37.99~~

Total $ 133.96 141.97 8.01 saved

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

$54.99

JavaScript from Beginner to Professional

$31.98 ~~$39.99~~

Learn Python Programming, 3rd edition

$46.99

Total $ 133.96 141.97 8.01 saved

Table of Contents

51 Chapters

Welcome to the Course

Environment and Setup

Project Starter Boilerplate

Day 1 - Expanding Cards

Project Introduction

Expanding Effect

Day 2 – Progress Steps

Project Introduction

Creating the Steps

Step Functionality

Day 3 – Rotating Navigation

Project Introduction

Content and Circle Styling

Rotate and Slide Effect

Day 4 – Hidden Search Widget

Project Introduction

Hidden Search Widget

Day 5 – Blurry Loading

Project Introduction

Background Image and Loading Text

Load Blur Effect

Day 6 - Scroll Animation

Project Introduction

Scroll Animation

Day 7 – Split Landing Page

Project Introduction

Split Landing Page HTML and CSS

Adding the Hover Effect

Day 8 – Form Wave Animation

Project Introduction

Styling the Form

Adding the Wave Effect

Day 9 – Sound Board

Project Introduction

Sound Board Project

Day 10 – Dad Jokes

Project Introduction

Jokes: HTML and CSS

Working with Fetch and HTTP Requests/Responses

Fetching and Displaying Jokes

Day 11 – Event KeyCodes

Project Introduction

Key Boxes: HTML and CSS

Display Key Codes

Day 12 – FAQ Collapse

Project Introduction

Day 13 - Random Choice Picker

Project Introduction

Choice Picker UI

Select Random Tag

Day 14 – Animated Navigation

Project Introduction

Icon Styling and Active Toggle

Day 15 – Incrementing Counter

Counters: HTML and CSS

Create and Display Increment

Day 16 – Drink Water

Project Introduction

Create and Style The Cups

Fill Small Cups

Day 17 – Movie App

Project Introduction

Movies UI Layout

Fetching Data from the API

Adding Movies to the DOM

Day 18 – Background Slider

Project Introduction

Changing Slides

Day 19 – Theme Clock

Project Introduction

Starting the Clock

Finish Clock Styling

Mode and Clock Function

Day 20 – Button Ripple Effect

Project Introduction

Button Style and Animation

Button Click Effect

Day 21 – Drag N Drop

Project Introduction

Create Drop Boxes

Drag Drop Events

Day 22 – Drawing App

Project Introduction

Mouse Events and Drawing

Toolbox Controls

Day 23 – Kinetic CSS Loader

Project Introduction

Kinetic CSS Loader

Day 24 – Content Placeholder

Project Introduction

Animation Timeout Effect

Day 25 – Sticky Navbar

Project Introduction

Website Content and Style

Navbar CSS and JS

Day 26 – Double Vertical Slider

Project Introduction

Vertical Slider UI

Vertical Slider Function

Day 27 – Toast Notification

Project Introduction

Create Toast Notifications

Day 28 – GitHub Profiles

Project Introduction

GitHub Profile Card

Fetching Profile Data with Axios

Dynamic Profile Cards

Adding Repos to Card

Day 29 – Double Heart Click

Project Introduction

Show Heart Based on Click Position

Day 30 – Auto Text Effect

Project Introduction

Auto Text Effect

Day 31 – Password Generator

Project Introduction

Password Generator UI

Random Functions

Generate Password

Copy Password to Clipboard

Day 32 – Good, Cheap, Fast Checkboxes

Project Introduction

Style Checkboxes

Check Ball Animation

JavaScript Logic

Day 33 – Notes App

Project Introduction

Notes HTML and CSS

Adding Notes to the DOM

Save Notes to Local Storage

Day 34 – Animated Countdown

Project Introduction

Counter and Final Sections

In and Out Animations

Dynamic Animation with JS

Day 35 – Image Carousel

Project Introduction

Carousel Functionality

Day 36 – Hoverboard

Project Introduction

Styling the Board Squares

Hoverboard Effect

Day 37 – Pokedex

Project Introduction

Pokedex UI and Styling

Fetching PokÃ©mon Data

Creating the PokÃ©mon Cards

Day 38 – Mobile Tab Navigation

Project Introduction

Create and Style UI

Navigation Effect

Day 39 – Password Strength Background

Project Introduction

Creating the Form and Background

Change Blur on Input

Day 40 – 3D Background Boxes

Project Introduction

Creating the Button and Boxes

Background Position and Rotate Event

Day 41 – Verify Account UI

Project Introduction

Verify Account UI Project

Day 42 – Live User Filter

Project Introduction

Fetch and Filter Users

Day 43 – Feedback UI Design

Project Introduction

Select and Submit Feedback

Day 44 – Custom Range Slider

Project Introduction

Styling the Range

Label Value and Movement

Day 45 – Netflix Navigation

Project Introduction

Netflix Nav - Part 1

Netflix Nav - Part 2

Day 46 – Quiz App

Project Introduction

Quiz Functionality

Day 47 – Testimonial Box Switcher

Project Introduction

Create Box and Progress Bar

Testimonial Switch

Day 48 – Random Image Feed

Project Introduction

Random Image Feed Project

Day 49 – Todo List

Project Introduction

Add, Remove, and Mark Complete

Saving Todos to Local Storage

Day 50 – Todo List

Project Introduction

Game Styling - Part 1

Game Styling - Part 2

Insect Game Functionality

Recommendations for you

React and React Native

React and React Native

Apr 2024 508 pages

eBook

$24.99 ~~$35.99~~

Django 5 for the Impatient

Django 5 for the Impatient

Sep 2024 228 pages

eBook

$18.99 ~~$27.99~~

Django 5 By Example

Django 5 By Example

Apr 2024 820 pages

eBook

$23.98 ~~$39.99~~

AI Strategies for Web Development

AI Strategies for Web Development

Sep 2024 458 pages

eBook

$20.99 ~~$30.99~~

Mastering Angular Test-Driven Development

Mastering Angular Test-Driven Development

Oct 2024 246 pages

eBook

$20.99 ~~$30.99~~

GraphQL Best Practices

GraphQL Best Practices

Oct 2024 422 pages

eBook

$21.99 ~~$31.99~~

C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals

C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals

Nov 2023 828 pages

eBook

$27.98 ~~$39.99~~

Building Python Microservices with FastAPI

Building Python Microservices with FastAPI

Aug 2022 420 pages

eBook

$25.99 ~~$37.99~~

Building Production-Grade Web Applications with Supabase

Building Production-Grade Web Applications with Supabase

Aug 2024 534 pages

eBook

$21.99 ~~$31.99~~

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

Sep 2022 498 pages

eBook

$24.99 ~~$35.99~~

Customer reviews

Rating distribution

5

(5 Ratings)

5 star 100%

4 star 0%

3 star 0%

2 star 0%

1 star 0%

Grzegorz Jul 25, 2024

5

Epic. Shows the process step by steps. Very helpfull.

Subscriber review

Horst Apr 04, 2024

5

Very Good

Subscriber review

Patsy Phelan Jan 19, 2024

5

Feefo Verified review

Vijay Sep 17, 2023

5

Awesome course

Subscriber review

Hung Ly Jan 11, 2022

5

It's worth to buy it. for learning.

Feefo Verified review

People who bought this also bought

Building Python Microservices with FastAPI

Building Python Microservices with FastAPI

Aug 2022 420 pages

eBook

$25.99 ~~$37.99~~

React and React Native

React and React Native

May 2022 606 pages

eBook

$27.98 ~~$39.99~~

Responsive Web Design with HTML5 and CSS

Responsive Web Design with HTML5 and CSS

Sep 2022 498 pages

eBook

$24.99 ~~$35.99~~

C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals

C# 12 and .NET 8 – Modern Cross-Platform Development Fundamentals

Nov 2023 828 pages

eBook

$27.98 ~~$39.99~~

C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals

C# 11 and .NET 7 – Modern Cross-Platform Development Fundamentals

Nov 2022 818 pages

eBook

$27.98 ~~$39.99~~

About the authors

Brad Traversy

Brad Traversy

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad’s courses.

See other products by Brad Traversy

Florin Pop

Florin Pop

Florin Pop is a web developer specializing in front-end development. He also has a YouTube channel where he teaches programming and often streams on Twitch different coding challenges. He loves coding and helping others on their journey of becoming better developers. You can also often find him on Twitter, sharing bits of his journey.

See other products by Florin Pop

FAQs

How can I download a video package for offline viewing?

Login to your account at Packtpub.com.
Click on "My Account" and then click on the "My Videos" tab to access your videos.
Click on the "Download Now" link to start your video download.

How can I extract my video file?

All modern operating systems ship with ZIP file extraction built in. If you'd prefer to use a dedicated compression application, we've tested WinRAR / 7-Zip for Windows, Zipeg / iZip / UnRarX for Mac and 7-Zip / PeaZip for Linux. These applications support all extension files.

How can I get help and support around my video package?

If your video course doesn't give you what you were expecting, either because of functionality problems or because the content isn't up to scratch, please mail customercare@packt.com with details of the problem. In addition, so that we can best provide the support you need, please include the following information for our support team.

Video
Format watched (HTML, MP4, streaming)
Chapter or section that issue relates to (if relevant)
System being played on
Browser used (if relevant)
Details of support

Why can’t I download my video package?

In the even that you are having issues downloading your video package then please follow these instructions:

Disable all your browser plugins and extensions: Some security and download manager extensions can cause issues during the download.
Download the video course using a different browser: We've tested downloads operate correctly in current versions of Chrome, Firefox, Internet Explorer, and Safari.