Teach on Udemy

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

Learn More

Your cart is empty.

Keep shopping

20 Web Projects build 20 HTML, CSS and JavaScript projects

Name: 20 Web Projects build 20 HTML, CSS and JavaScript projects
Rating: 4.2 (510 reviews)

Modern HTML5, CSS3, and JavaScript to build Responsive and Mobile Friendly projects for your dream portfolio and resume!

Created byVijay Kumar

Last updated 12/2023

English

What you'll learn

Immerse yourself in the creation of 20 captivating web projects using pure JavaScript, HTML5, and CSS3, with all the code at your fingertips.
Journey from a total beginner to a confident JavaScript developer, gaining the skills and knowledge needed to excel in the field.
Acquire the art of writing clean, maintainable, and high-performing JavaScript code, setting you apart as a skilled developer.
Navigate the realm of Web APIs, including localStorage, DOM manipulation, and more, to elevate your applications with dynamic functionality.
Harness the potential of modern CSS3, utilizing Animations, Transitions, Variables, and other tools to add flair and interactivity to your designs.
Steer clear of common pitfalls by learning from the mistakes commonly made by JavaScript programmers and beginners.
Unleash your creativity and expertise as you build 20 stunning and customizable real-world front-end applications, each showcasing your newfound skills.

Course content

22 sections • 84 lectures • 10h 29m total length

Introduction1:54
Begin your journey with an introduction to building 20 web projects using HTML, CSS, and JavaScript.
2 Download the Required Software's for the Course6:57
Set up your environment by installing Visual Studio Code, Chrome, and WinRAR; create a project folder, set up index.html, style.css, and script.js, and run the live server to preview changes.

Drops Animation Preview1:17
Produce the final version of the drops animation project using CSS to randomly spawn a span element in the viewport every 500 ms and remove it after six seconds.
Drops Animation HTML1:23
Create a drops animation using HTML, CSS, and JavaScript by building a container, dynamically generating span elements, and applying CSS keyframe animations, previewing the app in Chrome.
Drops Animation CSS4:44
Reset browser defaults and set up the drops animation with the drop class and keyframes. Style the yellow-green body, 5rem drops, 4px border, rgba(0,0,0,.6), and absolute positioning.
Drops Animation JS6:23
Create a drops animation in JavaScript by referencing a container, creating span drops with random top and left positions, and removing them after 6.5 seconds for smooth visuals.

Name Tag Sticker Preview1:03
Preview the name tag stickers application, an HTML, CSS, and JavaScript project that displays data defined in code with rounded sticker cards and randomly shifting colors in a horizontal layout.
Name Tag Sticker HTML3:14
Name Tag Sticker CSS8:52
Name Tag Sticker JS12:03
Create dynamic name tag stickers with JavaScript by cloning a template, populating with names, and applying random colors and rotation, with periodic refresh and a cursive font.

Coin Flip Application Preview1:36
Coin Flip Application HTML3:57
build a coin flip web app using html css and javascript. create a coin container with heads and tails, a flip button, and dynamic status and counts.
Coin Flip Application CSS9:44
Style the coin flip application CSS to center content, create a circular coin, and implement flip animations with keyframes and transforms.
Coin Flip Application JS15:25

Smoke Effect Preview1:16
Smoke Effect HTML2:58
Smoke Effect CSS6:47
Build a smoke animation in CSS by resetting browser styles, centering a section with flex, applying a linear gradient background, and animating a hover-triggered smoke effect with keyframes and transforms.
Smoke Effect JS5:46
Implement a smoke text effect by using JavaScript to get the H1 by id, wrap text in spans via regex, and trigger a hover-activated CSS active class.

Time Line Project Preview2:02
Time Line Project HTML3:44
Link the style.css and script.js to the index.html, then build a timeline application with a container, next and previous buttons, and five circular steps.
Time Line Project CSS11:16
Time Line Project JS11:43
Develop a JavaScript timeline with next and previous controls, circles with an active class, and a progress line by updating the DOM, CSS classes, and the timeline width.

Drag and Drop Preview1:54
Learn to build a drag and drop web app with mouse down, move, and up events, dragging rectangular boxes and tracking cursor positions in HTML, CSS, and JavaScript.
Drag and Drop HTML2:52
Develop a drag-and-drop HTML project by building a container with 12 draggable divisions, using index.html, style.css, and script.js in VS Code, served by the Go Live server.
Drag and Drop CSS7:05
Master css fundamentals by resetting browser styles, applying box-sizing, and building a centered flex layout with a gradient container and individually colored, hover-responsive boxes.
Drag and Drop JS14:27
Implement a vanilla JavaScript drag-and-drop feature by wiring mouse down, move, and up events on draggable boxes, tracking coordinates and updating left and top positions.

Temperature Converter Preview1:56
Build a temperature converter web app using html, css, and javascript with a gradient card UI, Celsius and Fahrenheit inputs, and a live conversion output.
Temperature Converter HTML3:50
Turn the temperature converter project into a functional HTML card with Celsius and Fahrenheit inputs, linked styles and scripts, and a convert button.
Temperature Converter CSS7:21
Style a temperature converter page with CSS by centering a card using flex, applying a linear gradient, and designing inputs and a green hover button with rounded corners.
Temperature Converter JS11:04

