Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

JavaScript 20 Projects In 20 Days HTML, CSS & JavaScript

Name: JavaScript 20 Projects In 20 Days HTML, CSS & JavaScript
Rating: 4.4 (390 reviews)

Embark on a 20-Day Journey, Mastering JavaScript with 20 Quick, Unique, and Fun Mini Projects to Sharpen Your Skills

Created byVijay Kumar

Last updated 11/2023

English

What you'll learn

Project-based application of HTML, CSS, and JavaScript skills.
Modern styling techniques using Flexbox, CSS animations, and custom properties.
Comprehensive understanding of DOM manipulation, events, and array methods.
HTTP requests and practical application in web development.
Form validation techniques for enhancing user input integrity.
Creation of diverse projects, from a dynamic news article pop-up to a financial calculator.

Course content

22 sections • 72 lectures • 8h 16m total length

Introduction1:55
Begin your journey into JavaScript projects with this introduction, guiding you through 20 projects in 20 days using HTML, CSS, and JavaScript.
Download the Required Software's6:57
Install Visual Studio Code, Chrome, and WinRAR, then create a project with index.html, style.css, and script.js, link them, and use the Go Live server extension to view changes.
How to follow and download the source codes1:33
All the 20 Projects Source codes, were added as a download resource section with this lecture make sure to checkout.

News Letter Application Preview0:57
Build the newsletter pop-up application, toggle it with the subscribers button and close it with the cross, and set up font awesome icons by linking the font awesome CSS.
News Letter Application HTML7:25
Implement a newsletter popup in HTML and CSS by linking index.html, styles.css, and script.js, integrating Font Awesome, and creating a newsletter signup form with a toggleable newsletter container.
News Letter Application CSS16:31
Learn how to style a newsletter pop-up with CSS, including reset with universal selectors, flex-centered body, serif typography, and a fixed, hidden-to-visible newsletter panel with interactive controls.
News Letter Application JS2:22
Learn to implement a newsletter popup in a JavaScript project by wiring a toggle newsletter function in script.js, using getElementById, classList, and the active class to show and hide.

CSS Changer Application Preview1:24
Explore building a CSS changer app that uses sliders to modify border radius, padding, blurriness, width, and border color in real time with JavaScript, starting with the HTML section.
CSS Changer Application HTML9:50
Build a CSS changer app with HTML, CSS, and JavaScript, linking index.html to style.css and script.js, using controls for color, width, border radius, padding, blur, and the image.
CSS Changer Application CSS17:33
Create a css changer app by resetting browser defaults, defining css variables, and styling a gradient container with color and range controls. JavaScript updates the image as you adjust inputs.
CSS Changer Application JS9:46
Explore JavaScript for a css changer app by wiring five inputs and a color picker, listening for changes, and updating css variables via setProperty on the root.

Counter Application Preview0:46
Build a counter app where the increase button turns green for positives. Show red for negatives, zero with only a shadow, HTML on a black theme with white text.
Counter Application HTML3:09
Build a counter web application by structuring HTML in index.html with a container, card, heading, and a counter machine showing zero, plus a button group for decrease and increase.
Counter Application CSS11:25
Master CSS styling for a counter app: reset body, apply a gradient background, center a card, style the counter, and enable hover and dynamic green/red borders via JavaScript.
Counter Application JS13:13
Create a JavaScript counter web app using a self-invoking function, query selectors, and event listeners to increment or decrement a count, update display, and adjust the border color by value.

Live Character Count Preview1:57
Build a live character count app by typing text and seeing total characters, including spaces, in real time, while structuring HTML and preventing text area resizing with a JavaScript approach.
Live Character Count HTML6:00
Build a live character count feature in HTML by creating a container, a text area with placeholder, and a dynamic total shown with onkeyup and a span.
Live Character Count CSS10:37
Link the style.css and script.js files in index.html to power a live character count app using a 400px container with a text area, placeholder styling, and a counter.
Live Character Count JS5:01
Create a live character counter in a JavaScript project by detecting key presses on the text area, measuring its length, and updating the counter element via innerText and template string.

Random Number Generator Preview0:45
Learn to build a random number generator in JavaScript by updating a paragraph element on button click, with hover transitions and a reset counter on refresh, starting with the html.
Random Number Generator HTML2:30
Create a functional random number generator web app with HTML, CSS, and JavaScript by building a container, a heading, a generate button, and a zero-initialized result.
Random Number Generator CSS8:49
Style the random number generator user interface with a dark background, center content using flexbox, and a white container with hover, transitions, and a fade-in paragraph animation.
Random Number Generator JS5:32
Build a JavaScript random number generator by linking script.js to index.html, creating a generate random number function with Math.random and Math.floor, and displaying the result after a button click.

