HTML-CSS-learning

A beginner-friendly HTML and CSS practice repository with small, focused exercises and a larger YouTube-inspired layout mockup.

Project overview

This repository contains several standalone practice pages created while learning:

• basic button styling
• text and typography exercises
• product and stock card layouts
• a tweet composer UI
• profile card experiments
• a YouTube-style video grid page

Most files can be opened directly in a browser without any build step.

Repository structure

Root pages

• youtube.html — a YouTube-inspired home page layout using CSS Grid and local image assets.
• 10e.html — a Facebook-style profile card component.
• README.md — project documentation.

intro-html-css/

This folder contains smaller learning exercises where HTML and CSS are usually separated into different files:

• button.html + button.css — subscribe, join, and tweet button styles.
• amazon.html + amazon.css — an Amazon-style product page exercise.
• stock.html + stock.css — a stock price card with buy/sell buttons.
• tweet.html + tweet.css — a compact tweet composer layout.
• text.html — a typography-focused exercise.
• 10d.html — an earlier profile card practice page.
• youtube.css — YouTube-style text formatting styles.
• assets/ — local images used by the exercises in this folder.

img folder/

This folder stores the local thumbnails and profile images used by the root-level youtube.html, along with an additional older YouTube text exercise page.

What is already in the codebase

After reviewing the repository, the project currently includes:

• standalone HTML practice pages
• reusable CSS files for styling exercises
• local JPG, JPEG, and WEBP image assets
• examples using inline CSS as well as linked external stylesheets
• layouts built with basic block, inline-block, and grid techniques

How to run the project

Because this is a static HTML/CSS repository, you can run it in any of these simple ways:

1. Clone or download the repository.
2. Open any .html file directly in your browser.
3. For the best starting point, open youtube.html.

If you use VS Code, you can also open the folder and preview the pages with a live server extension.

Recommended entry points

If you want to explore the repository in a logical order:

1. intro-html-css/button.html
2. intro-html-css/amazon.html
3. intro-html-css/stock.html
4. intro-html-css/tweet.html
5. 10e.html
6. youtube.html

This order goes from smaller UI elements to more complete page layouts.

Learning topics covered

• HTML document structure
• linking CSS stylesheets
• button styling and hover states
• typography styling
• spacing with margin and padding
• border radius and shadows
• inline-block layouts
• CSS Grid basics
• image sizing with object-fit
• using local assets in static pages

Notes

• The repository is a learning sandbox, so some files represent earlier practice attempts and experiments.
• There is no JavaScript, package manager, or build system required for this project.
• The pages are intended for practice and visual learning rather than production deployment.