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
• Setup
• Exercises
  • HTML 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:

   git clone https://github.com/deryaxacar/html-css-exercises.git

2. Navigate into the cloned directory:

   cd html-css-exercises/html-css exercises

3. Open any HTML file in your browser. For example:

   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