COMP126: 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. 

Learn how to use extensions to customize and enhance your VSCode experience here.

Here are the extensions I use and recommendfor web development in my own VSCode implementation. Click on the name of each to learn how to use it.

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

Project Manager: allows you to switch easily between projects that are active in your editor

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:

Material Theme Ocean: text and background colors

Material Icon Theme: icons

However, you’re welcome to use any text editor you like.

Please also create a free account at

Codepen...

which I'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. Search for username tkjn (that's me) so you can easily access all my demos and examples in one place.