Final class (November 25 - December 2)
Final class
Our final class will be a large peer critique and then a short 'course takeaway' lecture. Please make sure to arrive on-time to lecture with your project ready to present on a laptop.
Code support
Thank-you to those who posed additional questions regarding code. I have answered as many as I can manage to get to currently below and will discuss those that were less specific to the current project in-class on Tuesday. If your question is not answered but important to the project please message and/or email me.
To help you find answers to your questions there is some additional navigation below:
Grids resources and related questions
Just consolidating the resources on grids for you in one location. Questions that came up regarding grids/flexbox follow after.
Must we use grids in P4?
No, if you prefer to build responsive designs using other means you are welcome to do so.
Can we mix flexbox and grids?
Yes, it is actually not uncommon to do so as each can be useful for different layout purposes.
How to link files?
I have an overview available on CodePen recapping linking of files.
What is proper heading sequencing?
I have an overview available on CodePen recapping proper heading sequencing.
How to center content vertically & horizontally?
I have an overview available on CodePen covering how to center content in a container.
Is using clamp accessible?
Some of you have explored the use of the clamp() property in CSS to make fluid/responsive type on your website — text size that adjusts with your viewport rather than using media queries. Depending on how you are making use of clamp, it may end up rendering the text less accessible.
For the sake of the course, I will not penalize you for incorrect use of clamp but I do request that you read through this summary by Michele Cheow that gives you a good overview of how to be careful using it.
Is it okay to have image-only or icon-only links?
Usually it is better to have text to go with an icon — see "Icon Usability" (Nielsen Norman Group) for more — to reduce ambiguity.
If you are working with just an icon inside of a link, it is important to include an alt attribute for the image that describes where it goes. For example:
<a href="mr-b-detail-page.html">
<img src="mr-b.jpg" height="100" width="100" alt="Mr. B's details">
</a>If you have been using Font Awesome (or the like) for embedding icons, I recommend reading their accessibility documentation for an overview of how to ensure their icons are accessible to screen-readers.
Why be careful about pixels?
To help illustrate why/where we may need to be careful about the use of pixels on elements containing text I have put together a quick demo of mixing pixels and rems on CodePen.
Do non-interactive elements need to be focusable?
No, non-interactive elements should have no focus state. Only interactive elements should be focusable.
How to merge different coding styles?
I would recommend if you are merging your team's different code directions that you meet (virtually or in-person) to complete the merge together.
If you have been working separately for a while it is likely the case that you have different patterns/practices for generating names for classes, structure for HTML that you will want to talk through how to put together.
Project questions
Questions that came up regarding the project more broadly.
Can I use placeholders or unrelated photos?
No, please use photos that are associated with the content (i.e. no blank box or photos of an anaconda for a pet that is a fish).
Will there be grade bumping?
No, this course does not curve any of the final grades. If courses curve grades they are expected to state so in their syllabus at the start of the course.
Are the feel of the design or layout more important for P4?
Referencing the rubric for the final project the design emphasis for this project is:
- Clarity of relationships (layout and clustering of content)
- Clarity of interaction (can I see what is interactive and is it interactive?)
- Consistency of visual language (does it feel like a cohesive site?)
Please note that there is a separate rubric item for responsiveness, which is most concerned with if the page effectively reorganizes and resizes within the browser.