{"id":29161123,"url":"https://github.com/deryaxacar/html-css-exercises","last_synced_at":"2025-07-01T03:08:35.456Z","repository":{"id":299117794,"uuid":"805076249","full_name":"deryaxacar/HTML-CSS-Exercises","owner":"deryaxacar","description":"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.","archived":false,"fork":false,"pushed_at":"2025-06-14T18:39:39.000Z","size":10563,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-14T19:56:08.612Z","etag":null,"topics":["css","css-exercises","css-flexbox","css-grid","css-grid-layout","css3","html","html-css","html-css-exercises","html-exercises","html5"],"latest_commit_sha":null,"homepage":"https://github.com/deryaxacar/html-css-exercises","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deryaxacar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-05-23T20:47:31.000Z","updated_at":"2025-06-14T18:42:43.000Z","dependencies_parsed_at":"2025-06-14T19:57:23.139Z","dependency_job_id":"10407dd1-a014-423b-927e-0cb80d3cf4a5","html_url":"https://github.com/deryaxacar/HTML-CSS-Exercises","commit_stats":null,"previous_names":["deryaxacar/html-css-exercises"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/deryaxacar/HTML-CSS-Exercises","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deryaxacar%2FHTML-CSS-Exercises","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deryaxacar%2FHTML-CSS-Exercises/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deryaxacar%2FHTML-CSS-Exercises/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deryaxacar%2FHTML-CSS-Exercises/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deryaxacar","download_url":"https://codeload.github.com/deryaxacar/HTML-CSS-Exercises/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deryaxacar%2FHTML-CSS-Exercises/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262887199,"owners_count":23379768,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-exercises","css-flexbox","css-grid","css-grid-layout","css3","html","html-css","html-css-exercises","html-exercises","html5"],"created_at":"2025-07-01T03:08:34.365Z","updated_at":"2025-07-01T03:08:35.427Z","avatar_url":"https://github.com/deryaxacar.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eHTML-CSS Exercises 📝\u003c/h1\u003e \u003cimg src=\"https://github.com/deryaxacar/html-css-exercises/blob/main/images.png\" alt=\"html-css Logo\" width=\"170\"\u003e\u003c/br\u003e\u003c/br\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\nThis repository contains various exercises focused on HTML and CSS topics. Each file is designed to teach a specific subject and provide hands-on practice.  \nThe goal is to reinforce fundamental HTML and CSS knowledge while also gaining deeper insight into these topics and applying advanced techniques through practical examples.\n\u003c/p\u003e\n\n## Table of Contents 📋\n\n- [Overview](#overview)\n- [Setup](#setup)\n- [Exercises](#exercises)\n   - [HTML Exercises](#html-exercises)\n   - [CSS Exercises](#css-exercises)\n\n## Overview\n\nThis repository includes various exercises that help me practice HTML and CSS. These exercises cover:\n\n- Basic HTML structures  \n- CSS selectors  \n- Advanced layout techniques such as **Flexbox** and **Grid**  \n- And much more 📚\n\n## Setup\n\nTo run the project on your local machine, follow these steps 🚀:\n\n1. Clone this repository to your computer:\n   ```sh\n   git clone https://github.com/deryaxacar/html-css-exercises.git\n    ```\n2. Navigate into the cloned directory:\n    ```sh\n    cd html-css-exercises/html-css exercises\n    ```\n3. Open any HTML file in your browser. For example:\n    ```sh\n    open HtmlExample.html\n    ```\n\n## Exercises\n\n### HTML Exercises\n\n- **Audio.html**: Using HTML5 audio elements\n- **Forms.html**: Creating and using HTML forms\n- **HtmlExample.html**: Learning basic HTML structure\n- **Link.html**: Creating and using links\n- **Lists.html**: Creating ordered and unordered lists\n- **Mark-Strong.html**: Using text formatting tags\n- **Paragraph-Header.html**: Working with paragraphs and headings\n- **Tables.html**: Creating and using tables\n- **Video.html**: Using HTML5 video elements\n- **İD-Class.html**: Working with ID and class selectors\n- **İmage.html**: Displaying images in HTML\n\n### CSS Exercises\n\n- **CssSelectors.html**: CSS selectors and how to use them\n- **CssTables.html**: Styling tables with CSS\n- **CssTables2.html**: Advanced table styling\n- **CssTypes.html**: Types of CSS and how to use them\n- **Flexbox.html**: Creating flexible layouts with Flexbox\n- **Floats.html**: Using the float property for layout\n- **HoverButton.html**: Creating hover effects with CSS\n- **Layout.html**: Creating page layouts using CSS\n- **Margin.html**: Working with the CSS margin property\n- **MediaQueries.html**: Creating responsive designs with media queries\n- **Overflow.html**: Handling overflow in CSS\n- **Padding.html**: Using the CSS padding property\n- **Positions.html**: Positioning elements in CSS (static, relative, absolute, etc.)\n- **Pseudo-Class.html**: Using pseudo-classes like :hover, :first-child, etc.\n- **background.html**: Background styling in CSS\n- **border.html**: Styling borders in CSS\n- **em-rem.html**: Using em and rem units\n- **icons.html**: Using icons in CSS\n- **İnline-Block.html**: Understanding and using inline vs block\n- **İnlineBlock.html**: Working with the inline-block layout model\n\n---\n\nI'm sharing the practice work I've done with HTML and CSS in this repository. All kinds of feedback and contributions are welcome!\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cb\u003e2022 | Created by Derya ACAR\u003c/b\u003e\n\u003c/div\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderyaxacar%2Fhtml-css-exercises","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fderyaxacar%2Fhtml-css-exercises","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderyaxacar%2Fhtml-css-exercises/lists"}