https://github.com/hifza-khalid/html_learning
A structured HTML Learning Repository 📚🚀 for beginners to advanced learners, covering fundamental to complex HTML concepts step by step.
https://github.com/hifza-khalid/html_learning
basics forms frontend html layouts tables tags webdevelopment
Last synced: 4 months ago
JSON representation
A structured HTML Learning Repository 📚🚀 for beginners to advanced learners, covering fundamental to complex HTML concepts step by step.
- Host: GitHub
- URL: https://github.com/hifza-khalid/html_learning
- Owner: Hifza-Khalid
- Created: 2024-11-30T17:15:38.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-22T06:06:48.000Z (over 1 year ago)
- Last Synced: 2025-10-21T06:33:16.128Z (8 months ago)
- Topics: basics, forms, frontend, html, layouts, tables, tags, webdevelopment
- Homepage: https://github.com/Hifza-Khalid/HTML_Learning
- Size: 126 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTML Learning Repository 📂
Welcome to the **HTML Learning** repository! 🚀 This structured folder contains different levels of HTML concepts, organized for a step-by-step learning approach. Each level introduces new HTML elements and functionalities to help you master the fundamentals. 🏆
## 📁 Folder Structure
```
html_learning/
│-- html/
│ │-- level1/
│ │ ├── comment 📝
│ │ ├── pop 🎭
│ │-- level2/
│ │ ├── anchor 🔗
│ │ ├── big-small 🔠
│ │ ├── bius ✍️
│ │ ├── br 🔄
│ │ ├── heading 🏷️
│ │ ├── hr 📏
│ │ ├── images 🖼️
│ │ ├── paragraph 📖
│ │ ├── pre 📜
│ │ ├── sub-sup 🔢
│ │ ├── video 🎥
│ │-- level3/
│ │ ├── wikipedia 🌐
│ │ ├── youtube 📺
│ │-- level4/
│ │ ├── article 📰
│ │ ├── aside 📌
│ │ ├── block-inline 📦
│ │ ├── div 🔳
│ │ ├── footer 🚦
│ │ ├── header 🏛️
│ │ ├── main 🎯
│ │ ├── nav 🧭
│ │ ├── section 📂
│ │ ├── span ✨
│ │-- level5/
│ │ ├── iframe 🌍
│ │ ├── ordered-list 🔢
│ │ ├── table 📊
│ │ ├── unordered-list 🔘
│ │-- form/
│ ├── checkbox ☑️
│ ├── input-basics 🎤
│ ├── input-submit 🚀
│ ├── input-types 🔣
│ ├── label 🏷️
│ ├── radio 🔘
│ ├── select 🔽
│ ├── text-area ✍️
```
## 📚 Levels Breakdown
### Level 1: Basics 🏁
- `comment` 📝 – How to add comments in HTML
- `pop` 🎭 – Basic pop-up alerts and messages
### Level 2: Essential Elements ⚡
- `anchor` 🔗 – Hyperlinks (`` tag)
- `big-small` 🔠 – Text size formatting (``, ``)
- `bius` ✍️ – Bold, Italic, Underline, and Strike (``, ``, ``, ``)
- `br` 🔄 – Line breaks (`
`)
- `heading` 🏷️ – Headings (`` to ``)
- `hr` 📏 – Horizontal lines (`
`)
- `images` 🖼️ – Adding images (`![]()
`)
- `paragraph` 📖 – Paragraph formatting (`
`)
- `pre` 📜 – Preformatted text (`
`)
- `sub-sup` 🔢 – Subscript and Superscript (``, ``)
- `video` 🎥 – Embedding videos (``)
### Level 3: Embedding & Links 🌍
- `wikipedia` 🌐 – Embedding Wikipedia links
- `youtube` 📺 – Embedding YouTube videos
### Level 4: Page Layout 🎨
- `article` 📰 – Defining an article section
- `aside` 📌 – Sidebar content
- `block-inline` 📦 – Understanding block and inline elements
- `div` 🔳 – Divisions and containers
- `footer` 🚦 – Footer section
- `header` 🏛️ – Header section
- `main` 🎯 – Main content area
- `nav` 🧭 – Navigation menus
- `section` 📂 – Organizing page sections
- `span` ✨ – Inline container for styling
### Level 5: Advanced Elements 🚀
- `iframe` 🌍 – Embedding external pages (``)
- `ordered-list` 🔢 – Numbered lists (`
`)
- `table` 📊 – Creating tables (``)
- `unordered-list` 🔘 – Bullet point lists (``)
### Forms: User Input 📝
- `checkbox` ☑️ – Checkbox input (``)
- `input-basics` 🎤 – Basic text input fields
- `input-submit` 🚀 – Submit buttons (``)
- `input-types` 🔣 – Different input types (`text`, `password`, `email`, etc.)
- `label` 🏷️ – Labeling form elements (``)
- `radio` 🔘 – Radio buttons (``)
- `select` 🔽 – Dropdown menus (``)
- `text-area` ✍️ – Multi-line input (``)
## 🎯 How to Use
1. Navigate through each level step by step.
2. Open the respective HTML files in your browser or code editor.
3. Experiment with the code and make modifications.
4. Practice by creating new files and implementing variations.
5. Have fun learning HTML! 🎉
## 🚀 Contribution
Feel free to contribute by adding new concepts, improving explanations, or refining existing code. Let's learn and grow together! 🤝