Back to work

Project 04 of 08

Project 04

Rosary Store

HTML5 · CSS3 · JavaScript

A lightweight e-commerce storefront and devotional product catalog built with semantic HTML5, modern CSS3 and vanilla JavaScript.

Fig. 04 — Rosary Store layout structure and modular catalog components.
Role
Frontend Developer & UI Designer
Context
1st semester academic project · Fatec Itaquera
Period
Feb 2024 – Jun 2024
Status
Completed

Problem

Build an accessible, high-performance web storefront for devotional products without heavy third-party framework overhead.

Context

First-semester software development project focused on core web technologies: DOM manipulation, responsive CSS layouts, and semantic HTML structure.

Objective

Deliver a fluid, mobile-responsive product catalog with cart simulation, item filtering, and clean semantic markup.

Architecture

Componentized vanilla frontend leveraging modern CSS grid/flexbox layouts and modular JavaScript modules for stateful catalog management.

Stack

  • HTML5
  • CSS3
  • JavaScript
  • Responsive Design
  • Web Standards

Decisions

  1. D1

    Pure web standards

    Zero framework dependencies to ensure minimal load footprint and deep mastery of DOM APIs.

  2. D2

    Mobile-first responsive grid

    Fluid layout adjusting dynamically from 320px mobile screens to desktop viewports.

Implementation

Structured semantic HTML5 landmarks, styled with custom CSS variables, and animated with CSS keyframes and vanilla event delegates.

Results

  • Lightweight storefront with zero dependency overhead and sub-second load times.

Limitations

  • Checkout flow is simulated client-side without a persistent payment gateway.

Evidence

Each record backs a claim made above; the reference beside a result, a limitation or a decision points here.

Links