{"id":51109368,"url":"https://github.com/kratugautam99/html-and-css-learning","last_synced_at":"2026-06-24T16:02:13.186Z","repository":{"id":363697070,"uuid":"1261360712","full_name":"Kratugautam99/HTML-and-CSS-Learning","owner":"Kratugautam99","description":"This repository documents my journey of learning HTML, CSS, and modern styling frameworks like Tailwind CSS. It contains tutorials, demonstrations, and atomic projects that showcase practical applications of web development concepts.","archived":false,"fork":false,"pushed_at":"2026-06-10T00:54:33.000Z","size":11368,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-10T02:15:32.652Z","etag":null,"topics":["autoprefixer-plugin","bun","css3","edge-dev-tools","flexbox-grid-animations-transitions","html5","javascript","npm","pnpm","postcss-plugin","postman-api","postman-collection","semantic-tags-forms-media-iframes","tailwind-css","transforms-filters-media-queries","vscode-live-server","yarn"],"latest_commit_sha":null,"homepage":"https://developer.mozilla.org/en-US/","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/Kratugautam99.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-06T15:27:42.000Z","updated_at":"2026-06-10T00:55:11.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Kratugautam99/HTML-and-CSS-Learning","commit_stats":null,"previous_names":["kratugautam99/html-and-css-learning"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Kratugautam99/HTML-and-CSS-Learning","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kratugautam99%2FHTML-and-CSS-Learning","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kratugautam99%2FHTML-and-CSS-Learning/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kratugautam99%2FHTML-and-CSS-Learning/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kratugautam99%2FHTML-and-CSS-Learning/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kratugautam99","download_url":"https://codeload.github.com/Kratugautam99/HTML-and-CSS-Learning/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kratugautam99%2FHTML-and-CSS-Learning/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34739426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-24T02:00:07.484Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["autoprefixer-plugin","bun","css3","edge-dev-tools","flexbox-grid-animations-transitions","html5","javascript","npm","pnpm","postcss-plugin","postman-api","postman-collection","semantic-tags-forms-media-iframes","tailwind-css","transforms-filters-media-queries","vscode-live-server","yarn"],"created_at":"2026-06-24T16:02:10.986Z","updated_at":"2026-06-24T16:02:13.161Z","avatar_url":"https://github.com/Kratugautam99.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎨 HTML-and-CSS-Learning \n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original.svg\" width=\"60\" /\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original.svg\" width=\"60\" /\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/tailwindcss/tailwindcss-original.svg\" width=\"60\" /\u003e\n  \u003cbr/\u003e\n  \u003cem\u003eFrom semantic markup to modern layouts – master the building blocks of the web. This repository documents my journey of learning HTML, CSS, and modern styling frameworks like Tailwind CSS.\nIt contains tutorials, demonstrations, and atomic projects that showcase practical applications of web development concepts.\u003c/em\u003e\n\u003c/div\u003e\n\n---\n\n## 📖 Table of Contents\n\n- [ℹ️ About This Repository](#about-this-repository)\n- [📁 Directory Structure](#-directory-structure)\n- [🖼️ Featured Projects](#️-featured-projects)\n  - [M365 Clone](#m365-clone)\n  - [X.com (Twitter) Clone](#xcom-twitter-clone)\n  - [Steam Clone](#steam-clone)\n- [🛠️ Technologies \u0026 Tools](#️-technologies--tools)\n- [🚀 How to Set Up](#-how-to-set-up)\n  - [HTML \u0026 CSS Basics](#html--css-basics)\n  - [Tailwind CSS](#tailwind-css)\n- [🤝 Contributing](#-contributing)\n- [📜 Conclusion](#-conclusion)\n\n---\n\n## About This Repository\n\n\u003e **Your complete guide to HTML, CSS, and Tailwind CSS – filled with tutorials, real‑world clones, and modern styling techniques.**\n\nThis repository is a structured learning path for front‑end styling. It includes:\n\n- **HTML Tutorials** – semantics, forms, media, SEO, and obsolete tags.\n- **CSS Tutorials** – from selectors, box model, flexbox, grid, to animations, transforms, filters, and responsive design.\n- **Tailwind CSS Tutorial** – utility‑first workflow with configuration and build setup.\n- **Three full‑page clones** – M365 (Microsoft 365), X.com (Twitter), and Steam – demonstrating practical application of all learned concepts.\n\nEach folder contains standalone examples, ready to open in your browser, and the clones showcase how to replicate modern web interfaces.\n\n---\n\n## 📁 Directory Structure\n\n```\nHTML-and-CSS-Learning/\n│\n├── Atomic-Projects/                     # Full‑page clones (real‑world UI replication)\n│   ├── M365-Clone/                      # Microsoft 365 landing page clone\n│   ├── X.com-Clone/                     # Twitter (X) home page clone\n│   └── Steam-Clone/                     # Steam store front clone\n│\n├── CSS-Tutorials/                       # 21 progressive CSS lessons (numbered)\n│   ├── 1)_CSS_Injection_Methods\n│   ├── 2)_CSS_Selectors_Showcase\n│   ├── 3)_CSS_Box_Model_and_Margin_Collapse\n│   ├── 4)_CSS_Fonts_Text_and_Color_Properties\n│   ├── 5)_CSS_Cascading_Algorithmic_Laws\n│   ├── 6)_CSS_Font_Size_Units\n│   ├── 7)_CSS_Display_Property\n│   ├── 8)_CSS_Shadows_and_Outlines\n│   ├── 9)_CSS_Lists_Styling\n│   ├── 10)_CSS_Overflow_Solutions\n│   ├── 11)_CSS_Position_Property\n│   ├── 12)_CSS_Variables\n│   ├── 13)_CSS_Media_Queries\n│   ├── 14)_CSS_Float_and_Clears\n│   ├── 15)_CSS_Display_Flexbox\n│   ├── 16)_CSS_Display_Grid\n│   ├── 17)_CSS_Transform_Property\n│   ├── 18)_CSS_Transition_Properties\n│   ├── 19)_CSS_Animation_Properties_and_KeyFrame\n│   ├── 20)_CSS_Object_Fit_and_Object_Position_Properties\n│   └── 21)_CSS_Filter_Property\n│\n├── Demonstration/                       # Screenshots of the three clones\n│   ├── M365-LowerMainPage.png\n│   ├── M365-UpperMainPage.png\n│   ├── Steam-LowerMainPage.png\n│   ├── Steam-UpperMainPage.png\n│   ├── X.com-AfterMessage.png\n│   └── X.com-BeforeMessage.png\n│\n├── HTML-Tutorials/                      # Essential HTML concepts (6 lessons)\n│   ├── 1)_Headings_Paragraph_and_Links\n│   ├── 2)_Table_Image_and_Lists\n│   ├── 3)_SEO_and_Core_Web_Vitals\n│   ├── 4)_Forms_Label_and_Input_Tags\n│   ├── 5)_Video_Audio_and_Media\n│   └── 6)_Semantic_Tags_Obsolete_Tags_and_Quotation_Tags\n│\n├── Tailwind-CSS-Tutorial/               # Tailwind setup and usage\n│   ├── src/\n│   ├── index.html\n│   ├── package-lock.json\n│   ├── package.json\n│   ├── setup.md\n│   └── tailwind.config.js\n│\n├── .gitignore\n└── README.md\n```\n\n---\n\n## 🖼️ Featured Projects \n\n\u003e Below are screenshots of the three complete clones built using only HTML and CSS (plus Tailwind where noted). Each clone mimics a well‑known website to demonstrate real‑world layout and styling skills.\n\n### 🖥️ M365 Clone (Microsoft 365)\nA faithful recreation of the Microsoft 365 landing page – responsive header, hero section, cards, and footer.\n\n| Upper Section | Lower Section |\n|---------------|----------------|\n| ![M365 Upper](Demonstration/M365-UpperMainPage.png) | ![M365 Lower](Demonstration/M365-LowerMainPage.png) |\n\n---\n\n### 🐦 X.com (Twitter) Clone\nReplicates the Twitter home feed interface – sidebar, post composer, and timeline.\n\n| Before Message | After Message |\n|----------------|---------------|\n| ![X Before](Demonstration/X.com-BeforeMessage.png) | ![X After](Demonstration/X.com-AfterMessage.png) |\n\n---\n\n### 🎮 Steam Clone\nClone of the Steam game store homepage – navigation, featured games, carousel, and sections.\n\n| Upper Section | Lower Section |\n|---------------|----------------|\n| ![Steam Upper](Demonstration/Steam-UpperMainPage.png) | ![Steam Lower](Demonstration/Steam-LowerMainPage.png) |\n\n---\n\n## 🛠️ Technologies \u0026 Tools\n\n| Category          | Technologies                                                              |\n|-------------------|---------------------------------------------------------------------------|\n| **Markup**        | HTML5 (semantic tags, forms, media, iframes)                              |\n| **Styling**       | CSS3 (Flexbox, Grid, animations, transitions, transforms, filters, variables, media queries) |\n| **Utility CSS**   | Tailwind CSS (with custom config and build process)                       |\n| **Tools**         | VS Code, Live Server, npm, PostCSS, Autoprefixer                          |\n\n---\n\n## 🚀 How to Set Up\n\n### HTML \u0026 CSS Basics\n1. Clone the repository.\n2. Navigate to any tutorial folder (e.g., `HTML-Tutorials/1)_Headings_Paragraph_and_Links`).\n3. Open the `.html` file directly in your browser – no build step required.\n4. For CSS tutorials, open the corresponding HTML file (most include inline or linked CSS).\n\n### Tailwind CSS\n```bash\ncd Tailwind-CSS-Tutorial/\nnpm install          # installs tailwindcss, postcss, autoprefixer\nnpm run build        # compiles src/input.css to dist/output.css\n# Then open index.html (or serve with Live Server)\n```\n\n\u003e Detailed Tailwind setup instructions are also available in `setup.md`.\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! You can:\n- Improve existing tutorials (better explanations, new examples).\n- Add more clones or mini‑projects.\n- Fix responsive issues or browser compatibility.\n- Enhance the Tailwind setup with additional plugins.\n\n**Guidelines:**\n- Keep the folder structure consistent.\n- Write clean, commented CSS/HTML.\n- Update this README when adding major features.\n\n---\n\n## 📜 Conclusion\n\nThis repository is a complete self‑paced course for mastering HTML, CSS, and Tailwind CSS. Starting from the very basics (headings, tables) to advanced layout techniques (flexbox, grid, animations) and finally building three polished clones of real‑world websites.\n\nWhether you are a beginner taking your first steps in web development or an experienced developer looking for a quick reference, you will find value here. **Star ⭐ the repo** if it helps you, and feel free to use the code in your own projects.\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003csub\u003eBuilt with ❤️ and a lot of CSS grid. Keep styling, keep creating!\u003c/sub\u003e\n  \u003cbr/\u003e\n  \u003cbr/\u003e\n  \u003cimg src=\"https://visitor-badge.laobi.icu/badge?page_id=yourusername.html-css-learning\" alt=\"visitors\" /\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkratugautam99%2Fhtml-and-css-learning","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkratugautam99%2Fhtml-and-css-learning","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkratugautam99%2Fhtml-and-css-learning/lists"}