Today's Lab Exercises

Today you will create a basic "About Me" HTML page and style it with a bit of CSS:

  1. "About Me" Page
  2. Style Your Page with CSS
  3. Upload Your Page to the Web
  4. Advanced Style Techniques
  5. Definition Lists for Your Favorite Movie
  6. Decrementing ol

First Things First: Your Development Environment

We will be using Cloud9 to write web pages in this class since it makes it easier to view your changes live and offers built-in technologies that will be useful for the upcoming weeks.

You should receive an email from your TA through Cloud9 with a link to accept an invitation to join the "CSE 154 Fall 2017" team. To accept this invitation and setup an account:

  1. Click the link in the email from Cloud9 inviting you
  2. Click 'Create new account' on the Welcome to Cloud9 Teams! page
  3. Type your name in the 'Your Name' field and click 'Next'
  4. Pick a username, type it in the 'username' field, and click 'Next'
  5. Make sure to select 'Student' when it asks 'What kind of developer are you?', and 'Coursework' for 'How will you use Cloud9?' (otherwise, there will be charges if Student is not selected!). Then, click 'Next'
  6. Confirm your details and click 'Next'
  7. Do the captcha if it asks you to, and click 'Create account'
  8. Click 'Join team' when it says 'You have been invited to join team cse154'
  9. Make sure to set your password in the email you will soon receive from Cloud9
  10. From here, follow the instructions in the readme found on this page

First Things First: Handy Debugging Tools

There are various debugging tools available to help you learn web development. We will introduce two of the most common: Firefox's Firebug tool and Chrome's Web Inspector tool. You will likely only use one of these, depending on what browser you use (you're on your own if you use Internet Explore/Edge... but it's never too late to switch to a more current browser!).

You can find more information on how to use Firebug and/or Chrome Web Inspector on the slide below.

How to Use Firebug and Chrome Web Inspector

Firebug is a Firefox add-on that lets you dynamically examine or modify the content and styling of web pages. After installing it, right-click an element and choose Inspect Element with Firebug. The Chrome Web Inspector tool behaves the same way, and comes conveniently built-in with Chrome. You can launch both by hitting F12 while in your browser.

Firebug screenshot Firebug screenshot Firebug screenshot

Exercise 1: "About Me" Page

(See example screenshot on the next slide)

Create a page aboutme.html that describes you. Include information such as:

  • Your name
  • A brief description of you in 1-2 sentences
  • A list of classes you are taking right now at UW
  • Your 4 favorite movies, books, games, and TV shows. Make at least one link to an interesting site about that favorite movie/book/game/show, such as its IMDB page
  • Two images that represent when you're happy and sad (consider Google Image Search)
  • Something about one of your neighbors (students sitting next to you)

Exercise 1 (Continued): Example

This example page describes textbook co-author Victoria Kirst. Look at the lecture slides about HTML to see examples of the right tags to use.

Exercise 1 Tips: Unordered List <ul>, <li>

ul represents a bulleted list of items (block)
li represents a single item within the list (block) 


            
    
              
  • No shoes
    • 
              
  • No shirt
    • 
              
  • No problem
    •

HTML

  • No shoes
  • No shirt
  • No problem

output

Exercise 1 Tips: Ordered list (<ol>)

ol represents a numbered list of items (block) 


                
How 2 b a PRO web dev:

                  
    
                    
  1. Live HTML
    2. 
                    
  2. Breath CSS
    3. 
                    
  3. Sleep JavaScript
    4.

HTML

How 2 b a PRO web dev:

  1. Live HTML
  2. Breath CSS
  3. Sleep JavaScript

output

Exercise 1 Tips: Nested Lists

A list can contain other lists: 

    
  
  • Big Dogs:
    
      
      
    • Boxer
      • 
      
    • Great Dane
      • 
      
    • Staffordshire
      • 
    
    
  
    • 
  
  • Little Dogs:
    
      
      
    • French Bulldog
      • 
      
    • Mini Greyhound
      • 
    
    
  
    •

HTML

  • Big Dogs:
    • Boxer
    • Great Dane
    • Staffordshire
  • Little Dogs:
    • French Bulldog
    • Mini Greyhound

output

Exercise 1 Tips: Viewing Your Page with Cloud9

Cloud 9 lets you run your website and see what you've made! Follow the directions on the slides below.

To view your page, click on the Run Project button in the top-right corner of the Cloud 9 Application.

You should see a tab at the bottom saying your Apache server is running. There will be a URL. Either copy this URL and open it in a new tab or click on it and select "open."