Click to Visible Letters Preview1:01
Explore the click to visible letters project by revealing V, I, J with each click, featuring a blue and red gradient and multiple click listeners in html, css, and javascript.
Click to Visible Letters HTML2:27
Click to Visible Letters CSS3:58
Click to Visible Letter JS4:32
Master the click to visible letters project in JavaScript by selecting elements with document.getElementById, attaching click listeners, and toggling display from none to block to reveal the final word Vijay.

Requirements

Only a basic understanding of HTML & CSS & JavaScript
Any computer and OS will work — Windows, Mac or Linux.

Description

Embark on a transformative journey into the world of JavaScript with our comprehensive course, "JavaScript Mastery: Build 20 Real Projects." Whether you're a total beginner or looking to enhance your coding prowess, this course is your gateway to becoming a confident JavaScript developer. Utilizing modern ES6, ES7, ES8, ES9, and ES10 features, you'll not only master the language but also gain hands-on experience through 20 real-world projects that will elevate your portfolio.

So what are we building? Get ready for this:

1. Key-Codes Application: Uncover the magic behind key codes and implement an application that showcases the real-time interpretation of keyboard input.

2. Drops Animation Project: Dive into the world of animations with a mesmerizing project that simulates animated drops falling on a screen.

3. Name Tag Application: Create a personalized name tag application that allows users to input their names and generates a dynamic, stylized tag.

4. Coin Flip Application: Develop a fun and interactive coin-flipping application, complete with animated flips and dynamic outcomes.

5. Smoke Effect Project: Master the art of visual effects with a captivating smoke effect project, demonstrating the power of JavaScript in creating immersive UI experiences.

6. Timeline Project: Construct a dynamic timeline application that visually represents events chronologically, enhancing your understanding of data visualization.

7. Drag and Drop Project: Learn the principles of drag-and-drop functionality by building an application that enables users to effortlessly rearrange elements.

8. Temperature Converter: Develop a practical temperature converter application, providing users with a seamless tool for converting between Celsius and Fahrenheit.

9. Click on Visible Letters Project: Explore interactivity with an engaging project that reacts to user clicks, revealing hidden letters and enhancing user engagement.

10. Copy to Clipboard Application: Implement a clipboard functionality that empowers users to easily copy text, adding a practical touch to your skill set.

11. Slider to Change BG Color Application: Elevate your design skills by creating a slider application that dynamically changes the background color, emphasizing the power of user interface customization.

12. Testimonial Slider Project: Craft a testimonial slider that seamlessly showcases user reviews, combining JavaScript functionality with a polished user interface.

13. Icon Hover Effect Project: Delve into creative design with an icon hover effect project, demonstrating the synergy between JavaScript and visual aesthetics.

14. Navigation Bar Project: Build a sophisticated navigation bar that enhances user experience, incorporating smooth transitions and responsive design elements.

15. Floating Bubbles Project: Dive into the world of dynamic visual effects by creating a floating bubbles project, adding an extra layer of interactivity to your repertoire.

16. Stopwatch Timer Application: Develop a versatile stopwatch timer application that combines precision timekeeping with a user-friendly interface.

17. Vowel Counter Application: Explore string manipulation and build a vowel counter application, showcasing practical JavaScript applications in text analysis.

18. Poll System Application: Construct a robust poll system application, demonstrating your ability to manage and display user-generated data dynamically.

19. Random Password Generator Application: Enhance your cybersecurity skills by creating a random password generator application, emphasizing the importance of secure coding practices.

20. Cash Calculator Application: Develop a financial tool with a cash calculator application, showcasing the versatility of JavaScript in real-world applications.

Why Learn HTML, CSS, and JavaScript:

Mastering HTML, CSS, and JavaScript is the cornerstone of web development. HTML structures the content, CSS styles the presentation, and JavaScript brings interactivity to life. Together, they form the essential trio that empowers you to build dynamic and engaging web applications.

HTML (HyperText Markup Language): Learn the foundation of web development, as HTML structures the content of websites. Understand how to create well-organized and semantic markup for enhanced accessibility and SEO.

CSS (Cascading Style Sheets): Elevate your design skills with CSS, as it enables you to style and format HTML elements. Dive into animations, transitions, and responsive design to create visually stunning and user-friendly interfaces.

JavaScript: Unleash the full potential of web development with JavaScript. From dynamic content updates to interactive user interfaces, JavaScript is the scripting language that adds life and functionality to your web applications.

By mastering these technologies, you not only gain the skills to build captivating projects but also open the door to endless opportunities in the ever-evolving world of web development. Enroll today to start your journey toward becoming a well-rounded and proficient developer.

Your journey starts now. See you on the course! :)

Who this course is for:

Anyone who feels like they can't build JavaScript projects on their own
Anyone who wants to become a web developer, switch careers, or freelance as a JavaScript developer.
New or junior developers who want to learn modern JavaScript
Programmers who want to learn frontend web development
Anyone who needs to add more projects to their portfolio or resume
Developers who know the basics of JavaScript and want to deepen their knowledge

20 Web Projects build 20 HTML, CSS and JavaScript projects

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 9min

Key Codes Project4 lectures • 29min

Drops Animation Project4 lectures • 14min

Name Tag Sticker Project4 lectures • 25min

Coin Flip Application4 lectures • 31min

Smoke Effect4 lectures • 17min

Timeline Project4 lectures • 29min

Drag and Drop Application4 lectures • 26min

Temperature Converter Application4 lectures • 24min

Click to Visible Application4 lectures • 12min

Requirements

Description

Who this course is for: