Development > Web Development
8.5 h
£19.99 Free for 3 days
Master JavaScript with 20 Hands-On Projects: Build Real Websites in 20 Days
What you will learn:
- Project-based learning of HTML, CSS, and JavaScript.
- 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.
- Creating a diverse range of web projects from simple to complex.
Description
Ready to become a JavaScript master? This course takes you on a thrilling 20-day journey, building 20 unique web projects, from a dynamic news pop-up to a user-friendly weight converter. No prior coding experience is needed, just a willingness to learn!
We ditch the typical tutorials and dive straight into practical application. Each project is designed to solidify key concepts, ensuring you gain a deep understanding of HTML, CSS, and JavaScript fundamentals. You'll learn:
- Modern styling techniques like Flexbox, CSS animations, and custom properties
- DOM manipulation, events, and array methods for dynamic website functionality
- HTTP requests and their application in real-world web development scenarios
- Form validation techniques to create secure and user-friendly websites
Don't just learn about web development, build it! By the end of this course, you'll have a strong foundation in core web technologies, a portfolio of projects, and the confidence to create your own interactive websites.
Curriculum
Introduction
This section sets the stage for your web development journey. You'll be introduced to the course structure, learn how to set up your development environment, and gain familiarity with the tools you'll use throughout the course. You'll also be guided on how to access and download all the source code for the projects you'll be building.
News Article Pop-up
Start building your interactive website skills by creating a dynamic news article pop-up. You'll learn how to structure the pop-up using HTML, style it with CSS, and add interactivity using JavaScript. This project introduces you to basic HTML, CSS, and JavaScript concepts, laying the groundwork for more complex projects.
CSS Changer
In this section, you'll learn how to dynamically change CSS styles using JavaScript. You'll build an application that allows users to customize the look and feel of a website. This project demonstrates the power of JavaScript for creating user interfaces and enhancing the user experience.
Counter Web Application
This section guides you through the creation of a web-based counter application. You'll learn how to track various metrics and engagement on your site, furthering your understanding of JavaScript's capabilities in data manipulation and interaction.
Live Character Count
This project focuses on real-time feedback by building a character count feature for text input fields. This is a vital skill for form validation and improving user experience by providing immediate feedback on input length.
Random Number Generator
Dive into the world of randomization by creating a versatile random number generator. This project demonstrates JavaScript's ability to generate random numbers, which is useful for applications such as games, data simulation, and more.
Weight Converter
Enhance your website's utility by building a weight converter that allows users to convert weights between different units. This project involves understanding JavaScript's ability to perform calculations and handle user input.
Code Editor
Immerse yourself in the world of text manipulation by developing a basic code editor. This project delves into syntax highlighting, demonstrating JavaScript's ability to interact with text and create user-friendly interfaces for developers.
Day of the Week
This section focuses on adding dynamic content to your website by building a project that identifies and displays the current day of the week. You'll learn how to work with JavaScript's date and time functions.
Stop-Watch
Build a functional stopwatch application to enhance your understanding of JavaScript's ability to handle time intervals. This project teaches you how to manipulate time and create interactive elements.
Write-a-Message
Create a dynamic message writing interface that explores the intersection of user input and real-time display. This project reinforces your knowledge of handling user input and updating the DOM.
FORM Validation
This section is crucial for building secure and user-friendly websites. You'll learn techniques for form validation, ensuring that user input meets specified criteria and enhancing data integrity.
Color Changer With Button
Add interactive elements to your website by building a color-changing project triggered by a button click. This project highlights the power of JavaScript for creating user-driven interactions.
Accordion Project
Implement an accordion-style project for content organization, enhancing the user experience of information presentation. You'll learn how to use JavaScript to control the display and interaction of content.
Telephone Formatter
This section focuses on improving the readability and consistency of user-inputted telephone numbers by crafting a tool that formats them correctly. This project teaches you string manipulation and data formatting in JavaScript.
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. You'll learn how to create custom cursor styles and animations.
HEX Color Generator
Build a project that generates random HEX color codes, perfect for design inspiration or dynamic color schemes. This project demonstrates JavaScript's ability to generate random values and work with colors.
Piano Application
Develop a simple piano application using HTML, CSS, and JavaScript, exploring the integration of multimedia elements. You'll learn how to add sound effects and create interactive musical experiences.
Background Color
This project allows users to change background colors dynamically, adding a personal touch to your website. You'll learn how to manipulate the background color using JavaScript and CSS.
The Popover
Create a popover component for enhanced user interaction, improving the accessibility of additional information. This project teaches you how to implement pop-up windows with JavaScript and CSS for a better user experience.
FD Calculator
This project focuses on practical applications by building a calculator specifically designed for fixed deposits, catering to financial and planning needs. You'll learn how to implement calculations and create user-friendly interfaces for financial tools.
Bonus
This section may contain additional resources, tips, or advanced concepts to further enhance your learning experience.
Deal Source: real.discount