Web-Design Badge

A comprehensive collection of web design projects aligned with the Web Designing Course (2301CS202). This repository showcases practical applications of HTML, CSS, and Bootstrap through hands-on lab assignments.

License Stars Forks

Welcome to the Web-Designing Repository! This repository serves as a practical guide to the Web Designing (2301CS202) course, led by Prof. Vijay M. Shekhat. Each project aligns with specific lab assignments from the course's lab manual, providing a structured approach to learning front-end web development using modern technologies.

• 📘 Comprehensive Web Design Exercises: Projects based on specific lab assignments from the course manual.
• 📱 Responsive Web Design: Implementations using CSS and Bootstrap ensure cross-device compatibility.
• 🔧 Structured Learning: The repository mirrors the course's lab structure, aiding in systematic learning.

• HTML5
• CSS3
• Bootstrap 4/5

To set up this repository locally:

1. Clone the repository:

   git clone https://github.com/jaypatel342005/Web-Designing.git

2. Navigate to the project directory:

   cd Web-Designing

3. Open the project in your preferred code editor.

To view the web pages:

1. Open the HTML files in your browser.
2. For live preview and real-time editing, use a local server like Live Server in Visual Studio Code.

The repository is organized according to the lab assignments outlined in the course manual. Each folder contains the necessary HTML, CSS, and Bootstrap files for a specific lab.

Web-Designing/
├── Lab1/
│ ├── index.html
│ 
├── Lab2/
│ ├── index.html
│
├── Lab3/
│ ├── index.html
│ 
│ ...
├── README.md
└── WD Lab manual.pdf

1. Lab 1: Practice basic HTML tags such as Html, Body, Head, Title, Link, Meta, Address, etc.
2. Lab 2: Demonstrate special HTML controls including Anchor tag, Iframe, List controls, Image control, and Input tag.
3. Lab 3: Create tables using HTML based on provided designs.
4. Lab 4: Design web pages with HTML5 forms and validation.
5. Lab 5: Use list tags, audio, and video tags to create media-rich web pages.
6. Lab 6: Design web pages using div tags and CSS properties.
7. Lab 7: Apply internal, external, and inline CSS stylesheets.
8. Lab 8: Build a personal portfolio webpage using HTML and CSS.
9. Lab 9: Implement various animation effects using CSS.
10. Lab 10: Apply media queries to make web pages responsive.
11. Lab 11: Demonstrate the use of CSS gradients.
12. Lab 12: Create web pages using pseudo-classes and pseudo-elements.
13. Lab 13: Build a homepage using HTML and CSS.
14. Lab 14: Create a product landing page using HTML and CSS.
15. Lab 15: Utilize Bootstrap for typography and responsive design elements.
16. Lab 16: Implement Bootstrap's grid system for layout design.
17. Lab 17: Design web pages using Bootstrap based on provided images.
18. Lab 18: Create a SIGN-IN form using Bootstrap.
19. Lab 19: Redesign forms from Lab 4 using Bootstrap.
20. Lab 20: Design a complete website using HTML, CSS, and Bootstrap.

Note: Lab numbers correspond to specific sections within the WD Lab Manual.

Contributions are welcome! To contribute:

1. 🍴 Fork the repository.
2. 🔀 Create a new branch:

   git checkout -b feature/YourFeatureName

3. 💻 Make your changes and commit them:

   git commit -m 'Add your feature'

4. 📤 Push to the branch:

   git push origin feature/YourFeatureName

5. 🎉 Create a Pull Request.

This repository is licensed under the MIT License. See the LICENSE file for more details.

For detailed instructions and explanations, refer to the WD Lab Manual included in this repository.

If you have any questions or suggestions, feel free to reach out:

• Jay Patel - GitHub | Email

Made with 💻 by Jay Patel