Homework for 1A

← 1A Home Slides 1B →

Review

Topics Covered: Course introduction

Relevant Resouces: Make sure you're caught up on the Treehouse coursework, esp the JavaScript modules! The pace will pick up from here, so it's essential you don't start already behind.

Exercises

E1: A Bit More Setup

We're going to build off of the prework to set up the working environment. All this material should be review, but if you have questions don't hesitate to ask.

In your home folder, create a folder called iX (note that ~ is a shortcut for /Users/your-name on a Mac). Inside that, create a folder called workspace. In your shell, switch to that directory with cd or dir. Lastly, create a folder called d1 (for day 1). 

$ cd ~ 
$ mkdir iX
$ cd iX
$ mkdir workspace
$ cd workspace
$ mkdir d1

Windows users: While all the examples and screenshots are done on Macs, all the code should work (after slight modification) on your machine in your Powershell. If you don't and are stuck, please ask one of the TA's and they'll help you out!

Every day, you'll create a new folder for the classwork done during that day. Next, open the folder you've created in Sublime Text (File -> Open and then choose the folder on a Mac, File -> Open Folder... then choose the folder on Windows). Your Sublime should look exactly like below: Right click on the d1 folder and choose "New File". Then save that file (File -> Save or Command-s on Mac or Ctrl-s on PC) as first.html. Now your screen should look like this:

In that file, type <p>hello world!</p>. Make sure to save again, and then open that folder in Google Chrome (right click on the file in the Sublime left sidebar and choose "Reveal in Finder". Then right click on the file in Finder and choose Open With -> Google Chrome). Now you should see a page in Chrome with hello world written on it—congratulations, you've made your first web page at iExperience!

Protip (Macs): Set your default application for html files as Chrome: Right-click on any HTML file, and choose "Get Info". Then choose Chrome as the Open With, and click "Change All...". Then you can just type open filename.html in the Terminal and it'll come up. No more using the mouse!

E2: A Real Web Page

For this exercise, we're going to make a real web page, using the html, head and body tags you've already learned. Create a new file in the d1 folder called second.html and write the following (don't copy paste!): 

<!doctype html>
<html>
<head>
<title>My second webpage</title>
</head>
<body>
<p>hello world!</p>
</body>
</html>


Open it in Chrome...do you see any difference betweeen this web page and the one you created in E2?


Projects

A Coder's Selfie

Over the next few weeks, you'll have a chance to show off the HTML and CSS you've learned in the prework by building your own personal page. Doing so is a great way to create an online presence that's a bit more unique than having a Facebook/Twitter/LinkedIn/Github, and lets others see what a good designer and coder you are. It's also a great form of expression that allows you to make a small mark in your corner of the Internet. At the very least, it's great practice for the other phenomenal websites you'll build!

To start, create a projects folder in your iX folder—NOT in workspace. In projects, create a folder called personal. In the personal folder, create a file called index.html Next, you will populate the contents of this index.html page, which are completely up to you. But for the South African Bru, here's what he'd say ;): 

<!doctype html>
<html>
<head> 
  <title>The Bru</title>
</head>
<body>
<div class="left">
<h1>The Bru at Work</h1>
<p>
  The Bru works hard by day...
</p>
<div class="jobs">
  <div class="job">
    <h3>iExperience</h3>
    <p>
      The Bru serves as the official generic user for the iExperience code base.
    </p>
  </div>
  <div class="job">
    <h3>Art and Surfing</h3>
    <p>
      A Renaissance man of the past and future, the Bru makes a living by
      painting...while surfing. He specializes in water color. 
    </p>
  </div>
</div>
</div>
<div class="right">
<h1>The Bru at Play</h1>
<p>...and plays hard by night (and also on weekends!)</p>
<div class="projects">
  <div class="project">
    <h3>Shark Diving</h3>
    <p>
      <3 sharks!
      [insert pic with sharks here]
    </p>
  </div>
</div>
</div>
</body>
</html>
Look at your file in the browser --remember, right-click on the file name in Sublime, choose "Reveal in Finder" or "Open Containing Folder" and then double-click the file!

Now, let's add some styling to give it the look and feel you want. In your personal folder, create a folder called stylesheets, and while you're at it, create a folder called images as well. In stylesheets, create style.css. Then link your stylesheet in your index.html. You guys did the pre-coursework, so this should be easy-peasy, right?

Again, you're welcome to come up with whatever design for your personal page! Add color, play with the fonts, add some spacing to start with. One good way to study the htmlelement is to right-click, and select "Inspect Element". It will pop up a console at the bottom of your browser that lets you inspect the styling of each element on the fly. All editing, however, goes into your .html and .css files.

Here's a resource for great designs and styling: The Best Designs. Also, the Resources Section of our iExperience website has amazing references to websites that Rafi, our TA from Session 1 has left for us. You'll be looking through a lot of them as we mature into the course. Alright, off to creating your personal pages ;) - Impress us!

← 1A Home Slides 1B →