21 Days Web Development Project Plan

Day 17: Interactive Form

1. Understand Interactive Forms: Interactive forms provide users with various input types like text fields, dropdowns, radio buttons, checkboxes, and validations to ensure correct data submission.

2. Set Up Your Project: Open your text editor and create a new file named interactive_form.html.

3. Set Up the Structure: Add the basic structure of an HTML document, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags.

4. Create the Form Layout: Inside the <body> tag, create a form with various input fields, including text inputs, email, password, dropdowns, radio buttons, checkboxes, and a submit button.

   <!DOCTYPE html>
   <html>
   <head>
       <title>Interactive Form</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div class="form-container">
           <h2>Sign Up</h2>
           <form id="signupForm">
               <label for="username">Username:</label>
               <input type="text" id="username" name="username" required>

               <label for="email">Email:</label>
               <input type="email" id="email" name="email" required>

               <label for="password">Password:</label>
               <input type="password" id="password" name="password" required>

               <label for="country">Country:</label>
               <select id="country" name="country">
                   <option value="usa">USA</option>
                   <option value="canada">Canada</option>
                   <option value="uk">UK</option>
                   <option value="australia">Australia</option>
               </select>

               <label>Gender:</label>
               <label><input type="radio" name="gender" value="male" required> Male</label>
               <label><input type="radio" name="gender" value="female"> Female</label>
               <label><input type="radio" name="gender" value="other"> Other</label>

               <label><input type="checkbox" name="terms" required> I agree to the terms and conditions</label>

               <button type="submit">Sign Up</button>
           </form>
       </div>
       <script src="script.js"></script>
   </body>
   </html>
   

5. Add Basic CSS Styling: Create a new file named styles.css and link it to your HTML document. Add styles to make the form visually appealing.

   body {
       font-family: Arial, sans-serif;
       background-color: #f4f4f4;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
       margin: 0;
   }

   .form-container {
       background-color: white;
       padding: 20px;
       border-radius: 10px;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
       width: 300px;
   }

   .form-container h2 {
       margin-bottom: 20px;
   }

   form {
       display: flex;
       flex-direction: column;
   }

   label {
       margin-bottom: 5px;
   }

   input[type="text"],
   input[type="email"],
   input[type="password"],
   select {
       margin-bottom: 20px;
       padding: 10px;
       border: 1px solid #ccc;
       border-radius: 5px;
       font-size: 16px;
   }

   input[type="radio"],
   input[type="checkbox"] {
       margin-right: 10px;
   }

   button {
       padding: 10px;
       background-color: #4CAF50;
       color: white;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       font-size: 16px;
   }

   button:hover {
       background-color: #45a049;
   }

21 Days Web Development Project Plan

Day 18: Image Slider

1. Understand Image Sliders: An image slider allows users to view multiple images in a slideshow format, often with navigation controls for moving between slides.

2. Set Up Your Project: Open your text editor and create a new file named image_slider.html.

3. Set Up the Structure: Add the basic structure of an HTML document, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags.

4. Create the Slider Layout: Inside the <body> tag, create a div to contain the slider images and navigation buttons.

   <!DOCTYPE html>
   <html>
   <head>
       <title>Image Slider</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div class="slider">
           <div class="slides">
               <div class="slide"><img src="https://via.placeholder.com/800x400" alt="Slide 1"></div>
               <div class="slide"><img src="https://via.placeholder.com/800x400" alt="Slide 2"></div>
               <div class="slide"><img src="https://via.placeholder.com/800x400" alt="Slide 3"></div>
               <div class="slide"><img src="https://via.placeholder.com/800x400" alt="Slide 4"></div>
           </div>
           <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
           <a class="next" onclick="plusSlides(1)">&#10095;</a>
       </div>
       <script src="script.js"></script>
   </body>
   </html>
   

5. Add Basic CSS Styling: Create a new file named styles.css and link it to your HTML document. Add styles to make the slider visually appealing and functional.

   body {
       font-family: Arial, sans-serif;
       margin: 0;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
       background-color: #f4f4f4;
   }

   .slider {
       position: relative;
       width: 80%;
       max-width: 800px;
   }

   .slides {
       display: flex;
       overflow: hidden;
       width: 100%;
   }

   .slide {
       min-width: 100%;
       transition: 0.5s;
   }

   .slide img {
       width: 100%;
       display: block;
   }

   .prev, .next {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       background-color: rgba(0, 0, 0, 0.5);
       color: white;
       padding: 10px;
       cursor: pointer;
       border-radius: 50%;
       user-select: none;
   }

   .prev {
       left: 10px;
   }

   .next {
       right: 10px;
   }
   

