Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pratyush0898/101-html
A collection of 100 HTML projects ranging from beginner to advanced levels. Explore diverse and interactive web designs, from simple forms to complex animations. Perfect for honing your web development skills.
https://github.com/pratyush0898/101-html
Last synced: 16 days ago
JSON representation
A collection of 100 HTML projects ranging from beginner to advanced levels. Explore diverse and interactive web designs, from simple forms to complex animations. Perfect for honing your web development skills.
- Host: GitHub
- URL: https://github.com/pratyush0898/101-html
- Owner: pratyush0898
- License: apache-2.0
- Created: 2024-08-14T12:48:54.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-14T13:13:07.000Z (6 months ago)
- Last Synced: 2024-08-14T15:57:51.962Z (6 months ago)
- Language: HTML
- Size: 1.03 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 101 HTML
Welcome to **101 HTML**! This repository is a comprehensive guide to learning HTML from the ground up. Whether you're a complete beginner or looking to brush up on your HTML skills, this resource will help you understand the building blocks of web development.
## What You'll Learn
- **HTML Basics**: Learn about elements, tags, and the structure of an HTML document.
- **Text Formatting**: How to format text using headings, paragraphs, lists, and more.
- **Links and Images**: Adding hyperlinks and images to your webpages.
- **Tables**: Structuring data with HTML tables.
- **Forms**: Creating forms to collect user input.
- **Semantic HTML**: Understanding the importance of semantic elements for accessibility and SEO.
- **Best Practices**: Tips for writing clean, maintainable HTML code.
## Structure
This repository is organized into several folders, each covering a different project of HTML:
| # | Project |
| :-: | ----------------------------------------------------------------------|
| 001 | [Expanding Cards](001-expanding%20cards) |
| 002 | [Progress Steps](002-progress%20steps) |
| 003 | [Rotating Navigation Animation](003-rotating%20navigation) |
| 004 | [Hidden Search Widget](004-hidden%20search%20widget) |
| 005 | [Blurry Loading](005-blurry%20loading) |
| 006 | [Scroll Animation](006-scroll%20animation) |
| 007 | [Split Landing Page](007-split%20landing%20page) |
| 008 | [Form Wave](008-form%20wave%20animation) |
| 009 | [Sound Board](009-sound%20board) |
| 010 | [Dad Jokes](010-dad%20jokes) |
| 011 | [Event Keycodes](011-event%20KeyCodes) |
| 012 | [FAQ Collapse](012-FAQ%20collapse) |
| 013 | [Random Choice Picker](013-random%20choice%20picker) |
| 014 | [Animated Navigation](014-animated%20navigation) |
| 015 | [Incrementing Counter](015-incrementing%20counter) |
| 016 | [Drink Water](016-drink%20water) |
| 017 | [Movie App](017-movie%20app) |
| 018 | [Background Slider](018-background%20slider) |
| 019 | [Theme Clock](019-theme%20clock) |
| 020 | [Button Ripple Effect](020-button%20ripple%20effect) |
| 021 | [Drag N Drop](021-drag%20n%20drop) |
| 022 | [Drawing App](022-drawing%20app) |
| 023 | [Kinetic Loader](023-kinetic%20loader) |
| 024 | [Content Placeholder](024-content%20placeholder) |
| 025 | [Sticky Navbar](025-sticky%20navigation) |
| 026 | [Double Vertical Slider](026-double%20vertical%20slider) |
| 027 | [Toast Notification](027-toast%20notification) |
| 028 | [GitHub Profiles](028-github%20profiles) |
| 029 | [Double Click Heart](029-double%20click%20heart) |
| 030 | [Auto Text Effect](030-auto%20text%20effect) |
| 031 | [Password Generator](031-password%20generator) |
| 032 | [Good Cheap Fast](032-good%20cheap%20fast) |
| 033 | [Notes App](033-notes%20app) |
| 034 | [Animated Countdown](034-animated%20countdown) |
| 035 | [Image Carousel](035-image%20carousel) |
| 036 | [Hoverboard](036-hoverboard) |
| 037 | [Pokedex](037-pokedex) |
| 038 | [Mobile Tab Navigation](038-mobile%20tab%20navigation) |
| 039 | [Password Strength Background](039-password%20strength%20background) |
| 040 | [3D Background Boxes](040-3d%20boxes%20background) |
| 041 | [Verify Account UI](041-verify%20account%20UI) |
| 042 | [Live User Filter](042-live%20user%20filter) |
| 043 | [Feedback UI Design](043-feedback%20UI%20design) |
| 044 | [Custom Range Slider](044-custom%20range%20slider) |
| 045 | [Netflix Mobile Navigation](045-netflix%20mobile%20navigation) |
| 046 | [Quiz App](046-quiz%20app) |
| 047 | [Testimonial Box Switcher](047-testimonial%20box%20switcher) |
| 048 | [Random Image Feed](048-random%20image%20generator) |
| 049 | [Todo List](049-todo%20list) |
| 050 | [Insect Catch Game](050-insect%20catch%20game) |
| 051 | [Video Background](051-video%20background) |
| 052 | [Portfolio with CSS Grid](052-portfolio%20grid) |
| 053 | [Touch Slider](053-touch%20slider) |
| 054 | [CSS Loaders](054-css%20loaders) |
| 055 | [Glass Dashboard](055-glass%20dashboard) |
| 056 | [Image Comparison Slider](056-image%20comparison%20slider) |
| 057 | [Parallax Background with SVG](057-parallax%20background%20svg) |
| 058 | [3D Product Card](058-3D%20product%20card) |
| 059 | [Form Validator](059-form%20validator) |
| 060 | [Movie Seat Booking](060-movie%20seat%20booking) |
| 061 | [Custom Video Player](061-custom%20video%20player) |
| 062 | [Exchange Rate Calculator](062-exchange%20rate%20calculator) |
| 063 | [DOM Array Methods](063-DOM%20array%20methods) |
| 064 | [Menu Slider & Modal](064-menu%20slider%20modal) |
| 065 | [Hangman Game](065-hangman%20game) |
| 066 | [Meal Finder](066-meal%20finder) |
| 067 | [Expense Tracker](067-expense%20tracker) |
| 068 | [Music Player](068-music%20player) |
| 069 | [Infinite Scroll Posts](069-infinite%20scroll%20posts) |
| 070 | [Typing Game](070-typing%20game) |
| 071 | [Speech Text Reader](071-speech%20text%20reader) |
| 072 | [Memory Cards](072-memory%20cards) |
| 073 | [Lyrics Search App](073-lyrics%20search%20app) |
| 074 | [Relaxer App](074-relaxer%20app) |
| 075 | [Breakout Game](075-breakout%20game) |
| 076 | [New Year Countdown](076-new%20year%20countdown) |
| 077 | [Sortable List](077-sortable%20list) |
| 078 | [Speak Number Guessing Game](078-speak%20number%20guessing%20game) |
| 079 | [Creative Agency Website](079-creative%20agency%20website) |
| 080 | [Health Dashboard](080-health%20dashboard) |
| 081 | [Animated SVG](081-animated%20SVG) |
| 082 | [Parallax Landing Page](082-parallax%20landing%20page) |
| 083 | [Full-Screen Image Slider](083-full%20screen%20image%20slider) |
| 084 | [Fluid Image Lightbox](084-fluid%20image%20lightbox) |
| 085 | [Sneaker Shop](085-sneaker%20shop) |
| 086 | [Coming Soon Page](086-coming%20soon%20page) |
| 087 | [Sliding Sign In & Sign Up Form](087-sliding%20signin%20signup%20form)|
| 088 | [Promo Code](088-promo%20code) |
| 089 | [One Color UI](089-one%20color%20UI) |
| 090 | [Tooltip](090-tooltip) |
| 091 | [Chat Interface](091-chat%20interface) |
| 092 | [Music Streaming Service](092-music%20streaming%20service) |
| 093 | [Creative Portfolio](093-creative%20portfolio) |
| 094 | [Laptop UI](094-laptop%20UI) |
| 095 | [Headphones Product Page](095-headphones%20product%20page) |
| 096 | [Cloud Hosting Service](096-cloud%20hosting%20service) |
| 097 | [Terminal Style Landing Page](097-terminal%20style%20landing%20page) |
| 098 | [Magazine Layout](098-magazine%20layout) |
| 099 | [Parallax Website](099-parallax%20website) |
| 100 | [Hulu Webpage Clone](100-hulu%20webpage%20clone) |
| 101 | [Cascade Layers](101-cascade%20layers) |
| 102 | [Container queries](102-container%20queries) |
## How to Use
1. **Clone the Repository**: Clone this repository to your local machine.
```bash
git clone https://github.com/your-username/101-html.git
cd 101-html
```
2. **Explore the Folders**: Each folder contains HTML files along with explanations and examples. You can open the HTML files in your browser to see the code in action.
3. **Follow Along**: Start with the basics and work your way through the folders. Each topic builds upon the previous one, so it’s recommended to go in order.
4. **Experiment**: Try editing the HTML files to see how changes affect the webpage. This hands-on practice will help solidify your understanding.
## Contributing
Contributions are welcome! If you find any issues or have suggestions for new topics, feel free to open an issue or submit a pull request.
## License
This project is licensed under the Apache 2.0 License - see the [LICENSE](LICENSE) file for details.
## Contact
If you have any questions or feedback, feel free to reach out via GitHub Issues.