Setting up Visual Studio Code

For students who already set up visual studio scroll to the bottom of this post!

Watch the video here if you need visual instructions

The first thing you need to do is download the application from the following link:

After you install the app by dragging it into the Applications folder, open it.

Now navigate to this link to install the Settings Sync extension  and click the Install button

Once you install the extension you will need to click the Reload to Activate button

Once the app reloads follow these steps:

  1. Use keyboard shortcut Cmd + Shift + P to open the command palette
  2. Type Sync and go down with the arrow keys to the Sync: Advanced Options and click Enter
  3. Use arrow keys to go down to Sync: Download Settings from Public GIST and click Enter
  4. Use keyboard shortcut Cmd + Shift + P to open the command palette again
  5. Type Sync: and go down to Sync: Download Settings then click Enter
  6. It should ask you to enter a GIST ID enter the following 846a59831c3a903c311ea25354694cae

It will take a few minutes for all the Extensions to load, once they are done it will ask you to reload. Reload and you are done!

Already followed this guide and just need to update:

  1. Type Cmd + Shift + P and type “Download” find/select “Sync: Download Settings
  2. A popup will ask you to reload click Yes

Suggested extensions:

Exercises and References for CSS Intro #2 Class 12

The Website Generator

Additional CSS topics


Homework #4

Homework for this week is focused on our final projects. There are two parts.

Part 1: Provide a wireframe of at least your main/home page. This can be from GoMockingbird, or a picture of your notebook. Should look something like this:

Part 2: Provide a simple outline of the 6 main features/functionalities of your website like this

  1. Header with menu navigation and a Request a Demo call to action button
  2. A Hero section that sells the concept of the product with an image of the product
  3. etc..

Homework is due Tuesday 13th of November via email, please make subject Homework 4

CSS Home Exercise

Let’s get your CSS skills up to par with this fun exercise. The final result should resemble something like this:

Download the initial HTML code from this link inside your Class folder and double-click to extract it. Then open it in Visual Studio Code.

The following boxes should exist:

  • div.header.flex
    • h1.logo
    • div.header-menu
      • href #about
      • href #news
      • href #contact
  • div.about.flex id=about
    • div.about-left
      • img.about-image src=link to image of you
      • h3.about-name
      • p.about-text
    • div.about-right
      • h2
      • p
  • id=news
    • h2
      • h3
      • p
      • p
      • h3
      • p
  • id=contact
    • h2
        • iframe (from google maps embed
        • or use the following code directly
          <iframe src="!1m18!1m12!1m3!1d3291.5035300186455!2d-119.85113568388252!3d34.413962880508954!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80e93f67f3314b37%3A0x4e956b7e5cb6cec2!2sUniversity+of+California%2C+Santa+Barbara!5e0!3m2!1sen!2sus!4v1540941782587" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
        • h4
        • h5

Your stylesheet should contain the following classes and declarations

  • .logo
    • margin 0
    • padding 0
    • color red
  • .menu-item
    • color green
  • .about-left
    • width 350px
    • padding 20px
  • .about-right
    • width 100%
  • .about-image
    • width 100px
  • .about-name
    • color red
  • .news-story
    • padding 20px
  • .contact-address
    • width 50%