HTML & CSS Portfolio

Overview

A curated collection of HTML and CSS projects demonstrating accessible design, semantic structure, and layout mastery.

Folder

html-css-portfolio/
│
├── index.html              ← portfolio homepage
├── style.css               ← global styling
├── README.md               ← overview and project guide
│
├── HTML/
│   ├── BasicHTML/
│   └── FormsAndTables/
│
└── CSS/
    ├── AbsoluteAndRelativeUnits/
    ├── Accessibility/
    ├── Animation/
    ├── AttributeSelectors/
    ├── BasicCSS/
    ├── Colours/
    ├── Flexbox/
    ├── Grid/
    ├── Positioning/
    ├── PseudoClassesAndElements/
    ├── PseudoClassesAndElements/
    ├── ResponsiveDesign/
    ├── StylingForms/
    ├── TheBoxModel/
    ├── Transforms/
    ├── Typography/
    └── Variables/

Projects

Project	Description
Accessible Balance Sheet	Table layout optimized for screen readers and visual clarity.
Landing Page	Responsive hero and content layout using Flexbox.
Survey Form	Semantic form elements with accessible labels and validation.

Goals

• Showcase understanding of clean, semantic markup.
• Apply accessibility best practices.
• Experiment with modern CSS layouts (Flexbox, Grid, sticky elements).

How to Run

1. Clone this repo.
2. Open index.html in your browser.

Author

Quinn
IoT UI Engineer / Cloud Integration Developer