[FAQ] Tips for the HTML & CSS Final Project

This is a collection of tips and common issues related to the HTML & CSS Final Project. It will include a mix of coding issues and general tips, such as reducing the file size of photos.

Responsiveness issues:
Many sites I see are missing the meta viewport tag. This tag should be used on all websites as it is required for them to scale correctly on mobile: <meta name="viewport" content="width=device-width, initial-scale=1.0">
You can read about it here if you’re interested: https://www.w3schools.com/css/css_rwd_viewport.asp
Or a more detailed explaination: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

I’ve also noticed people often underuse media queries, or don’t use them at all - causing many websites to look really nice on desktop, but have layout issues on mobile. Over half of internet traffic comes from mobile devices, and media queries are important to helping websites look nice, no matter the screen size. If you’re already using media queries, but you want to take responsiveness to the next level, look up an article on mobile-first design - it’s the future.

If you’re not familiar with rem or em I’d recommend learning one of them. rem and em are both equal to the one line height of text, but they are a bit more consistent on different screen resolutions than px (and I find they can also be easier to visualise than trying to imagine pixels). The only difference between em and rem is that rem will be relative to the font size of the html element, whereas em will be relative to the font size of the element it is used on. But both will usually be 16px by default (ie 16px = 1em = 1rem). You can use whichever you prefer, personally I find rem a bit easier.

Code issues:
I’ve noticed quite a lot of websites are missing alt attributes on images. People who are blind or who have vision problems often use a screen reader which can read the alt attribute as a description of the image (you can get a screen reader as a browser plugin if you’re interested in seeing what it’s like). It is also what will show up if your image hasn’t loaded. Alt tags are standard in web development, and not using them can also affect SEO.
There are a couple of exceptions:

  1. If you’re adding background images with CSS you don’t need to use alt attributes
  2. If an image is purely decorative you can use an empty alt tag (alt=“”)

You can also run your code through a validator online which will check for this and other code issues
For HTML: https://validator.w3.org/
For CSS: https://jigsaw.w3.org/css-validator/

Non-code issues:
One thing I notice a lot is people using large image files (often over a megabyte). Considering some statistics say ~50% of users leave a website if it hasn’t loaded in 3 seconds, it’s important not to have unnecessarily large photos. At the same time, clearly pixelated photos don’t look professional, so it’s good to find a balance.

Before uploading your images, check the dimensions of the image. The majority of screens are 1920x1080 or below so there is little benefit to using a photo larger than this. The same goes for smaller photos, an image that takes up half the screen width should generally be 960px (1920 / 2) or less in width, etc. The exact size is up to you, the point is that there’s little benefit benefit to having photos significantly larger than what it will be displayed as, but it will take longer to download.

Another important (and easy) way to reduce image files is to use an image compressor. You can easily upload files and then download a minified version, with minimal loss of quality. I recommend this site: https://compressor.io
If you’re wondering how big images should be, this is a rough guide:
Full screen photos: ideally 200-400kb
Large thumbnail photos (say 1/4 of the screen): ideally 50-100kb
Keep in mind this is a rough guide and only my opinion.

As for file types here is a brief, simplified explanation:
-SVG is great if you have vector drawings
-JPG seems to usually be the best for photos on the web, and is what I use most of the time
-PNG files are usually larger but can have transparent aspects
-GIF generally best avoided if possible, due to low image quality
-ICO is for favicons

A final thing I’ve noticed is people using colors which are hard to read, eg black on black, or white on white - often when text is used over a photo or when the layout changes on mobile. If you’re savvy with Photoshop or similar software there are methods you can use to darken or lighten images and improve contrast, such as putting a filter over the photo to make the text pop against it.

Hope this helps. If you have any further questions, you can post below.