Assignments > Tutorial 6: Style Your Homepage
Due on Wed, 10/11 @ 11:59PM. 6 Points.
Introduction
In Tutorial 3, you created your homepage, and found 5-10 web pages, images, advertisements, banners, etc. that inspired you in some way. Today, you are going to use those sources of inspiration to style your homepage. Some questions to ask yourself:
- How might you draw inspiration from the examples you found (e.g. alignment, contrast, proximity, color, typography, textures, images, etc.) to communicate your unique personality?
- What tools that we’ve learned over the past several weeks (e.g., accessibility, visual design, advanced CSS) can help you select colors, fonts, icons, and interactive effects?
- Are there any approaches that you want to copy or recreate?
- Copying isn’t a bad thing when you’re learning: sometimes you have to learn the “standard” technique before you try to do something new and original.
Your Tasks
Now, create your own look-and-feel on your web page:
1. Select some values
Pick three values from this list that you want to communicate in some way on your website. Write them down.
2. Select your fonts
Select (and apply) a header and a body copy font from Google Fonts that instantiate the look-and-feel you’re hoping to communicate. Here is some sample code of how to use Google Fonts. Ensure that your fonts are complementary and that they match the values / theme of the website.
3. Use the principles of proximity & aligment
Use the principles of proximity and alignment to visually group the different sections of your homepage. Cluster similar things, apply spacing to things that are different. Be very intentional about aligning and organizing your content.
4. Create a color scheme
Pick some colors and apply them to your design. Use some of the color tools we talked about in class. Tips:
- Don’t pick more than 5 colors
- Use a palette generator
- If you’re using an image, consider generating your color palette from the image
5. Add some images or icons
Finally, add some images or icons to your design (and create an images folder to store your images at the root of your csci185 folder).
6. Make sure it looks good on mobile
Make sure your design is responsive (resize the screen to see what happens).
7. Make sure your site is accessible
Use the Wave browser extension to check that your website is accessible.
Pro Tips
- Use a grid. Note: this doesn’t mean that you have to use “CSS Grid.” It just means that there should be implicit vertical and horizontal lines that guide your layout.
- Use whitespace liberally.
- Here are some resources that may help you:
What to turn in
After completing Tutorial 6, please publish everything to GitHub (stage, commit, and sync). Then, in the Moodle, paste a link to:
- Your GitHub pages homepage (the link that visually displays your homepage)
- Your repository (the link that displays your code)
- A list of the three values you chose to implement.