https://github.com/emanuelefavero/htmlcss-wireframe
An HTML/CSS exercise to recreate a mobile wireframe layout
https://github.com/emanuelefavero/htmlcss-wireframe
box-model css html wireframe
Last synced: 10 days ago
JSON representation
An HTML/CSS exercise to recreate a mobile wireframe layout
- Host: GitHub
- URL: https://github.com/emanuelefavero/htmlcss-wireframe
- Owner: emanuelefavero
- Created: 2026-03-26T22:41:44.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-03-27T02:20:06.000Z (3 months ago)
- Last Synced: 2026-03-27T10:45:41.808Z (3 months ago)
- Topics: box-model, css, html, wireframe
- Language: HTML
- Homepage:
- Size: 19.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTML/CSS Wireframe
HTML and CSS exercise to recreate a mobile wireframe layout.
> Note: See the [Technical Notes](#technical-notes) section at the end of this document for implementation details and design choices.
## Table of Contents
- [HTML/CSS Wireframe](#htmlcss-wireframe)
- [Table of Contents](#table-of-contents)
- [Live Demo](#live-demo)
- [Run Locally](#run-locally)
- [Goal](#goal)
- [Requirements](#requirements)
- [Project Structure](#project-structure)
- [Technical Notes](#technical-notes)
- [Wireframe Example](#wireframe-example)
## Live Demo
[**View Live Demo**](https://emanuelefavero.github.io/htmlcss-wireframe/)
## Run Locally
1. Clone the repository: `git clone https://github.com/emanuelefavero/htmlcss-wireframe.git`
2. Navigate to the project directory: `cd htmlcss-wireframe`
3. Open `index.html` in your web browser to see the wireframe.
> Note: Chrome 112+ is recommended for best CSS nesting support, but any modern browser should work.
## Goal
Reproduce the mobile wireframe shown at the end of this document by building the layout with semantic HTML and CSS. The exercise focuses on the fundamentals of layout composition and visual consistency.
Key areas of attention:
- the box model
- spacing
- consistent layout
- coherent card dimensions
## Requirements
- Set `body { width: 512px; }` to simulate a smartphone screen
- Use the browser inspector to test spacing before updating the code
- Focus on harmonious spacing rather than exact pixel-perfect values
- Keep card heights visually consistent when they contain less text
- Allow cards to grow in height when they contain more text
## Project Structure
```txt
htmlcss-wireframe/
├── assets/
│ └── wireframe.webp
├── index.html
├── README.md
└── style.css
```
Main files:
- `index.html` contains the page structure and content.
- `style.css` contains the layout and visual styling rules.
- `assets/wireframe.webp` is the reference wireframe image used for the exercise.
## Technical Notes
- The `.cards` container owns the vertical spacing between repeated cards, keeping that responsibility separate from the page-level layout handled by `main`.
- Spacing is applied only between consecutive cards by using a sibling selector, avoiding top margins on every card and preventing unnecessary extra space before the first item.
- CSS Nesting is used, since it has good support in modern browsers. See [Can I Use](https://caniuse.com/css-nesting) for details.
- `min-height` is used instead of a fixed `height` so the cards can stay visually consistent while still growing when the content is longer.
- A dashed border is kept on `body` to make the simulated viewport clearly visible.
## Wireframe Example
---
[**Go To Top ⬆️**](#htmlcss-wireframe)