Weight Converter Application Preview2:03
Build a weight converter app that converts kilograms to pounds, validates input, and shows error messages for invalid entries. Begin with the HTML part of the project.
Weight Converter Application HTML4:13
Create a weight converter UI in HTML by structuring a container card with a form, linking CSS and Script.js to display results in a span with id convert_wait.
Weight Converter Application CSS11:13
Apply css techniques to build a weight converter interface, including a reset with universal selector, a flex centered layout, a white rounded container, and responsive input and label styling.
Weight Converter Application JS12:28
Develop a kilograms-to-pounds weight converter by handling a form with JavaScript, validating input, and displaying the result using a 2.20462 conversion factor and toFixed formatting.

Code Editor Project Preview3:38
Build the code editor project with HTML, CSS, and JavaScript panes that render live output, including a love calculator example. Follow CodePen-like workflow and include Font Awesome icons via CDN.
Code Editor Project HTML6:09
Create a code editor project using HTML, CSS, and JavaScript by setting up index.html, style.css, and script.js, linking Font Awesome icons, and implementing a keyup run function for output.
Code Editor Project CSS12:32
Master the css for a code editor project by resetting defaults, creating a gradient body, shaping a two-panel layout, styling text areas and an iframe, and customizing labels and icons.
Code Editor Project JS7:12
Build a live code editor project in JavaScript by connecting HTML, CSS, and JS text areas to an iframe output and updating it in real time.

Day of the Week Project Preview0:45
Build the final day of the week project that displays the current day using JavaScript's date function and a simple message, with no user input, preparing for the HTML part.
Day of the Week Project HTML1:56
Build the day-of-week web app by structuring a hidden container, rendering today's message with an h1 and weekday elements, and updating spans via JavaScript; style with CSS.
Day of the Week Project CSS4:13
Apply CSS to center a day-of-the-week display, reset browser defaults, and style headings and weekday blocks using id selectors, colors, font sizes, text transform, and bold weight.
Day of the Week Project JS7:57
Create a day-of-week feature using the date object and getDay, use a switch for all seven days, and update the page with innerHTML including day messages like time to chillax.

Stopwatch Application Preview1:09
Build a stopwatch application with a green card interface, start button hover animation, and start, stop, reset, and resume functionality that updates the seconds display.
Stopwatch Application HTML2:45
Create a stopwatch web app in Visual Studio Code by linking index.html with style.css and script.js, building a container, heading, time display (seconds and Milly), and start, stop, reset buttons.
Stopwatch Application CSS11:11
Master CSS styling for the stopwatch app by building a centered, gradient-backed layout with a monospace theme, capsule time display, and start-stop-reset buttons featuring a bounce hover.
Stopwatch Application JS16:22
Create a functional stopwatch timer in JavaScript by wiring up DOM elements, handling start, stop, and reset actions with setInterval, and formatting milliseconds with leading zeros.

Requirements

Basic understanding of HTML, CSS, and JavaScript, access to a code editor, and a willingness to engage in hands-on project-based learning.

Description

Welcome to our immersive Udemy experience, where 'Hands-On Web Development: 20 Projects in HTML, CSS & JavaScript' is not just a course—it's a thrilling exploration! Dive deep into the vibrant world of web development, where we'll guide you through the creation of 20 captivating projects that transcend the ordinary.

This isn't your typical tutorial; it's a hands-on journey through the realms of HTML, CSS, and JavaScript. Immerse yourself in a dynamic learning adventure, where each project is carefully designed to reinforce specific skills, ensuring you emerge with a robust understanding of web development.

Whether you're a coding novice or an intermediate developer, our course meets you right where you are. Beginners will appreciate the step-by-step guidance and practical applications, while intermediate developers can test their mettle with challenging and diverse projects.

Elevate your web design prowess with modern styling techniques. From Flexbox layouts to CSS animations and custom properties, discover the secrets to creating visually stunning and responsive user interfaces.

Unlock the full potential of JavaScript by delving into DOM manipulation, events, array methods, and HTTP requests. Gain a profound understanding of JavaScript as you tackle real-world problems and supercharge the functionality of your projects.

In a rush to embrace frameworks? Not so fast! Our course emphasizes the importance of mastering vanilla JavaScript and understanding the Document Object Model (DOM) before diving into frameworks. Explore HTML5 and CSS, covering everything from basic properties to colors, alignment, flexbox, shadows, custom properties, animations, transitions, and more.

Don't let the idea of 20 projects overwhelm you. Each project is meticulously crafted to be manageable, ensuring you can conquer them in just a few hours. This flexibility caters to learners of all skill levels.

