Week 3

September 13

Harmonic Collection review

Let’s take a look at some of your entries for this week:

Harmonic Collection entries

I’d like you to explain your theme and then show us the page for your first entry. Also tell us what your challenges were, and where you’d like to improve/expand with more time and skills. We’re all in this together! And now’s the time to ask questions.

Feel free to volunteer, but otherwise I will be randomly selecting folks. We’ll review entries throughout the semester.

And then, CSS!

We’ll start to make these entries look good.

An intro to CSS

We’ll break in here, likely mid-CSS-intro. It’s another long one.

Demo time!

We’re going to work through getting a stylesheet connected and trying out some styles.

Please help me remember to resume the recording, this time!

  1. Let’s first make an index page so we don’t have to remember our URLs.

    Create an index.html file in your project repository. Remember, index is a special name that will load when you leave off the filename from a URL.

    In it, make a list element with a link to your first project:

     <!DOCTYPE html>
 <html>
   <head>
     <title>Harmonic Collection</title>
   </head>
   <body>
     <h1>Harmonic Collection</h1>
     <p>Your name</p>
     <ul>
       <li>
         <a href="entry-1.html">Entry 1</a>
       </li>
     </ul>
   </body>
 </html>

    We’re officialy a web site now, with multiple pages!

  2. Create another page for your second entry; call this one entry-2.html, like your first. You can copy your first entry, as a starting point.

  3. Add a link to this in your index.html, above. And then as we go forward, remember to add links to your index page!

  4. Back in entry-2.html, let’s experiment with adding some styles to our page:

    • Try some inline styles on an element, first
    • Move these up to a <style> tag in your <head>
    • Create an entry-2.css doc and move your styles over there
    • Add a <link> to this from the page’s <head>:
     <!DOCTYPE html>
 <html>
   <head>
     <title>Entry 2</title>
     <link href="entry-2.css" rel="stylesheet">
   </head>
   <body>
     <!-- Your HTML content. -->
   </body>
 </html>

    This is generally the way we’ll be working with styles, with a separate, linked CSS file.

  5. Be sure to commit your work into your repo and push as we go along, as is custom! If it is only on your computer, it’s not online.

For next week

Session recording

Session recording