A summer review project to practice browser flow & CSS box model.
- Approx. completion time: 2 hours
- Deliverables: 1 HTML file, 1 CSS file, images
Using only typography and box model CSS properties, complete the layout to match the one presented in the mockups.
The HTML is already complete & cannot be changed. Only add to the CSS file, with a restricted set of properties.
Inside your CSS file, these are the only properties you can use:
background-colorborderbox-sizingcolordisplayfont(font-family,font-size,font-style,line-height)list-style-typemarginpaddingtext-aligntext-decorationwidth
If the property isn’t on the list you just don’t need it.
- ❏ Design matches the designs in the mockups.
- ❏ Design is flexible between 320px – 600px.
- ❏ Only the CSS properties listed above are used to create the layout.
- ❏ HTML is unchanged from when downloaded.
- ❏ CSS properly validated.
- ❏ Has lots of detailed commits.
- ❏ 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.
- Using CSS
- CSS indentation
- CSS selectors & units cheat sheet
- Basic typography
- Using Google Fonts
- Web typography cheat sheet
- Browser developer tools
- Validators
- Browser testing
- Browser testing checklist
- Everything is a box
- Flow & display
- Typography-only 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.
☛ Refer the the license & copyright statement
Assets used:
- Ceratosoma amoenum by Klaus Stiefel, used under CC-BY-NC.
Modifications: resized. - Hypselodoris bennetti by Klaus Stiefel, used under CC-BY-NC.
Modifications: resized. - Tambja verconis by Klaus Stiefel, used under CC-BY-NC-SA.
Modifications: resized.