A small HTML & CSS practice project showcasing a simple, responsive storefront layout for artwork and prints. Built to practice semantic HTML, layout techniques (Flexbox / Grid), and responsive CSS.

Author: uhnv (they/them) Table of contents

Project overview
Demo
Features
Tech stack
Getting started
Project structure
Development notes & styling guidelines
Accessibility
Contributing
License
Acknowledgements

Project overview

ArtStore460 is a front-end practice repository focused on building a clean, accessible, and responsive storefront UI using only HTML and CSS. It demonstrates common UI patterns used for online galleries and small e-commerce landing pages: hero, product grid, filters, product cards, and a simple footer.

This repo is ideal for:

Practicing semantic markup and CSS layout.
Teaching or demonstrating responsive design basics.
A starting template for small static portfolio or product landing pages.

Languages (repo composition): HTML ~93.3%, CSS ~6.7% Demo

If you host this repo with GitHub Pages, the live demo link would be: https://uhnv.github.io/ArtStore460

(If no demo is available yet, open index.html in a browser to view the project locally.) Features

Semantic HTML structure (header, main, section, article, footer)
Responsive layout with CSS Grid and/or Flexbox
Product listing / gallery grid
Product cards with image, title, price, and CTA
Simple navigation and hero/banner section
Basic responsive breakpoints (mobile → tablet → desktop)
Clean, minimal stylesheet organized for readability

Tech stack

HTML5
CSS3 (Flexbox / Grid)
No JavaScript (pure static front-end)

Getting started

To view the project locally:

Clone the repository
    git clone https://github.com/uhnv/ArtStore460.git
Open the project folder and open index.html in your browser:
    On most systems you can double-click index.html or open it via your editor (Live Server recommended).

Optional: Publish to GitHub Pages

In repository Settings → Pages, set source to main branch (or docs folder) to enable a live site.

Project structure (example)

index.html — main landing page
/assets
    /css
        styles.css — main stylesheet
    /images — artwork and thumbnail assets
README.md — this file
LICENSE — license file (if included)

Adjust paths and filenames to match the repository if different. Development notes & styling guidelines

Keep HTML semantic and accessible (use meaningful tags, alt attributes for images).
Use CSS variables for color palette and spacing for easy theming.
Prefer Grid for overall page layout and Flexbox for smaller components (cards, nav).
Group related CSS rules and comment sections (e.g., /* Header /, / Product Grid */).
Optimize images for web: use appropriately sized JPEG/PNG and consider WebP for production.

Example responsive breakpoints to follow:

Mobile-first base styles
@media (min-width: 600px) — tablet
@media (min-width: 900px) — desktop

Accessibility

Provide descriptive alt text for every image.
Ensure sufficient color contrast for text and controls.
Use logical heading order (h1 → h2 → h3 …).
Make interactive elements keyboard-focusable and visibly focused (outline, ring).
Test with screen reader and keyboard navigation.

Contributing

Contributions are welcome for improving layout, accessibility, or adding optional enhancements like:

Filter / sort UI (still HTML/CSS focused)
Static cart UI for demo
Additional responsive breakpoints and theme variants
Improved example images and assets

To contribute:

Fork the repo
Create a feature branch: git checkout -b feature/your-feature
Commit your changes and push
Open a pull request describing your change

If you want me to prepare a CONTRIBUTING.md or a sample issue template, tell me what style you prefer. Known issues / Roadmap

No JavaScript-powered interactions (intentionally static)
Consider adding:
    Modal/lightbox for product images (CSS-only or with JS)
    CSS-only product filter examples
    More accessibility tests and keyboard shortcuts

License

This project is typically released under the MIT License. Include a LICENSE file in the repository if you want to apply MIT or another license. Acknowledgements

Design and layout inspired by common gallery storefront patterns.
Useful resources:
    MDN Web Docs — HTML & CSS
    CSS-Tricks — Grid & Flexbox guides