Skip to content

README.md

Latest commit

 

History

History
297 lines (231 loc) · 9.56 KB

README.md

File metadata and controls

297 lines (231 loc) · 9.56 KB

HTML CSS Learning Journey Banner

🎓 HTML & CSS Learning Journey

HTML5 CSS3 Pearson VUE GCF Training License

A comprehensive collection of HTML & CSS exercises from my GCF Training & Certification journey

📂 Explore Code • 🎯 Topics Covered • 🚀 Projects • 📜 Certificate

👋 About This Repository

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.

🎯 What I Learned

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

📂 Repository Structure

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

🎯 Topics Covered

📝 HTML Concepts

  • 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

🎨 CSS Concepts

  • Styling Methods: Inline, Internal (<style>), External (.css files)
  • 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

🚀 Featured Projects

1️⃣ Personal Portfolio (Simple)

📂 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

2️⃣ Animal Blogspot

📂 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

3️⃣ Multi-Page Portfolio (Advanced)

📂 09-Projects/portfolio-advanced/

A complete multi-page website with navigation between pages.

Pages:

  • index.html - Home/About
  • qualification.html - Education history
  • work.html - Experience & achievements
  • contact.html - Contact information

Highlights:

  • Consistent styling across pages
  • Internal navigation system
  • External CSS stylesheet
  • Professional table-based layout

💡 Interesting Code Snippets

CSS-Only Light Bulb Toggle

/* 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!

Infinite Rotation Animation

/* Hover to spin infinitely */
.img-transform:hover {
    transform: scale(1.2) rotate(-14400000000000000deg);
    transition: 15s ease-in-out;
}

CSS Grid Layout

.grid-container {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
}

📜 Certification

✅ GCF Global Training Completed

HTML & CSS Fundamentals
Certified by Pearson VUE

📄 View Certificate | View Transcript

👨‍💻 About Me

Sandeep Karmata
🎓 B.Tech CSE (Cyber Security) @ Parul University
🎵 Music Producer as "ERROR 404" | 🏷️ Chaos Chamber
🎯 Aspiring to serve in Indian Tech Defence

Connect With Me

GitHub Instagram YouTube

🛠️ How to Use This Repository

  1. Clone the repository

    git clone https://github.com/sandeep6135/HTML_and_CSS-Learning.Journey.git

  2. Navigate to any folder and open .html files in your browser

  3. Learn progressively - folders are numbered in learning order

  4. Experiment! - Modify the code and see changes in real-time

📊 Learning Progress

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 🎉

⭐ Star this repo if you find it helpful!

Made with ❤️ during GCF Training

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.