A summer review project to practice making website layouts.
- Approx. completion time: 3 hours
- Deliverables: 1 HTML file, 1 CSS file, images
CSS Zen Garden is an online project to show off the amazing capabilities of CSS. It’s been around since 2003 to serve, initially, as a way to encourage people to use CSS.
For this assignment concentrate on making a small screen layout for CSS Zen Garden.
- The design is completely up to you—do whatever you want.
- You cannot change the HTML—only adjust the CSS.
- Concentrate only on small screens, though the activity is meant for responsive, all screen websites. (We’re covering that in the fall term.)
You don’t have to submit your design to the website—it’s just a fun exercise.
Links
- ❏ Design is coherent and explorative.
- ❏ Lots of CSS features used.
- ❏ Design is flexible between 320px – 600px.
- ❏ 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.
This exercise is meant to cover all material from the term, but these may be extra helpful.
- Before & after pseudo elements
- CSS selectors & units cheat sheet
- Web typography cheat sheet
- CSS layout cheatsheet
- From wireframe to website
- Launch checklist, Web Dev 1
- 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.