Next, click on the html page you created to see what it looks like.

Whenever you modify your html (or other) files, make sure to save them and then refresh your browser tab that has the page you created open.

Exercise 2: CSS Styles (~15 min)

(See example screenshot on slide below)

Create a CSS style sheet named styleme.css to improve the appearance of your About Me page. You can find some CSS properties in the lecture slides or online.

Use a <link> tag to reference your CSS file in your HTML: 

            
            <head>
              ...
              <link type="text/css" href="styleme.css" rel="stylesheet" />
              ...
            </head>

Exercise 2 (Continued): Adding CSS Styles

  1. Change the color of at least two elements
  2. Change the font properties (family, size, weight, or style) of at least two elements. Some standard fonts include Arial, Arial Black, Verdana, Trebuchet MS, Georgia, Tahoma, Courier New, and Times New Roman
  3. Change at least one other thing (e.g. background color, text alginment, etc.)

Exercise 2 (Continued): Example

Exercise 3: Turn in Your Page to GradeIt (~10 min)

There's still some more to do with your aboutme.html page, but let's try a test turnin to see your files live on a real webserver!

Note that the turnin only accepts an aboutme.html page -- this means that if your page links to other resources (like images) then you'll have to use absolute URLs to reference them in your aboutme.html page. Follow the directions on the slides below to turn in your code!

Exercise 3 (Continued): Transferring from Cloud 9 to GradeIt

  1. Download your aboutme.html file from cloud9 (use the 'File' menu)
  2. Save it someplace on your computer
  3. click here to open up the 'lab1' turnin page in GradeIt
  4. Select your aboutme.html from where you saved it on your local computer
  5. Fill out the rest of the form and turn it in
  6. In your turnin receipt page, you should see a link to your aboutme.html page. Click it, and see your page on webster!

Exercise 4: Advanced Styles (~10 min)

(See example screenshot on slide below)

If you complete the previous exercises, great job! You can add any extra content to your page that you like. Or, if you want a challenge, try to figure out how to add the following styles:

  • Make your hyperlinks not underlined by default. However, when a user hovers over the link, the underline should appear (Hint: Look for information about CSS "pseudo-classes")
  • Make every paragraph start with a "drop-caps"; that is, a large initial letter that is 1.5 times the normal paragraph font size (Hint: Look for information about CSS "pseudo-elements")
  • Make text for each list item alternate between two different colors (Hint: Look for information about CSS "pseudo-classes")

These are tricks not covered yet in class. Use Google or A CSS reference such as W3Schools.

Exercise 4: Example

These are snippets of Victoria's updated page, showing links and drop-caps:

Links: (hover is not shown)

Drop-caps:

Exercise 5: Favorite Movie

(See example screenshot on slide below)

Look up one of the favorite movies/shows from your About Me Page on imdb.com

In your page, reproduce some of the film's IMDB info in a nested list under that movie's bullet. You'll want to read through teh slides below to learn how to represent this information as a HTML definition list

Consider applying styles to your definition list to make it look snazzy

Exercise 5: Example

These are snippets of Victoria's updated page, showing a favorite movie:

Definition list: <dl>, <dt>, <dd>

dl represents a list of terms (block)

dt represents each term, and dd its definition


            

                
Coffee
A beverage served cold or hot, reinvigorating
                thousands of Seattlites each day.

                
Espresso
 
A caffeinated beverage that brings
                happiness at the first sip and helps students survive their
                exams.

HTML

Coffee
A beverage served cold or hot, fueling thousands of Seattlites each day.
Espresso
A caffeinated beverage that brings happiness at the first sip and helps students survive their exams.

output

Exercise 6: Decrementing ol

(See example screenshot on slide below)

  • Modify your page's Top 3 movies/shows list to be in decreasing order, from 3 down to 1
  • The list must look the same as teh default ordered list format, but in reverse order
  • The only change you may make to your HTML is to switch the order of your list items, but otherwise all work should be done by CSS
  • You won't find out how to do this in the slides; you will need to figure it out on your own by searching the web for the appropriate CSS documentation!

Exercise 6: Example

These are snippets of Victoria's updated page with decremeting ol: decrementing ol example

If You Finish Them All...

If you finish all the exercises, you can add any other content or styles you like to your page.

If the lab is over or almost over, check with a TA and you may be able to be dismissed.

Once the lab time is up, you may stop working. You don't need to complete the remaining exercies unless you want to for fun.

Great work!