Embark on a thrilling journey with projects such as creating a dynamic news article pop-up, developing a live character count, building a versatile random number generator, and crafting a user-friendly weight converter. From a basic code editor to a functional stopwatch and a dynamic message-writing interface, you'll experience a hands-on education that transforms theoretical knowledge into practical mastery.

Why Choose This Adventure?

Real-world Application: Move beyond theoretical knowledge and apply your skills to practical, real-world scenarios. The 20 hands-on projects simulate challenges you'll encounter in a professional setting.
Flexibility for All Skill Levels: Whether you're a coding novice or an intermediate developer, our course meets you where you are. Beginners benefit from step-by-step guidance, while intermediates can test their mettle with challenging projects.
Modern Styling Techniques: Elevate your web design prowess with styling techniques such as Flexbox layouts, CSS animations, and custom properties. Learn to create visually stunning and responsive user interfaces.
Master JavaScript Fundamentals: Unlock the full potential of JavaScript by delving into DOM manipulation, events, array methods, and HTTP requests. Gain a profound understanding of JavaScript and apply it to solve real-world problems.
Vanilla JavaScript Emphasis: Our course emphasizes the importance of mastering vanilla JavaScript and understanding the Document Object Model (DOM) before delving into frameworks. Cover HTML5 and CSS, exploring properties like colors, alignment, flexbox, shadows, custom properties, animations, transitions, and more.

Project Highlights:

News Article Pop-up: Design a dynamic pop-up to showcase news articles, enhancing user interaction on your website.
CSS Changer: Dynamically change CSS styles with JavaScript, creating a customizable user interface.
Counter Web: Develop a web-based counter application, perfect for tracking various metrics and engagement on your site.
Live Character Count: Create a real-time character count feature for text input, essential for form validation and user feedback.
Random Number Generator: Build a versatile random number generator, suitable for gaming or data simulation applications.
Weight Converter: Craft a user-friendly tool to convert weights between different units, enhancing your website's utility.
Code Editor: Develop a basic code editor, immersing yourself in syntax highlighting and text manipulation.
Day of the Week: Implement a project that identifies and displays the current day of the week, adding dynamic content to your site.
Stop-Watch: Build a functional stopwatch application, perfect for timing various activities or events.
Write-a-Message: Create a dynamic message writing interface, exploring the intersection of user input and real-time display.
FORM Validation: Focus on form validation techniques, ensuring that user input meets specified criteria and enhancing data integrity.
Color Changer With Button: Design a color-changing project triggered by a button click, adding an interactive element to your website.
Accordion Project: Implement an accordion-style project for content organization, enhancing the user experience of information presentation.
Telephone Formatter: Craft a tool to format telephone numbers, improving the readability and consistency of user-inputted data.
Cursor Animation: This project explores the creative integration of CSS and JavaScript to transform the cursor into an animated element, adding a unique touch to the user experience.
HEX Color Generator: Build a project generating random HEX color codes, perfect for design inspiration or dynamic color schemes.
Piano Application: Develop a simple piano application using HTML, CSS, and JavaScript, exploring the integration of multimedia elements.
Background Color: Implement a project allowing users to change background colors dynamically, adding a personal touch to your website.
The Popover: Create a popover component for enhanced user interaction, improving the accessibility of additional information.
FD Calculator: Build a calculator specifically designed for fixed deposits, catering to financial and planning needs.

Join us as we unravel the intricacies of web development through engaging, hands-on projects. Whether you're aspiring to be a front-end developer, looking to enhance your portfolio, or simply craving the joy of creating, this course is your gateway to a world of possibilities. Enroll now and let the coding adventure begin – it's time to turn your aspirations into web development triumphs!"

Who this course is for:

Beginners seeking hands-on web development projects.
Intermediate developers looking to reinforce HTML, CSS, and JavaScript skills.
Those wanting to master vanilla JavaScript before exploring front-end frameworks.
Individuals aspiring to build a diverse portfolio of real-world projects.
Coding enthusiasts eager to enhance their understanding of the Document Object Model (DOM).
Anyone desiring practical experience in modern styling techniques and web design.

JavaScript 20 Projects In 20 Days HTML, CSS & JavaScript

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 10min

News Article Pop-up:4 lectures • 27min

CSS Changer:4 lectures • 39min

Counter Web Application:4 lectures • 29min

Live Character Count:4 lectures • 24min

Random Number Generator:4 lectures • 18min

Weight Converter:4 lectures • 30min

Code Editor:4 lectures • 30min

Day of the Week:4 lectures • 15min

Stop-Watch:4 lectures • 31min

Requirements

Description

Who this course is for: