A hands-on journey from HTML fundamentals to modern, responsive CSS — built through real coding, experimentation, documentation, and Git/GitHub workflows.
This repository contains my day-by-day HTML and CSS practice, focused on building a strong foundation through writing and testing code rather than simply memorizing syntax.
The goal is simple:
Learn → Practice → Build → Document → Commit → Push
The course starts with core HTML concepts and gradually moves into modern CSS, including Flexbox, Grid, CSS Variables, animations, responsive design, and practical projects.
| Phase | Days | Focus |
|---|---|---|
| HTML | 01–08 | HTML5, text, links, media, tables, forms, semantics & accessibility |
| CSS | 09–20 | CSS fundamentals, Box Model, Flexbox, Grid, variables, animations, responsive design & projects |
| Day | Topic | Status |
|---|---|---|
| 01 | HTML Fundamentals | Completed |
| 02 | Text Formatting & Lists | Completed |
| 03 | Links, Paths & Navigation | Completed |
| 04 | Images & Media | Completed |
| 05 | HTML Tables | Completed |
| 06 | HTML Forms | Completed |
| 07 | Semantic HTML & Accessibility | Completed |
| 08 | HTML Mini Project + Revision | Completed |
| Day | Topic | Status |
|---|---|---|
| 09 | CSS Basics & Selectors | Completed |
| 10 | Cascade, Specificity, Colors & Typography | Completed |
| 11 | Box Model & Units | Completed |
| 12 | Display & Positioning | Completed |
| 13 | Pseudo-classes & Pseudo-elements | Completed |
| 14 | Flexbox | Completed |
| 15 | CSS Grid | Completed |
| 16 | CSS Variables & Modern Functions | Completed |
| 17 | Transitions, Transforms & Animations | Completed |
| 18 | Responsive / Mobile-First Design | Completed |
| 19 | CSS Mini Project — Landing Page | Completed |
| 20 | Final Project — Responsive Website | Pending |
19 / 20 days completed
The CSS roadmap is a flexible plan. Topics and day numbers may change as the course develops.
Each study session generally follows this workflow:
Learn → 45–60 min
Practice → 60–90 min
Build → 45–60 min
Review → 20–30 min
Git Workflow → 10–15 min
The focus is on active coding and understanding, not passive watching or copying.
html-css-practice/
│
├── README.md
│
├── HTML/
│ │
│ ├── Day-01/
│ │ ├── index.html
│ │ ├── notes.txt
│ │ └── README.md
│ │
│ ├── Day-02/
│ │ ├── index.html
│ │ ├── notes.txt
│ │ └── README.md
│ │
│ ├── Day-03/
│ │ ├── index.html
│ │ ├── notes.txt
│ │ ├── README.md
│ │ ├── about.html
│ │ └── contact.html
│ │
│ ├── Day-04/
│ │ ├── index.html
│ │ ├── notes.txt
│ │ ├── README.md
│ │ └── images/
│ │
│ ├── Day-05/
│ │ ├── index.html
│ │ ├── notes.txt
│ │ └── README.md
│ │
│ ├── Day-06/
│ │ ├── index.html
│ │ ├── notes.txt
│ │ └── README.md
│ │
│ ├── Day-07/
│ │ ├── index.html
│ │ ├── notes.txt
│ │ └── README.md
│ │
│ └── Day-08/
│ ├── index.html
│ ├── project.html
│ ├── about.html
│ ├── contact.html
│ ├── notes.txt
│ ├── README.md
│ └── images/
│
├── CSS/
│ │
│ ├── Day-09/
│ │ ├── index.html
│ │ ├── style.css
│ │ ├── notes.txt
│ │ └── README.md
│ │
│ ├── Day-10/
│ │ ├── index.html
│ │ ├── style.css
│ │ ├── notes.txt
│ │ └── README.md
│ │
│ ├── Day-11/
│ │ ├── index.html
│ │ ├── style.css
│ │ ├── notes.txt
│ │ └── README.md
│ │
│ ├── Day-12/
│ │ ├── index.html
│ │ ├── style.css
│ │ ├── notes.txt
│ │ └── README.md
│ │
│ ├── Day-13/
│ │ ├── index.html
│ │ ├── style.css
│ │ ├── notes.txt
│ │ └── README.md
│ │
│ ├── Day-14/
│ │ ├── index.html
│ │ ├── style.css
│ │ ├── notes.txt
│ │ └── README.md
│ │
│ └── Day-15/
│ │ ├── index.html
│ │ ├── style.css
│ │ ├── notes.txt
│ │ └── README.md
│ │
│ └── Day-16/
│ │ ├── index.html
│ │ ├── style.css
│ │ ├── notes.txt
│ │ └── README.md
│ │
│ └── Day-17/
│ │ ├── index.html
│ │ ├── style.css
│ │ ├── notes.txt
│ │ └── README.md
│ │
│ └── Day-18/
│ │ ├── index.html
│ │ ├── style.css
│ │ ├── notes.txt
│ │ └── README.md
│ │
└── web-dev-university-course/
└── lecture-01/
├── lesson1-2/
│ └── Assignments/
│ ├── Assignment1.html
│ ├── assignment1.css
│ ├── hi.jpg
│ └── hii.jpg
└── practices/
├── practice-01.html
├── practice-02.1.html
└── practice-02.html
Each completed day contains:
index.html/ HTML files — practical implementationstyle.css— CSS practice where requirednotes.txt— detailed learning notesREADME.md— short summary of the day's workimages/— assets used in selected exercises/projects
Learn
↓
Practice
↓
Build
↓
Review
↓
Document
↓
Commit
↓
Push
Every topic is reinforced through actual code and small practical exercises.
- HTML5
- CSS3
- Visual Studio Code
- Web Browser / DevTools
- Git
- GitHub
By the end of this course, I aim to be comfortable with:
- Writing clean and semantic HTML
- Creating accessible page structures
- Building forms, tables and navigation
- Understanding the CSS cascade and specificity
- Working with the CSS Box Model
- Using Flexbox and CSS Grid
- Creating responsive layouts
- Using CSS Variables and modern CSS functions
- Adding transitions, transforms and animations
- Building complete responsive websites
- Maintaining projects with Git and GitHub
After completing the HTML & CSS foundation, the next step will be to move toward:
HTML
↓
CSS
↓
JavaScript
↓
Git & GitHub
↓
TypeScript
↓
React
↓
REST APIs
↓
Node.js / Express
↓
Databases
↓
Full-Stack Development
This repository represents the foundation of that journey.
I am a Computer Science student and aspiring Full-Stack Developer, building my web development skills through consistent, practical coding.
Instead of trying to learn everything at once, I am following a structured approach:
Learn the concept → write the code → build something → document it → keep improving.
This repository is maintained using the Git and GitHub concepts I learned during my Git & GitHub course.
I applied Git in my HTML & CSS learning workflow to:
- Track changes in my practice files
- Create meaningful commits
- Organize course content
- Push updates to GitHub
- Maintain the repository using version control
This repository demonstrates my practical application of Git & GitHub while learning HTML and CSS.
https://github.com/AbubakerAfzal01/git-github-practice
⭐ This repository is a work in progress. More practice, projects, and improvements will be added over time.