Code with me: Portland May 4-5, 2013  ·  9 a.m.-6 p.m.  ·  Portland, Ore.

Exercises

Lesson 1

Welcome

Presentation

Hello!

Use this page as reference for presentations, exercises and handouts.

Lesson 2

HTML, CSS and JS

Presentation

Making your first webpage (your practice file)

  1. Create a folder in Dropbox with your name for your Code with me work
  2. Inside your folder, create a folder called "practice"
  3. Inside the "practice" folder, create a file called "index.html"
  4. Open the file in a text editor, and write your name in it. Save the file.
  5. Open the file in your browser. You just made and viewed your first web page!

Exercise 2. Playing with the inspector

Right-click on a webpage and click "Inspect Element."

Open a website, like oregonlive.com or your own news site, and inspect it by right-clicking a page of the page and click "Inspect Element." Try things like highlighting different elements; deleting elements; and moving elements around.

Lesson 3

How HTML works

Presentation

Practice file: Writing HTML

  1. Write an HTML page in your practice file. In the "index.html" you made earlier, build a page using the <html>, <head>, <title>, <body> tags.
  2. Practice writing some HTML tags. Such as: <h1>, <h2>, <h3>, <p>, <img>, <a>, <ul> and comments.

Exercise 3. Format an article with HTML

Create a folder called "onion", and paste the text below into a new HTML page in that folder.

Lesson 3-'oops'

Troubleshooting HTML

Exercise 3b. Fix this HTML page

Someone messed up this webpage! Paste the HTML code below into a new HTML page, and fix the errors.

Lesson 4

How CSS works

Presentation

Practice file: Writing CSS

Try using CSS to style the contents of your practice file. In your "practice" folder, create a "css" folder and, and a "styles.css" file inside of it. Lastly, link that CSS file from the HTML file: <link rel="stylesheet" href="css/styles.css" />

  1. Try using these CSS properties to style your content: color, font-family, font-size.
  2. Try looking up and using the CSS properties to underline, bold and italicize text.

Exercise 4. Style the Onion article with CSS

Using the Onion article you formatted earlier, create an external CSS file that does the following. If you don't know or remember the syntax of a property, practice looking it up!

  1. Make the main headline dark green.
  2. Use the font family "Georgia" for the main headline and the subheadline.
  3. Center the text of the main headline and the subheadline.
  4. Make the paragraphs have a line height of 19 pixels.
  5. Remove the underline from the links.
  6. Make the "You might also like" label all uppercase.
  7. Bonus: Make an underline appear when you hover over a link.

Lesson 5

CSS classes

Presentation

Practice file: Writing CSS classes

Give CSS classes a shot in your practice file! Follow these steps to victory:

  1. Think of a descriptive name for your class, like "intro" or "awesome" or "gigantic".
  2. In your HTML file, add that class to a paragraph or another element by adding class="intro" to the opening tag of that element.
  3. In your CSS file, write a rule for that class, beginning with .intro { ... }.

If you need an example, look the three tabs:

Exercise 5. Design it Twitter-style, part one

Your goal is to take the HTML at the end of this exercise and use CSS, including classes, to make it look like the image below. (The HTML tags already have classes written for you.)

Create a "twitter" folder, and paste the HTML below into a new HTML file. Then, create a "css" folder with a "styles.css" file inside.

Hint: Need some help? Keep reading. There's some starter CSS in the tab below. Also, these are the CSS rules you'll need to write:

  1. Write a CSS rule for the "realname" class that makes the color "#333333"
  2. Make the "username" class gray and not bold
  3. Make the "maintext" class a font size of 18 pixels
  4. Make the "mention" class (which is a link that mentions another Twitter user) bold
  5. Make the "date" class gray
  6. Make all the links have the color "#008AB9"
  7. Make all of the text Arial or another sans-serif font

Lesson 6

Projects

Presentation

The project

Past student work

Work with your mentor:

  • Talk about your idea
  • Sketch a design
  • Mark your content up with HTML

  • Sample timeline: codewithme.us/project

Lesson 7

CSS box model

Presentation

Be a box model ninja!

Think you understand how the box model work? Or just completely confused? Try out our game, Box Model Ninja, to understand the parts of the box model.

Practice file: Play with the box model

Right-click the boxes below to inspect them. Use the Metrics box in the right-column of the inspector to see the box model in action.

Then, try writing CSS that uses the box model in your practice file. Try properties like margin, border, padding, background-color and width. Look at the CSS tab if you need some inspiration.

Exercise 7. Design it Twitter-style, part two

Let's take the HTML and CSS you created from the last Twitter exercise, and start refining the design. Open up those files, and let's get rolling!

  1. Let's start by updating the HTML: Enclose the contents of each tweet on your HTML Page within a <div> with a class of "tweet" (see below for an example -- but don't just copy and paste it, or it won't work!).
  2. Change the margin of each paragraph to be 5 pixels on each side
  3. Make the width of each image be 430 pixels
  4. Make the width of each tweet 430 pixels
  5. Give each tweet 10 pixels of padding on each side
  6. Add a 1-pixel solid gray border to the bottom of each tweet

Lesson 8

CSS layout

Presentation

Exercise 8. A parade of floats

Using the HTML below, do the following

  1. For the first part, make the image float to the left of the text.
  2. For the second part, make the two columns of text float side-by-side. Add a border to the class "second-part" and make sure the border goes all the way around both columns of text by using the clearfix, or another technique.

First part:

Second part:

Lesson 9

Paper code

Assemble the code!

Lesson 10

How to make an interactive

Presentation

Exercise 10. Create a before and after graphic

Using the fade skills you've learned, let's make a simple before and after graphic.

Create a new folder, and copy the HTML, CSS and JavaScript below into their own separate files:

  • index.html
  • css/styles.css
  • js/script.js

Change the jQuery so that when you click the image on the page, it disappears, leaving only the background image showing.

What we did together during the presentation

  1. Find the jquery folder in your Dropbox.
  2. Open up index.html and styles.css in your text editor
  3. Create your JavaScript file. In the "js" folder within the "jQuery" folder, create a file called "script.js"
  4. Search for jQuery. Google "jquery google", click on the first link, and copy the HTML snippet that looks like this: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  5. Paste that snippet in index.html in your <head>
  6. Add http: before the // in that snippet
  7. Include your JavaScript file. In index.html, type this on a new line to include the JavaScript file on your page: <script type="text/javascript" src="js/script.js"></script>