COMP 126: Practical Web Design & Development for Everyone
Setup
Visual Studio Code is the text editor I use most for web development. It’s free, robust, easy to learn, and there are lots of great free extensions available; it also can function as a full-service IDE, though most of you won’t need that capability for this class.
However, you’re welcome to use any text editor you like.
Here are the extensions I use and recommend for web development in my own VSCode implementation. Click on the name of each to learn how to use it.
(More on how to use extensions to customize and enhance your VSCode experience here.)
Live Server: easily launch a development local server/preview of your web projects; reloads/updates automatically as you work
Auto Close Tag: automatically adds closing tags to your HTML/XML code
Auto Rename Tag: when you rename an opening HTML/XML tag, automatically changes the closing tag to match
Color Highlight: displays swatches of and highlights CSS colors in your code for easy identification
Paste and Indent: automatically adds the appropriate indents to code pasted into your project
Path Intellisense: autocompletes filenames within your project
Prettier: automatically formats JS, JSON, HTML, Typescript, CSS, and SASS code
indent-rainbow: adds pretty rainbow stripes to make indentation/matching tags more readable
W3C Web Validator: checks the W3C validity of your HTML & CSS, which helps with SEO and other stuff
axe Accessibility Linter: checks your HTML for accessibility problems; this will be important later in the semester
VSCode also offers lots of styling options through colors, themes, and icons. Use whatever you like best. Here’s one of my favorites, but there are lots of others:
Material Theme Ocean: text and background colors
Material Icon Theme: icons
Please also create a free account at Codepen...
which we'll use for lots of demos and examples. It’s both a simple, quick online web development environment and a vibrant web dev community–a great place to explore, learn from, revise, experiment with, and appreciate other developers’ work. You can find and follow me at my Codepen profile to access all my demos and examples in one place.