Tips and tutorials

Habits that prevent problems

• Watch your capitals. Capitals are allowed in names, but home.html and Home.html are different files. Match each name exactly.
• Follow each step fully. The steps are small on purpose; skimming is the most common cause of broken pages.
• Save, then refresh. The browser only shows changes you have saved.
• Change one thing at a time and check it before moving on.
• Use Inspect to see which CSS rule is styling an element (step 5.2).
• Search well. Include the language in your search: “css center image in grid”.

Learn and look things up

• Web Design Playground

  Step-by-step lessons where you change code and see the result. Used in class.

• W3Schools

  Tutorials and “Try it yourself” examples for HTML, CSS and JavaScript.

• W3Schools HTML reference

  Every HTML element and attribute.

• W3Schools CSS reference

  Every CSS property with examples.

• MDN Learn web development

  Deeper explanations from the makers of Firefox.

• A Complete Guide to CSS Grid

  Visual reference for grid layouts.

Code editors

• Visual Studio Code

  Free code editor used to create and edit the HTML and CSS for this project.

Using Visual Studio Code has step-by-step help for opening and editing files, previewing pages, using Chat, and arranging editor views.

Design tools

• Choosing type

  Google Fonts' guide to picking and pairing fonts for screens.

• CSS Selectors: A Visual Guide

  Every selector explained with diagrams.

• pppalette

  Color palette generator.

• WebAIM Contrast Checker

  Check text and background colors.

• Squoosh

  Compress images and compare JPG and WebP in the browser.

© Created by Sara Rosenstock, Marietta College Graphic Design.