Web Design Basics

This project is a collection of fundamental HTML and CSS exercises designed to build foundational web design skills. It includes various HTML structures, CSS styling techniques, and interactive web elements.

Table of Contents

• Project Overview
• Features
• How to Run
• Dependencies
• Screenshots
• Future Work
• Contributors
• License
• Contact

Project Overview

The project covers essential topics such as:

• HTML Pages:

  • background.html – Background and paragraph styling
  • box.html – Box model and border designs
  • exercise.html – Basic inline CSS example
  • exercise2.html – Inline CSS styling
  • float.html – Demonstrating float property
  • form.html – Simple form design
  • groups.html – Group selectors example
  • index.html – Navigation to all examples
  • links.html – Styling links
  • list.html – List styling example
  • menu.html – Navigation menu structure
  • products.html – Placeholder products page
  • about.html – Placeholder about page
  • contact.html – Placeholder contact page
  • page.html – Simple page sections
  • pagelayout.html – Layout with article and aside
  • paragraph.html – Paragraph styling
  • position.html – Positioning example
  • priority.html – CSS specificity example
  • shadow.html – Box shadow example
  • table.html – Table design and background integration

• CSS:

  • style.css – General stylesheet

• Images:

  • pictures/maiden-tower-sunset.jpg – Background image
  • pictures/submit.png – Submit button
  • pictures/submit2.png – Direction button

Features

• Responsive HTML and CSS designs
• Interactive form elements
• Structured and organized codebase
• Basic examples to learn web design fundamentals

How to Run

1. Clone or download the project:

   git clone https://github.com/cihat-kose/web-design-basics.git

2. Navigate to the project directory:

   cd web-design-basics

3. Open index.html in your web browser to view the project.
4. Alternatively, open individual HTML files (background.html, form.html) directly in your browser.
5. Modify the CSS and HTML to customize and improve the designs.

Dependencies

• Modern web browser (Chrome, Firefox, etc.)
• Basic knowledge of HTML and CSS for customization.

Screenshots

Here is a preview of the project:

Future Work

• Add JavaScript interactivity
• Implement advanced CSS animations
• Develop mobile-specific designs for better UX

Contributors

• Cihat Köse

To contribute:

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

   git checkout -b feature-branch

3. Commit your changes:

   git commit -m 'Add new feature'

4. Push to the branch:

   git push origin feature-branch

5. Create a Pull Request.

License

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

Contact

For any questions, feedback, or contributions, please open an issue in this repository.
Alternatively, you can reach out via email or through GitHub.