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.
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 📚
To run the project on your local machine, follow these steps 🚀:
- Clone this repository to your computer:
git clone https://github.com/deryaxacar/html-css-exercises.git
- Navigate into the cloned directory:
cd html-css-exercises/html-css exercises
- Open any HTML file in your browser. For example:
open HtmlExample.html
- 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
- 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!