A comprehensive collection of HTML & CSS exercises from my GCF Training & Certification journey
📂 Explore Code • 🎯 Topics Covered • 🚀 Projects • 📜 Certificate
This repository documents my complete learning journey through the GCF Global HTML & CSS Training Program, certified by Pearson VUE. It contains 35+ hands-on coding exercises and 3 real-world projects that demonstrate progressive mastery from basic HTML tags to advanced CSS animations.
| Skill Area | Topics |
|---|---|
| HTML Fundamentals | Semantic tags, formatting, images, links, forms, tables |
| CSS Styling | Inline, internal, external CSS, selectors, specificity |
| Layout & Design | Box model, positioning, CSS Grid, flexbox basics |
| Visual Effects | Animations, transforms, transitions, hover effects |
| Best Practices | Clean code structure, responsive thinking, accessibility |
HTML_and_CSS-Learning.Journey/
│
├── 📁 01-HTML-Basics/ # HTML fundamentals & inline styling
│ ├── 01-headings-styling.html
│ ├── 02-formatting-tags.html
│ ├── 03-images.html
│ ├── 04-links.html
│ ├── 05-div-containers.html
│ └── 06-colors-rgb.html
│
├── 📁 02-Media/ # Multimedia elements
│ ├── 07-video.html
│ ├── 14-iframe.html
│ └── assets/
│ ├── Photo.jpg
│ └── video.mp4
│
├── 📁 03-CSS-Basics/ # CSS fundamentals
│ ├── 08-inline-css.html
│ ├── 09-internal-css.html
│ ├── 10-external-css.html
│ └── styles/
│ └── style.css
│
├── 📁 04-Tables-Lists-Forms/ # Data structures & user input
│ ├── 11-tables.html
│ ├── 12-table-span.html
│ ├── 13-lists.html
│ ├── 15-forms-basic.html
│ ├── 16-forms-advanced.html
│ └── 17-forms-controls.html
│
├── 📁 05-CSS-Selectors/ # CSS selector types
│ ├── 18-element-selector.html
│ ├── 19-id-selector.html
│ ├── 20-class-selector.html
│ ├── 21-universal-selector.html
│ └── styles/
│ ├── id.css
│ └── class.css
│
├── 📁 06-CSS-Advanced/ # Advanced CSS properties
│ ├── 22-india-flag.html # 🇮🇳 Creative flag design
│ ├── 23-box-model.html
│ ├── 24-borders.html
│ ├── 25-text-stroke.html
│ ├── 26-css-links.html
│ └── styles/
│ ├── border.css
│ ├── csslink.css
│ └── india.css
│
├── 📁 07-CSS-Layout/ # Layout techniques
│ ├── 27-grid-basic.html
│ ├── 28-grid-advanced.html
│ ├── 29-scroll-animation.html
│ └── 34-positioning.html
│
├── 📁 08-CSS-Effects/ # Visual effects & animations
│ ├── 30-hover-effects.html
│ ├── 31-lightbulb.html # 💡 Interactive CSS-only bulb
│ ├── 32-navigation.html
│ ├── 33-animations.html
│ ├── 35-transforms.html
│ └── styles/
│ ├── hoverfx.css
│ ├── bulb.css
│ └── nav.css
│
├── 📁 09-Projects/ # Real-world projects
│ ├── portfolio-simple/ # Basic portfolio page
│ ├── blogspot/ # Animal encyclopedia blog
│ └── portfolio-advanced/ # Multi-page portfolio website
│
├── 📁 certificate/ # Certification documents
│ ├── Certificate.pdf
│ └── Transcript.pdf
│
└── README.md
- Structure:
<!DOCTYPE>,<html>,<head>,<body>, semantic elements - Text Formatting:
<h1>-<h6>,<p>,<b>,<i>,<mark>,<del>,<ins> - Links & Media:
<a>,<img>,<video>,<iframe> - Lists: Ordered
<ol>, Unordered<ul>, Description<dl> - Tables:
<table>,<tr>,<td>,<th>,colspan,rowspan - Forms:
<form>,<input>,<select>,<textarea>, validation attributes
- Styling Methods: Inline, Internal (
<style>), External (.cssfiles) - Selectors: Element, Class (
.), ID (#), Universal (*) - Box Model:
margin,padding,border,width,height - Colors: Named colors, RGB, HEX, HSL, RGBA transparency
- Typography:
font-family,font-size,text-align,text-transform,-webkit-text-stroke - Layout: CSS Grid, positioning (
fixed,relative,absolute) - Effects:
transition,transform,animation,@keyframes - Pseudo-classes:
:hover,:active,:visited,:checked
📂
09-Projects/portfolio-simple/
A single-page portfolio showcasing personal info, education, skills, and contact details.
Highlights:
- Clean table-based layout
- External links to social profiles
- Personal branding with image
📂
09-Projects/blogspot/
An engaging blog-style page featuring information about various animals with beautiful imagery.
Highlights:
- Dark theme design
- Floating images with text wrap
- Wikipedia-style informational content
- Responsive hover effects
📂
09-Projects/portfolio-advanced/
A complete multi-page website with navigation between pages.
Pages:
index.html- Home/Aboutqualification.html- Education historywork.html- Experience & achievementscontact.html- Contact information
Highlights:
- Consistent styling across pages
- Internal navigation system
- External CSS stylesheet
- Professional table-based layout
/* 31-lightbulb.html */
#switch:checked + .bulb {
background-color: yellow;
box-shadow: 0 0 30px yellow;
}A pure CSS interactive lightbulb that turns on/off without JavaScript!
/* Hover to spin infinitely */
.img-transform:hover {
transform: scale(1.2) rotate(-14400000000000000deg);
transition: 15s ease-in-out;
}.grid-container {
display: grid;
grid-template-columns: auto auto;
gap: 10px;
}HTML & CSS Fundamentals
Certified by Pearson VUE
Sandeep Karmata
🎓 B.Tech CSE (Cyber Security) @ Parul University
🎵 Music Producer as "ERROR 404" | 🏷️ Chaos Chamber
🎯 Aspiring to serve in Indian Tech Defence
-
Clone the repository
git clone https://github.com/sandeep6135/HTML_and_CSS-Learning.Journey.git
-
Navigate to any folder and open
.htmlfiles in your browser -
Learn progressively - folders are numbered in learning order
-
Experiment! - Modify the code and see changes in real-time
| Module | Files | Status |
|---|---|---|
| HTML Basics | 6 | ✅ Complete |
| Media Elements | 2 | ✅ Complete |
| CSS Basics | 3 | ✅ Complete |
| Tables, Lists, Forms | 6 | ✅ Complete |
| CSS Selectors | 4 | ✅ Complete |
| Advanced CSS | 5 | ✅ Complete |
| CSS Layout | 4 | ✅ Complete |
| CSS Effects | 5 | ✅ Complete |
| Projects | 3 | ✅ Complete |
Total: 35+ exercises & 3 projects 🎉
Made with ❤️ during GCF Training
This project is licensed under the MIT License - see the LICENSE file for details.