91¶ÌÊÓƵ

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 . It already comes set up with most of the tools you'll need.

Snippets

Setup

To install our snippets, simply:

  1. Add a new folder in the root of your project directory called.vscode.
  2. Then, download the snippet file .
  3. 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