HTML & CSS Learning Journey

A showcase of my progress learning web development

About This Project

This repository documents my journey learning HTML and CSS through a comprehensive tutorial series. Starting with basic elements and gradually progressing to complex layouts and components, this project showcases everything I've learned along the way.

The journey culminates in a YouTube UI clone, demonstrating my ability to recreate real-world interfaces using the skills I've acquired.

The Learning Journey

HTML Basics
CSS Fundamentals
Layout Techniques
Advanced Styling
Responsive Design
Project Implementation

Lessons (In Order)

Links & Basic Structure (lesson1.html)

HTML Links

Learning about hyperlinks and basic HTML document structure.

View Demo

Text Elements (02-text.html)

HTML Typography

Learning the basics of text elements in HTML including paragraphs, headings, and text formatting.

View Demo

Buttons (01-buttons.html)

HTML CSS Interactive

Creating and styling different types of buttons with hover and active states.

View Demo

Flexbox Layout (03-flexbox.html)

CSS Flexbox Layout

Using Flexbox for creating flexible page layouts.

View Demo

CSS Grid (04-grid.html)

CSS Grid Layout

Creating two-dimensional layouts with CSS Grid.

View Demo

CSS Positioning (05-position.html)

CSS Position

Understanding different positioning methods in CSS.

View Demo

CSS Basics (lesson4.html)

CSS Styling

Introduction to CSS selectors, properties, and values.

View Demo

Apple at Work (lesson5.html)

CSS Apple Work

Apple at Work promotional layout and text styling.

View Demo

Stock Ticker (lesson6.html)

CSS Ticker Finance

Stock ticker and financial data styling.

View Demo

Custom Design Elements (lesson7.html)

CSS Design Typography

Creating custom design elements with CSS styling.

View Demo

Form Design (lesson7d.html)

CSS Form Design

Form design and button styling.

View Demo

Inputs & Details (lesson8.html)

CSS Inputs Details

Input styling, details, and SVG usage.

View Demo

Shapes & Music (lesson9.html)

CSS Shapes Music

Working with shapes, music UI, and image cropping.

View Demo

Profile Cards (lesson10.html)

CSS Flexbox Profile

Profile card layouts with images and flexbox.

View Demo

Grid Advanced (lesson11d.html)

CSS Grid Advanced

Advanced grid layouts and profile cards.

View Demo

Advanced Techniques (lesson12.html)

CSS Advanced

Exploring more advanced CSS techniques and properties.

View Demo

Flexbox Advanced (lesson12f.html)

CSS Flexbox Advanced

Advanced flexbox layouts and profile cards.

View Demo

Advanced Concepts

Custom Design Elements

CSS Design Typography

Creating custom design elements with CSS styling.

View Demo

Advanced Techniques

CSS Advanced

Exploring more advanced CSS techniques and properties.

View Demo

Flexbox Practice Examples

CSS Flexbox Practice

Additional examples and practice with CSS Flexbox layouts.

View Demo

Grid Practice Examples

CSS Grid Practice

Additional examples and practice with CSS Grid layouts.

View Demo

Final Project: YouTube UI Clone

YouTube Clone

A responsive recreation of the YouTube interface using HTML and CSS

This project demonstrates my ability to recreate a complex, real-world user interface using the HTML and CSS skills I've learned throughout this journey. The YouTube clone includes:

  • Responsive header with search functionality
  • Sidebar navigation
  • Video grid layout
  • Custom icons and styling
  • Hover effects and interactive elements
View Full Project