Welcome! This repository is a collection of practical, hands-on examples designed to help you learn web development, from the very first HTML tag to advanced CSS animations.

Each .html file is a self-contained lesson. You can open them in your browser to see the results and read the code (and comments!) to understand how it's done.

• Full Html.html
  • A complete reference guide to all essential HTML tags. Covers headings, text formatting, images, video, audio, forms, lists, tables, and more. A perfect starting point.

• css and fonts.html / css and fonts.css

  • Demonstrates how to style text using various CSS font properties like font-family, font-size, font-weight, and text-transform.

• display.html

  • A crucial concept! This file explains the difference between CSS display properties: block, inline, inline-block, flex, and grid.

• position.html

  • A visual guide to CSS position: static, relative, absolute, fixed, and sticky.

• justify.html

  • Explains the difference between the CSS alignment properties: justify-content, justify-items, and justify-self.

• CSS Pseudo-classes.html

  • A deep dive into CSS selectors. This guide shows you how to use dynamic pseudo-classes (:hover, :focus), structural pseudo-classes (:first-child, :nth-child), and pseudo-elements (::first-line, ::marker).

• before and after Tricks.html

  • Learn the power of the ::before and ::after pseudo-elements with 10 creative tricks, including animated buttons, tooltips, custom list styles, and image overlays.

• CSS Animation.html

  • A complete guide to making things move. This file covers:
    • transition: For smooth changes on hover.
    • transform: To translate (move), rotate (spin), scale (resize), and skew (distort) elements.
    • @keyframes: For creating complex, multi-stage animations.

• css 3D Transform.html

  • Take your skills to the next dimension! This file demonstrates advanced 3D effects like flip cards, rotating cubes, 3D galleries, and page-turn effects.

• Header.html

  • A complete, responsive website navigation header. It's built with modern HTML and CSS, and includes JavaScript to toggle the mobile menu.

• Footer.html

  • A beautiful, animated website footer. This component is fully styled with CSS variables, includes social media links, a newsletter form, and a subtle floating circle animation.