Tools of the Trade

Search Tips

Finding correct syntax

A general strategy for finding the correct syntax for HTML or CSS:

1. Don’t memorize; you will naturally remember through repetition.
2. Search the internet with a term such as: [enitity name] [entity type].
3. In the results, skip past “W3Schools” and scroll to the top “Mozilla Developer Network” link. It will usually have examples of the proper syntax with descriptions.

Examples

• HTML
  • img tag or img element
  • a tag or a element
• CSS
  • width property
  • font-size property

VS Code

• VS Code
• 15 VS Code Extensions For Front-End Developers in 2019
• Visual Studio Code Can Do That?
• 7 open source alternatives to VS Code

Git and GitHub

• See: Git and GitHub in the textbook

Firefox DevTools

• Why are there four Firefoxes?
• Where do browser styles come from?
• Inspecting the CSS Cascade using Firefox DevTools
• Why isn’t this CSS doing anything?
• Quickly Alter Typography with Firefox Font Editor
• Firefox Font Editor — Advanced
• Capture Any Color on the Web with the Firefox Eyedropper
• Testing Color Contrast & Simulating Color Blindness with the Firefox Accessibility Inspector
• The Secret Button to get 3 Panels of Developer Tools — HTML + CSS + WAY MORE!

Browser Support

• Can I Use tells you what browsers support which element/property/whatever
• Video: The Secrets of ‘Can I Use’

Browser Sandboxes

• Codepen.io for frontend
• Repl.it for frontend and backend

Colour

• Colour Contrast Checker helps with accessibility
• Color Inspo helps you pick nice colours

Image Services

• Lorem Picsum is a service that makes placeholder images easy
• Openly licensed image repositories
  • Pexels
  • Pixabay
  • Unsplash

Validators

• W3C HTML Validator
• W3C CSS Validator
• VS Code Extension: HTML Lint
• VS Code Extension: ES Lint (Javascript validator)