6. Add JavaScript for Slider Functionality: Create a new file named script.js and link it to your HTML document. Add JavaScript to handle the sliding of images.

   let slideIndex = 1;
   showSlides(slideIndex);

   function plusSlides(n) {
       showSlides(slideIndex += n);
   }

   function showSlides(n) {
       let slides = document.getElementsByClassName("slide");
       if (n > slides.length) { slideIndex = 1 }
       if (n < 1) { slideIndex = slides.length }
       for (let i = 0; i < slides.length; i++) {
           slides[i].style.display = "none";
       }
       slides[slideIndex - 1].style.display = "block";
   }
   

7. Test the Slider: Save your image_slider.html, styles.css, and script.js files. Open the HTML file in a web browser and test the slider by clicking the navigation arrows. Ensure that the images slide correctly.

8. Enhance the Slider: Improve the slider by adding more images, autoplay functionality, and additional navigation controls like dots for each slide. Customize the styling further to match your design preferences.

9. Resources:
- W3Schools - How TO Slideshow
- MDN Web Docs - HTML img Element
- CSS Tricks - AnythingSlider

10. Publish Your Image Slider: Once you're satisfied with your image slider, upload your HTML, CSS, and JavaScript files to your hosting service to share it online.

Web Development Best Resources: https://topmate.io/coding/930165

Share with credits: https://t.me/webdevcoursefree

ENJOY LEARNING 👍👍

21 Days Web Development Project Plan

Day 19: CSS Animations

1. Understand CSS Animations: CSS animations allow you to animate the properties of HTML elements, creating dynamic and interactive web experiences.

2. Set Up Your Project: Open your text editor and create a new file named css_animations.html.

3. Set Up the Structure: Add the basic structure of an HTML document, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags.

4. Create the Animation Elements: Inside the <body> tag, create elements that you will animate, such as a box and some text.

   <!DOCTYPE html>
   <html>
   <head>
       <title>CSS Animations</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div class="animation-container">
           <div class="box"></div>
           <h1 class="animated-text">CSS Animations are Cool!</h1>
       </div>
   </body>
   </html>
   

5. Add Basic CSS Styling: Create a new file named styles.css and link it to your HTML document. Add styles for the layout and basic appearance of your elements.

   body {
       font-family: Arial, sans-serif;
       margin: 0;
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100vh;
       background-color: #f4f4f4;
   }

   .animation-container {
       text-align: center;
   }

   .box {
       width: 100px;
       height: 100px;
       background-color: #4CAF50;
       margin-bottom: 20px;
   }

   .animated-text {
       font-size: 2em;
       color: #333;
   }
   

6. Create CSS Animations: Add keyframes and animation properties to animate the box and text.

   /* Box Animation */
   @keyframes moveBox {
       0% {
           transform: translateX(0);
       }
       50% {
           transform: translateX(200px);
           background-color: #FF6347;
       }
       100% {
           transform: translateX(0);
           background-color: #4CAF50;
       }
   }

   .box {
       animation: moveBox 4s infinite;
   }

   /* Text Animation */
   @keyframes fadeInOut {
       0%, 100% {
           opacity: 0;
       }
       50% {
           opacity: 1;
       }
   }

   .animated-text {
       animation: fadeInOut 6s infinite;
   }
   

7. Test the Animations: Save your css_animations.html and styles.css files. Open the HTML file in a web browser to see the animations in action. The box should move horizontally and change color, while the text fades in and out.

8. Enhance the Animations: Experiment with different animation properties, keyframes, and timing functions. Try animating other properties like size, position, and rotation to create more complex animations.

