Visual Studio Code

Visual Studio Code is a free code editor supplied by Microsoft. It is not required to use the code base, but it comes prepackaged with many tools that are useful for web development and design. It also allows you to install extensions like many other popular editors (e.g. Sublime Text 3).

Setup

First, you will need to download and install the editor, which you can do so here. It already comes set up with most of the tools you'll need.

Snippets

Setup

To install our snippets, simply:

Add a new folder in the root of your project directory called.vscode.
Then, download the snippet file here.
Lastly, move the downloaded snippets file to the .vscodefolder.

And that's it! Any HTML page you make in the project folder will have access to these time-saving snippets.

Note: One can have multiple code-snippets files in the same .vscodedirectory.

Shortcuts

To use a snippet, type the shortcut and hit tab. You can then tab between all of the editable areas. Familiarize yourself with these, and you'll be building websites rapidly in no time.

Shortcut	Element
ba	Creates a banner
bo	Creates a banner overlay
bt	Creates a title for the page to be nested in the banner overlay.
bs	Creates a subtitle for the page to be nested in the banner overlay.
cd	Creates a card
cdl	Creates a linked card
se	Creates a regular section
ses	Creates a shaded section
co	Creates a container
gd	Creates a grid
cl	Creates a grid column
ckl	Creates a CK Editable List
cki	Creates a generic CK Editable List Item
ib	Creates an info box
rev	Creates a reveal modal and opener button.
acc	Creates an accordion
tab	Creates an accordion tab