A summer review project to practice modular grids, typopgrahy & design.
- Approx. completion time: 3 hours
- Deliverables: 6 HTML files, 3 CSS files
- Typografier: Default settings
- Gridifier: Default settings, except medium needs 6 columns
- Typefaces: Georgia, Coda
With the wireframes provided, create all the pages of the website using modular typography, responsive grids, and modular design ideas.
Concentrate on digging into all the features that the grid and type systems have to offer.
- ❏ Page designs match the wireframes for all screen sizes.
- ❏ Responsive grid system used.
- ❏ Modular type system used.
- ❏ Properly set up for all devices.
- ❏ HTML & CSS properly validated.
- ❏ Has lots of detailed commits.
- ❏ No empty or “Untitled”
<title>
tags. - ❏ No extra, unused files in the repository.
- ❏ Folders organized properly.
- ❏ Files & folders follow naming conventions.
- ❏ Code files properly indented.
- ❏ Set up as a hosted GitHub repository with
gh-pages
.
- Hosting with GitHub Pages
- All devices setup
- Media queries
- Screen sizes cheat sheet
- Media queries layout
- Grids
- Gridifier »
- Gridifier cheat sheet
- Modular typography
- Typografier »
- Typografier cheat sheet
- Interactive wireframes
- Modules
- Modular website layout
- Ask someone else from class if they’re available.
- Create an issue on GitHub Issues inside your repository; tag me,
@thomasjbradley
, in the issue and I’ll respond there. I may not be as fast, because it’s the summer, but I’ll definitely respond.