https://github.com/deryaxacar/html-css-exercises
This repository contains various exercises on HTML and CSS. Each file is designed to teach a specific topic and provide opportunities to practice these subjects. The aim is to reinforce basic HTML and CSS knowledge while also gaining a deeper understanding of these topics and learning advanced techniques through practical application.
https://github.com/deryaxacar/html-css-exercises
css css-exercises css-flexbox css-grid css-grid-layout css3 html html-css html-css-exercises html-exercises html5
Last synced: 3 months ago
JSON representation
This repository contains various exercises on HTML and CSS. Each file is designed to teach a specific topic and provide opportunities to practice these subjects. The aim is to reinforce basic HTML and CSS knowledge while also gaining a deeper understanding of these topics and learning advanced techniques through practical application.
- Host: GitHub
- URL: https://github.com/deryaxacar/html-css-exercises
- Owner: deryaxacar
- Created: 2024-05-23T20:47:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-14T18:39:39.000Z (4 months ago)
- Last Synced: 2025-06-14T19:56:08.612Z (4 months ago)
- Topics: css, css-exercises, css-flexbox, css-grid, css-grid-layout, css3, html, html-css, html-css-exercises, html-exercises, html5
- Language: HTML
- Homepage: https://github.com/deryaxacar/html-css-exercises
- Size: 10.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
HTML-CSS Exercises 📝
This repository contains various exercises focused on HTML and CSS topics. Each file is designed to teach a specific subject and provide hands-on practice.
The goal is to reinforce fundamental HTML and CSS knowledge while also gaining deeper insight into these topics and applying advanced techniques through practical examples.
## Table of Contents 📋
- [Overview](#overview)
- [Setup](#setup)
- [Exercises](#exercises)
- [HTML Exercises](#html-exercises)
- [CSS Exercises](#css-exercises)
## Overview
This repository includes various exercises that help me practice HTML and CSS. These exercises cover:
- Basic HTML structures
- CSS selectors
- Advanced layout techniques such as **Flexbox** and **Grid**
- And much more 📚
## Setup
To run the project on your local machine, follow these steps 🚀:
1. Clone this repository to your computer:
```sh
git clone https://github.com/deryaxacar/html-css-exercises.git
```
2. Navigate into the cloned directory:
```sh
cd html-css-exercises/html-css exercises
```
3. Open any HTML file in your browser. For example:
```sh
open HtmlExample.html
```
## Exercises
### HTML Exercises
- **Audio.html**: Using HTML5 audio elements
- **Forms.html**: Creating and using HTML forms
- **HtmlExample.html**: Learning basic HTML structure
- **Link.html**: Creating and using links
- **Lists.html**: Creating ordered and unordered lists
- **Mark-Strong.html**: Using text formatting tags
- **Paragraph-Header.html**: Working with paragraphs and headings
- **Tables.html**: Creating and using tables
- **Video.html**: Using HTML5 video elements
- **İD-Class.html**: Working with ID and class selectors
- **İmage.html**: Displaying images in HTML
### CSS Exercises
- **CssSelectors.html**: CSS selectors and how to use them
- **CssTables.html**: Styling tables with CSS
- **CssTables2.html**: Advanced table styling
- **CssTypes.html**: Types of CSS and how to use them
- **Flexbox.html**: Creating flexible layouts with Flexbox
- **Floats.html**: Using the float property for layout
- **HoverButton.html**: Creating hover effects with CSS
- **Layout.html**: Creating page layouts using CSS
- **Margin.html**: Working with the CSS margin property
- **MediaQueries.html**: Creating responsive designs with media queries
- **Overflow.html**: Handling overflow in CSS
- **Padding.html**: Using the CSS padding property
- **Positions.html**: Positioning elements in CSS (static, relative, absolute, etc.)
- **Pseudo-Class.html**: Using pseudo-classes like :hover, :first-child, etc.
- **background.html**: Background styling in CSS
- **border.html**: Styling borders in CSS
- **em-rem.html**: Using em and rem units
- **icons.html**: Using icons in CSS
- **İnline-Block.html**: Understanding and using inline vs block
- **İnlineBlock.html**: Working with the inline-block layout model
---
I'm sharing the practice work I've done with HTML and CSS in this repository. All kinds of feedback and contributions are welcome!
---
2022 | Created by Derya ACAR