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

A collection of HTML and CSS examples covering layout, styling, forms, links, and menus. Ideal for beginners to explore fundamental web development concepts through hands-on practice.
https://github.com/cihat-kose/web-design-basics

beginner-friendly css frontend html html5-css3 responsive-design web-design website

Last synced: 3 months ago
JSON representation

A collection of HTML and CSS examples covering layout, styling, forms, links, and menus. Ideal for beginners to explore fundamental web development concepts through hands-on practice.

• Host: GitHub
• URL: https://github.com/cihat-kose/web-design-basics
• Owner: cihat-kose
• License: mit
• Created: 2023-02-16T07:41:24.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2025-01-04T23:47:02.000Z (9 months ago)
• Last Synced: 2025-01-05T00:19:28.005Z (9 months ago)
• Topics: beginner-friendly, css, frontend, html, html5-css3, responsive-design, web-design, website
• Language: HTML
• Homepage:
• Size: 452 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          

# Web Design Basics

![HTML](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)

![CSS](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)

![Responsive Design](https://img.shields.io/badge/Responsive-6DB33F?style=for-the-badge&logo=responsive&logoColor=white)

![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)

![Visual Studio Code](https://img.shields.io/badge/VSCode-0078d7?style=for-the-badge&logo=visual-studio-code&logoColor=white)

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](#project-overview)

- [Features](#features)

- [How to Run](#how-to-run)

- [Dependencies](#dependencies)

- [Screenshots](#screenshots)

- [Future Work](#future-work)

- [Contributors](#contributors)

- [License](#license)

- [Contact](#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:  

   ```bash

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

   ```

2. Navigate to the project directory:  

   ```bash

   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:  

![Background Page](pictures/maiden-tower-sunset.jpg)

## Future Work

- Add JavaScript interactivity  

- Implement advanced CSS animations  

- Develop mobile-specific designs for better UX  

## Contributors

- [Cihat Köse](https://github.com/cihat-kose)  

To contribute:  

1. Fork the repository.  

2. Create a new branch:  

   ```bash

   git checkout -b feature-branch

   ```

3. Commit your changes:  

   ```bash

   git commit -m 'Add new feature'

   ```

4. Push to the branch:  

   ```bash

   git push origin feature-branch

   ```

5. Create a **Pull Request**.

## License

This project is licensed under the MIT License.  

See the [LICENSE](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.