After each mistake, if you see the ➤ symbol, you can click on it to find more information.
All your content should be in the <body> of your document, including headers and footers. ➤
Close all the tags you opened. (Don’t forget to close <body> and <html>.) ➤
All the pages need to have a <title> in the <head>. ➤
All quotes in the code (not in the content) need to be straight quotes ("" not “”). It won’t work otherwise. (If you copy your code from another program, it’ll likely come with “smart quote” rather than the straight quotes. And it will break your code.) ➤
In the content, however, use proper apostrophes, quotes, and dashes. ➤
Your homepage file needs to be named index.html or you will get an error. ➤
You can’t just make up HTML tags. Please, check the list of all valid HTML elements.
Don’t use images or PDFs for content.
Pieces of text with the same hierarchy should have the same tag. (p, h2, h3, etc.) You may, for example, use many <h2> tags throughout your page. (But you only want one h1>.)➤
Don’t include a <p> tag inside a heading tag (<h1>, <h2>, etc). ➤
There’s no p2
There’s no h7
List items need to live inside lists. ➤
Only list items can be nested inside a list. (Nested inside the list item, though, you may have other elements, such as headings and paragraphs.) ➤
Avoid line breaks (<br />). Use lists or new paragraphs and style them properly. (That’s not to say that any use of line break is a mistake. The tag exists for a reason, and it’s helpful for addresses or business hours, for example.)
Don’t include styling on your HTML document. ➤
Don’t include HTML tags in your CSS files either.
One CSS file should hold all the formatting for your website. Don’t use a different CSS file for each HTML file.
Try not to make different styles for each page either. Your goal is to make them as consistent as possible.
Declare all colors as color values, using rgb(x, x, x) or #xxxxxx, or hsl(x, x%, x%). Don’t use the color names. ➤
Paragraphs (p) and list litems must be at least 1em. (Ideally exactly 1em. Or in other words, leave their size alone, respecting the users’ preferences.) ➤
If two pieces of information have the same hierarchy but should look different, use classes. (Don‘t make h3 and h4 have the same visual hierarchy but with different colors.)
Don’t use <i>, <em>, <b>, or <strong> on a whole element or paragraph. Also, make sure you’re using them for the right semantic reasons. Use the <span> tag if it makes more sense. ➤
Don’t use all caps on your HTML file. Use the text-transform property on CSS instead. ➤
Don’t use px for anything but borders. For everything else use only % and em or rem, as appropriate.
Don’t use pt either. Use only em (or rem) for font-size.
Don’t use negative margins (or negative paddings). Use Eric Meyer’s Reset CSS tool if you don’t want to deal with default margins messing with your document’s style.
Use margins and paddings to clear area around content only. (If you use margins bigger than 3rem or 5rem, it’ll probably break the layout.) ➤
Don’t put classes in the closing tag of the element.
Be as economical as possible with your classes. In other words, use as many classes as you need, but no more than that.
Use semantic names for the classes. (i.e. “price” rather than “redtype”.)
“Container” is the div around the content of your page. The other divs should be named semantically.
All class names should be lowercase and have no spaces. Also, they should not start with numbers and should be short (up to 12 or 15 characters).
Every image on your HTML document must have the alt attribute.
Use the alt attribute on the image to be as descriptive as possible. Remember, that’s what users will read if they can’t see the image.
Include a period in the end of all alt attribute text. It causes screen readers to pause slightly, making for a better reading experience. ➤
You don’t need to include “picture of”, “image of”, or “photo of” in the alt attribute of the img tag. (“Hamburger on a plate.” rather than “Photo of a hamburger on a plate.”)
All file names should be lowercase and contain no spaces.
Keep all the images in your server. (Don’t link to an external image on another website, download it and upload it to your website instead.)
It’s good practice to keep the images in another folder. (Optional)
Do not save photos as GIFs. Photos and rich illustrations should be JPEGs (or PNGs if transparency is needed).
Don’t use the width and height attributes on the img tags. (Style them in the CSS, instead.)
Links within your website should be only the name of the file (e.g. index.html, contact.html, etc.), and not a big link to a file on your computer.
Links within your website (internal links) don’t need full URL either.
External links need full URL (http://www.example.com or https://www.example.com). But don’t use the target="_blank" attribute to force them to open in a new tab or window.
If nothing on CSS seems to be affecting your page, make sure you have all the right curly brackets (}) in place.
Another common problem is forgetting to include colons and semicolons on each property of the CSS. (property: value;)
If it still doesn’t work, make sure you’re working on the right files. (Change some word on h1 to check if the HTML file is right, or give the body a background color to check it the CSS file is correct.)