Capstone 1: Ecommerce
A modern and responsive ecommerce frontend built purely with HTML, CSS and Bootstrap.
View the live Site https://joncgroberg.github.io/EcommerceCapstone/
Development Process
Diagram designed in Figma
Pages
Landing
Welcomes users with hero image and overview of the watch process
- Stages using Bootstrap cards
- Dynamic and collapsing navbar
Store
Displays products in responsive image grid. Bookmark, add to cart by clicking.
- Responsive hero image using columns and Bootstrap cards
- Responsive product list using Bootstrap cards
- Responsive buttons using Bootstrap columns
Login
- Form to capture basic user details
- Validation of required fields
- Remember me checkbox
- Link to register page
Register
- Form to capture basic user details
- Validation of required fields
- Remember me checkbox
- Radio buttons
- Link to login page
Checkout
- Shows selected products, totals
- Enter to checkout: Address, payment, confirmation.
- Validation before proceeding.
- Cart built with HTML table
Key Features
Image Grid
- Images turn into a masonry grid at small sizes
- Add to cart and bookmark icons on small cards change size
- Images scale to fit display size
Hero Image & Navbar
- Add to cart text shortens to "Add" on wide screens
- Button text shortens in larger views
- Navbar collapses and search bar moves to the top
- Hero Image expands to fill mobile screen
Wide Device
-
Smaller card and portion of add to cart texts hides
-
In row
Mobile
-
Images scale to become larger forcing them to wrap
-
Collapsed navbar
- Search bar moves to the top only when collapsed
Validation
About the project
Technologies Used
- CSS
- HTML
- Bootstrap
- Figma (wireframing and planning)
- Stable Diffusion (used in image generation)
- Claude-instant-100k (used in paragraph generation)