Tools
Code Editor
Validators
Validators check your HTML and CSS files for errors. The browser will often attempt to make sense of the code that contains mistakes and guess the intention behind it. Sometimes it works, sometimes it doesn't. This behavior is unpredictable between different browsers and can result in the page being completely broken in one browser while appearing perfectly functional in the other.
HTML: validator.w3.org
CSS: jigsaw.w3.org
VS Code extensions
Highly recommended
- Prettier (improves code readability)
- Live server (preview your html in real time)
- HTML CSS Support (autocompletion)
Convenience
- CSS Flexbox Cheatsheet
- Lorem Text Generator (generate fake text)
- vscode-icons (different icons in explorer view based on file extension)
- Workspace Explorer (switch between several projects)
Validator extensions
- W3C Web Validator (requires internet connection)
- W3C Validation (requires java)
Wireframe
Color palette
Minifier / beautifier
- Minifier
- Minifier compresses your code by removing line breaks and whitespaces.
- Beautifier
- Beautifier makes the code more readable by adding line breaks and whitespaces whenever appropriate. It effectively "reverses" minification.
Note
Neither the minifier nor the beautifier should affect the way your web page looks in the browser. It only changes how the code looks.
Games for learning
Back to top