https://github.com/yashkolte/html-practice
This repository contains various HTML and CSS practice examples that cover essential topics to help you master web development fundamentals.
https://github.com/yashkolte/html-practice
css html practice-programming
Last synced: 2 months ago
JSON representation
This repository contains various HTML and CSS practice examples that cover essential topics to help you master web development fundamentals.
- Host: GitHub
- URL: https://github.com/yashkolte/html-practice
- Owner: yashkolte
- License: mit
- Created: 2020-09-04T08:39:06.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-21T04:57:05.000Z (5 months ago)
- Last Synced: 2025-01-21T05:26:38.114Z (5 months ago)
- Topics: css, html, practice-programming
- Language: HTML
- Homepage:
- Size: 77.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HTML Practice Repository
Welcome to the **HTML Practice Repository**! This repository contains various HTML and CSS practice examples that cover essential topics to help you master web development fundamentals.
## Directory Structure
```
├── README.md
├── Alignment.html
├── BeforeAfterPseudo.html
├── BorderAndBackground.html
├── CSS.css
├── CSSBoxModel.html
├── CascadingStyleSheet.html
├── ChromeDeveloperTool.html
├── ColorInCSS.html
├── DisplayProperty.html
├── Flexbox.html
├── HTMLEntities.html
├── IdAndClasses.html
├── InlineAndBlockElement.html
├── IntroHtml.html
├── LinkAndImages.html
├── ListAndTable.html
├── MediaQueries.html
├── NavMenu.html
├── PositionProperty.html
├── PseudoSelector.html
├── SelectorInCSS.html
├── SemanticElements.html
├── StylingLinkButton.html
└── VisibilityAndZindex.html
```
## How to Use This Repository
1. **Clone the Repository**
```bash
git clone https://github.com/yashkolte/html-practice.git
cd yashkolte-html-practice
```
2. **Open Files in Your Browser**
- Navigate to the folder where you cloned the repository.
- Open any `.html` file in your favorite browser to view the example.
3. **Edit and Experiment**
- Open the files in a text editor or an IDE like Visual Studio Code.
- Modify the code and refresh the browser to see the changes.
## Topics Covered
### 1. **HTML Basics**
- `IntroHtml.html`: Introduction to HTML structure.
- `IdAndClasses.html`: Using IDs and classes in HTML.
- `SemanticElements.html`: Semantic HTML elements.
### 2. **CSS Basics**
- `CSS.css`: External stylesheet example.
- `SelectorInCSS.html`: CSS selectors overview.
- `ColorInCSS.html`: How to use colors in CSS.
### 3. **Positioning and Layout**
- `PositionProperty.html`: Understanding CSS position property.
- `Flexbox.html`: CSS Flexbox layout examples.
- `CSSBoxModel.html`: CSS box model explained.
### 4. **Interactive Elements**
- `StylingLinkButton.html`: Styling links and buttons.
- `NavMenu.html`: Creating a navigation menu.
### 5. **Advanced Topics**
- `MediaQueries.html`: Responsive design using media queries.
- `BeforeAfterPseudo.html`: Using `::before` and `::after` pseudo-elements.
- `VisibilityAndZindex.html`: Controlling visibility and z-index in CSS.
## Prerequisites
- Basic knowledge of HTML and CSS.
- A text editor or IDE (e.g., Visual Studio Code).
- A modern web browser for testing.
## Contributing
Feel free to contribute to this repository by adding more examples, improving the existing ones, or fixing issues. To contribute:
1. Fork the repository.
2. Create a new branch for your changes.
3. Commit your changes and push them to your fork.
4. Create a pull request to this repository.
## License
This repository is licensed under the [MIT License](LICENSE).
---
Happy Coding! 🎉