9. Resources:
- [MDN Web Docs - Using CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
- [W3Schools - CSS Animations](https://www.w3schools.com/css/css3_animations.asp)
- [CSS Tricks - Animations](https://css-tricks.com/almanac/properties/a/animation/)

10. Publish Your CSS Animations: Once you're satisfied with your animations, upload your HTML and CSS files to your hosting service to share them online.

Web Development Best Resources: https://topmate.io/coding/930165

Share with credits: https://t.me/webdevcoursefree

ENJOY LEARNING 👍👍

21 Days Web Development Project Plan

Day 20: Responsive Navigation

1. Understand Responsive Navigation: A responsive navigation menu adapts to various screen sizes, ensuring a good user experience on both desktop and mobile devices.

2. Set Up Your Project: Open your text editor and create a new file named responsive_navigation.html.

3. Set Up the Structure: Add the basic structure of an HTML document, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags.

4. Create the Navigation Menu: Inside the <body> tag, create a navigation bar with a list of links. Add a button for toggling the menu on smaller screens.

   <!DOCTYPE html>
   <html>
   <head>
       <title>Responsive Navigation</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <nav class="navbar">
           <div class="navbar-brand">MyWebsite</div>
           <button class="navbar-toggle" id="navbarToggle">&#9776;</button>
           <ul class="navbar-menu" id="navbarMenu">
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Services</a></li>
               <li><a href="#">Contact</a></li>
           </ul>
       </nav>
       <script src="script.js"></script>
   </body>
   </html>
   

5. Add Basic CSS Styling: Create a new file named styles.css and link it to your HTML document. Add styles for the layout and appearance of your navigation bar.

   body {
       font-family: Arial, sans-serif;
       margin: 0;
       background-color: #f4f4f4;
   }

   .navbar {
       display: flex;
       justify-content: space-between;
       align-items: center;
       background-color: #333;
       padding: 10px;
       color: white;
   }

   .navbar-brand {
       font-size: 1.5em;
   }

   .navbar-toggle {
       display: none;
       background-color: #333;
       color: white;
       border: none;
       font-size: 1.5em;
       cursor: pointer;
   }

   .navbar-menu {
       list-style: none;
       display: flex;
       margin: 0;
       padding: 0;
   }

   .navbar-menu li {
       margin: 0 10px;
   }

   .navbar-menu a {
       color: white;
       text-decoration: none;
       padding: 8px 16px;
       display: block;
   }

   .navbar-menu a:hover {
       background-color: #575757;
   }

   @media (max-width: 768px) {
       .navbar-menu {
           display: none;
           flex-direction: column;
           width: 100%;
       }

       .navbar-menu li {
           margin: 0;
       }

       .navbar-toggle {
           display: block;
       }

       .navbar-menu.active {
           display: flex;
       }
   }
   

6. Add JavaScript for Menu Toggle: Create a new file named script.js and link it to your HTML document. Add JavaScript to handle the menu toggle on smaller screens.

   document.getElementById('navbarToggle').addEventListener('click', function() {
       const menu = document.getElementById('navbarMenu');
       menu.classList.toggle('active');
   });
   

7. Test the Navigation: Save your responsive_navigation.html, styles.css, and script.js files. Open the HTML file in a web browser and resize the browser window to see how the navigation adapts. Click the toggle button on smaller screens to ensure the menu opens and closes correctly.

8. Enhance the Navigation: Improve the navigation by adding dropdown menus, additional styling, and transitions for smoother animations. Customize the layout further to match your design preferences.

9. Resources:
- MDN Web Docs - Responsive Design
- W3Schools - How TO Responsive Top Navigation
- CSS Tricks - Responsive Design

10. Publish Your Responsive Navigation: Once you're satisfied with your responsive navigation, upload your HTML, CSS, and JavaScript files to your hosting service to share it online.

Web Development Best Resources: https://topmate.io/coding/930165

Share with credits: https://t.me/webdevcoursefree

ENJOY LEARNING 👍👍

21 Days Web Development Project Plan

Day 21: Final Project

1. Plan Your Project: Reflect on what you've learned over the past 20 days and decide on a project that combines several of these skills. Some ideas include:
- A personal portfolio website
- A small business website
- A blog with multiple posts
- An e-commerce product page

2. Set Up Your Project: Open your text editor and create a new project folder. Inside, create the necessary files (e.g., index.html, styles.css, script.js).

3. Create the Structure: Set up the basic HTML structure. If you're creating multiple pages, plan out your directory structure and include links between pages.

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Final Project</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <nav class="navbar">
           <div class="navbar-brand">MyPortfolio</div>
           <button class="navbar-toggle" id="navbarToggle">&#9776;</button>
           <ul class="navbar-menu" id="navbarMenu">
               <li><a href="index.html">Home</a></li>
               <li><a href="about.html">About</a></li>
               <li><a href="portfolio.html">Portfolio</a></li>
               <li><a href="contact.html">Contact</a></li>
           </ul>
       </nav>

       <header class="hero">
           <h1>Welcome to My Portfolio</h1>
           <p>Discover my work and projects</p>
       </header>

       <section class="content">
           <!-- Add your content here -->
       </section>

       <footer class="footer">
           <p>&copy; 2024 MyPortfolio</p>
       </footer>

       <script src="script.js"></script>
   </body>
   </html>
   

4. Add Content: Fill in the content sections based on your project's focus. If it's a portfolio, include sections for projects, skills, and contact information. For an e-commerce page, include product details, images, and a pricing table.

5. Apply CSS Styling: Create a styles.css file and link it to your HTML document. Style your website using what you've learned, focusing on layout, typography, colors, and responsiveness.

   body {
       font-family: Arial, sans-serif;
       margin: 0;
       padding: 0;
       background-color: #f4f4f4;
   }

   .navbar {
       display: flex;
       justify-content: space-between;
       align-items: center;
       background-color: #333;
       padding: 10px;
       color: white;
   }

   .navbar-brand {
       font-size: 1.5em;
   }

   .navbar-toggle {
       display: none;
       background-color: #333;
       color: white;
       border: none;
       font-size: 1.5em;
       cursor: pointer;
   }

   .navbar-menu {
       list-style: none;
       display: flex;
       margin: 0;
       padding: 0;
   }

   .navbar-menu li {
       margin: 0 10px;
   }

   .navbar-menu a {
       color: white;
       text-decoration: none;
       padding: 8px 16px;
       display: block;
   }

   .navbar-menu a:hover {
       background-color: #575757;
   }

   @media (max-width: 768px) {
       .navbar-menu {
           display: none;
           flex-direction: column;
           width: 100%;
       }

       .navbar-menu li {
           margin: 0;
       }

       .navbar-toggle {
           display: block;
       }

       .navbar-menu.active {
           display: flex;
       }
   }

   .hero {
       text-align: center;
       padding: 50px;
       background-color: #4CAF50;
       color: white;
   }

   .content {
       padding: 20px;
   }

   .footer {
       text-align: center;
       padding: 10px;
       background-color: #333;
       color: white;
   }

Now, let's understand the next web development project:

🚀 Project 2: To-Do List Application Beginner to Intermediate

A To-Do List Application is one of the most common interview and portfolio projects because it teaches you how to build interactive web applications using JavaScript.

Unlike a static website, users can add, edit, delete, and manage tasks, making it a great project for learning real-world frontend development.

🎯 Project Goal

Build a responsive task management application where users can:

➕ Add tasks

✏️ Edit tasks

❌ Delete tasks

✅ Mark tasks as completed

🔍 Search tasks

📂 Filter tasks All, Active, Completed

💾 Save tasks using Local Storage

📱 Mobile Responsive Design

🛠 Technologies Used

Frontend

HTML5, CSS3, JavaScript ES6

Optional

React, Bootstrap / Tailwind CSS

📂 Project Folder Structure

todo-app/

├── index.html

├── style.css

├── script.js

└── icons/

🎨 Application Layout

    My To-Do List

+-----------------------------+

| Enter a new task |

+-----------------------------+

[ Add Task ]

☐ Learn HTML

☐ Practice CSS

☑ Build Portfolio Website

☐ Learn JavaScript

All | Active | Completed

📌 Features

✅ Add Task

Users can type a task and click the Add Task button.

Example HTML:


Add Task

✅ Display Task List

Each task will be added dynamically using JavaScript.

✅ Add Task Using JavaScript

const addBtn = document.getElementById("addBtn");

const taskInput = document.getElementById("taskInput");

const taskList = document.getElementById("taskList");

addBtn.addEventListener("click", () => {

const task = taskInput.value;

if(task === "") return;

const li = document.createElement("li");

li.textContent = task;

taskList.appendChild(li);

taskInput.value = "";

});

✅ Delete Task

Each task should have a Delete button.

Example:

•
Learn JavaScript
Delete

✅ Mark Task as Completed

Example JavaScript

li.addEventListener("click", () => {

li.classList.toggle("completed");

});

Example CSS

.completed {

text-decoration: line-through;

opacity: .6;

}

✅ Edit Task

Allow users to update an existing task.

Example:

const updatedTask = prompt("Edit task:");

if(updatedTask) {

li.firstChild.textContent = updatedTask;

}

✅ Search Tasks

Filter tasks based on the entered keyword.

✅ Filter Tasks

Create three buttons: All, Active, Completed

Users can switch between: All Tasks, Completed Tasks, Pending Tasks

✅ Save Tasks in Local Storage

localStorage.setItem("tasks", JSON.stringify(tasks));

Load tasks when the page opens.

const savedTasks = JSON.parse(localStorage.getItem("tasks"));

This ensures tasks remain available even after refreshing the browser.

🎨 CSS Example

body {

font-family: Arial;

background: #f4f4f4;

}

.todo-container {

max-width: 500px;

margin: auto;

padding: 20px;

}

button {

padding: 10px;

cursor: pointer;

}

📱 Responsive Design

@media(max-width:768px) {

.todo-container {

width: 90%;

}

}