Topics Covered: Course Introduction
Relevant Resources: Prework resources
We will have checkpoints almost everyday to make sure you are on track in the course. Feel free to reach out to Ian or Erica at any time if you want extra help! Use the link to office hours to sign up for time slots.
Please complete your first checkpoint for tonight to give the teaching staff a sense of your previous technical background (note that absolutely no technical background is required for the course, but it'll help us prepare future exercises!).
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 ixperience. You will use this folder for all your work related to iXperience In the afternoon, you will use git to clone the Session 2 Github repo into this folder. You will use Github to submit all your homework (you all will be git masters after this afternoon's lecture!).
Windows users: While all the examples and screenshots are done on Macs, all the code should work on your machine in your Powershell. If it doesn't and are stuck, please ask one of the TA's and they'll help you out! Linux users: Your commands should be identical.
Every day, you'll create a new folder for the classwork done that day within your personal folder in that Github Repo (you will get more instructions in this afternoon's homework). For now, create a folder called exercises inside your ixperience folder, and then create a folder called d1 in your exercises folder.
Create a file under the d1 folder called hello.html. You may use any command line method or Sublime text to create this file. Put this text in it.
<h1>Hello, World!</h1>
<p>My name is YOUR_NAME</p>
Now open hello.html in your browser and see your first web page at iXperience!
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!
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 profile.html and write the following:
<!doctype html>
<html>
<head>
<title>My second webpage</title>
</head>
<body>
<p>hello world!</p>
</body>
</html>
Open it in Safari or Chrome and see what it looks like!
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 ixperience folder (not in ixperience/class). In projects, create a folder called profile. Then create an index.html file in that folder.
Now you will put this HTML into your profile/index.html file.
<!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>
I LOVE SHARKS!
(INSERT PIC WITH SHARKS HERE)
</p>
</div>
</div>
</div>
</body>
</html>
Open this file in the browser and see what it looks like!
It's pretty boring, right? Let's make it more lekker.
profile folder, create folder called stylesheets and one called images.stylesheets create a style.css file.images folder.index.html using your prework knowledge. Do you remember how to do this?(INSERT PIC WITH SHARKS HERE) in the html.Now play with the CSS to add color, fonts, spacing, and so on. Make it beautiful!
One good way to study the html element 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.
Alright, off to creating your personal pages -- instead of the Shark page, change index.html into your own personal home page! Impress us! If you're curious, ask to see Brian, Erica, or Ian's personal pages after you're finished ;)
