WDD 231: Web Frontend Development I

Setup: Visual Studio Code

The purpose of this setup activity is to install a free, open source, code editor that supports customized code writing, editing, and code management on all major platforms. VS Code is lightweight, powerful, and flexible.

Organizations and individual programmers decide on which code editors to use. This course uses VS Code as the primary code editor because it is free, open source, and popular in the industry having a large community of support, development, and extensions.

Activity Instructions

1. Install the VS Code editor if you do not already have it installed: Visual Studio Code.
2. If you already had VS Code installed, check for updates.
   To check for updates in VS Code, use the menu Help ► Check for Updates...
3. Add the Live Server extension in VS Code in order to support local, offline testing of your work in your browser.
4. Customize your VS Code installation:
   • Turn on format code on save.
   • Turn on auto save code using the After Delay option.
   • Select an editor theme.
   • Turn on auto updating tags
   • Note the following: Formatting code, such as using proper indentation, is important for human readability during development. Use the built-in formatter.
   • Enable Emmet which provides shortcuts and abbreviations for quickly writing HTML and CSS, significantly speeding up the coding workflow.
     Examples using Emmet Shorthand

     Emmet supports a wide range of abbreviations and features, including:

     • Abbreviations for HTML elements: For instance, typing .container and pressing Tab generates a <div> element with a class of "container".

       <div class="container"></div>.

     • Nesting and Multiplication: You can nest elements by using the > character and make copies using the *. For example, ul>li*3 followed by Tab will generate a <ul> element with three nested <li> elements.

       <ul>
         <li></li>
         <li></li>
         <li></li>
       </ul>

     • Grouping: Use the * character to create multiple copies of an element. For instance, ul>li*5>a followed by Tab will generate a <ul> element with five <li> elements, each containing a <a> element.

       <ul>
         <li><a href=""></a></li>
         <li><a href=""></a></li>
         <li><a href=""></a></li>
         <li><a href=""></a></li>
         <li><a href=""></a></li>
       </ul>

   • Review and activate the Accessibility features as needed.

You may want to bookmark this page and/or the official documentation for future reference.

Getting Help

If you were not able to complete any of these steps, then you are not prepared yet.
Please reach out for help in Microsoft Teams.