6.S063 Design for the Web: Languages and User Interfaces

Pre Lab 1

Throughout the semester we will be introducing you to tools for working with web technologies. After the first lab we want everyone to feel comfortable with Git, Emmet, Chrome Dev Tools, and at least one editor with support for html coding. Some of these tools take time to install and we have limited time in lab so we ask everyone to do the following tasks before coming to lab.

Task 1 (Chrome)

Download and install Google Chrome (Instructions).

We expect your websites to work (even if they don't look the same) in every modern browser. But in this course we are going to be using Chrome to simplify teaching dev tools and provide a uniform environment for testing and grading. Our focus is on web standards, not the transient differences between browsers.

Task 2 (Editors)

Install and become familiar with one of the editors supported by the course staff. Follow the instructions from our editors page and install Atom or VSCode. If you feel comfortable with another editor feel free to use it and skip to Task 2.

Make sure you can at least create, rename, and delete files and directories in your editor.

We also suggest that you learn how to install extensions/packages. These add additional functionality to your editor which will be helpful during the course. There are links on the editors page to useful extensions/packages for Atom and VSCode.

Task 2.5

If you installed Atom please install the Emmet Package so that you can complete Task 2 in your editor. VSCode comes with Emmet pre installed so VSCode users can continue to Task 2.

Task 3 (Emmet Basics)

Complete each of the following exercises which explain the basics of Emmet.

  1. Generate your first Emmet snippet. If you do not have an editor set up you can follow along in ace, just select all the initial text and delete it.

    • For Atom and Ace users type html:5 followed by a tab.

    • For VSCode users type html:5 followed by the return key.

      You should see html:5 replaced by the contents of a simple html document. This is a fast and error free way of starting new html documents.

      In the future we won't specify all the keys you need to press in your editor to insert an Emmet snippet. We'll simply write the Emmet snippet as html:5 and assume you know the proper insertion key.

  2. Generating an HTML tag. Try typing an element name like div or p and expanding with Emmet. Emmet converts these into html tags.

  1. Multiplying HTML tags. Emmet uses the * character to define how many times elements should be outputted. For example try expanding ul then inside the <ul></ul> expand li*5.

Those rules should be enough to accomplish the next task but if you get stuck check out the Emmet documentation or this Emmet cheat sheet.

Task 4 (Emmet Practice)

For each of the following html strings try to produce them using a couple of Emmet snippets.

  1. Create a div containing an unordered list with 3 list items inside of it.
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
  1. Create a header, main, and footer as siblings. The main should have two sections each containing two paragraphs. You may want to check out grouping or climb up operators from the Emmet docs.
<header></header>
<main>
  <section>
    <p></p>
    <p></p>
  </section>
  <section>
    <p></p>
    <p></p>
  </section>
</main>
<footer></footer>
  1. Create the following nested list structure.
<ol>
  <li>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </li>
</ol>
  1. Create a form which takes in an email a password and a date of birth. You may want to check out the input tags from the Emmet cheat sheet.
<form action="">
  <input type="email" name="" id="">
  <input type="password" name="" id="">
  <input type="date" name="" id="">
</form>

Task 5 (Chrome Dev Tools)

Complete each of the following tasks to gain basic familiarity with Chrome Dev Tools.

  1. Learn how to open chrome dev tools.
  2. Complete the Chrome Dev Tools tutorial for viewing and changing the dom up to but not including access nodes in the console.

Task 5 (Git)

The final task is to gain familiarity with Git. Follow the instructions on the course's git page to install Git and learn some basic Git commands. You must be able to clone a repo, add files, edit files, and push changes in order to complete the first homework.