Website Design Presentations
Website Design Review
Today we'll review the results of our collaborative web design process (assignment 5). This will include:
- Presenting images of your design sketches
- Showing us your Github project board
- Sharing the feedback received during the collaborative design review process
- Explaining what, if any, changes you made as a result of the feedback
After presentations, we'll begin implementing our designs as part of Project 1.
Project 1: Building a website
For this project, we'll implement the Home and About pages of our website design using HTML & CSS. It's fine to hold off on implementing the project detail page until we complete our first interactive graphic. If you choose to implement the project detail now, you can use a placeholder image and lorem ipsum for the text.
To complete the assignment, the changes must be deployed to your site and the URL for the site uploaded via Canvas by class time on Tuesday April 30th.
If you're just learning or are rusty on HTML/CSS, I'd encourage you to begin with one of the W3C CSS Templates. As part of the styling work, you should apply a CSS reset. With these as a starting point, you can then reference Learn to Code HTML & CSS and the task-specific examples listed on W3C to implement your design.
A few other requirements/recommendations:
- You must put CSS in an external stylesheet (that begins with the CSS reset from Eric Meyer)
- Use placeholder images for project links from a site such as dummyimage.com
- If you need icons, check out W3C CSS Icons for some options.
The W3C templates present alternative approaches to page layout, including the relatively new CSS Flexbox and CSS Grid. These tools can make it easier to create responsive web pages for devices of varying sizes. Here's a blogpost that helps clarify the differences and shows how Flexbox and Grid can be used together.
These strategies for page layout were not covered in the reading, but are valuable and worth applying if you're comfortable with them. It's also fine to use more traditional techniques for page layout as covered in the positioning content section of the reading. The goal is to pick a strategy (or perhaps combination of strategies) and execute a design.
Be sure to use the browser's developer tools as you build out the site. The dev tools let you easily change, add and disable CSS properties. It's a great way to get a sense for how individual CSS properties work, and experiment with changes before adding them to a stylesheet.