Code support
Thank-you to those who posed additional questions regarding code. If your question was not answered in this past week's lecture (or below) 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.
Should I use grid or flexbox?
I recommend taking a look at Rachel Andrew's talk on grid and flexbox.
The short version from her talk is: "Do you want to let your content control the way it is displayed, on a row by row or column by column basis? That's flexbox. Or, do you want to define a grid, and either allow items to be auto-placed into the cells defined by that grid, or control their positioning using line-based positioning or grid template areas. That's grid."
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 (or image) 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.
Should I build a hamburger menu?
For this course, please do not. Focus on just stacking the navigation items by default and do not include any 'dropdown' buttons or interaction placeholders.