COM372-14 : Web Design and Development

Advanced HTML & CSS

Lesson Number 14, September 26, 2014

Due For This Class

  • Read Chapter 8 in Learning Web Design (page 133-146)
  • Bring two copies of your resume to class
    • one should be printed
    • the other should be digital (so, the word document / google docs / plain text equivalent of what you printed)

Lesson Breakdown

  1. Web Design Process Final Steps
  2. Introduction to tables
  3. From Content to Layout - Activity

Activity

We are going to work through coding our resumes.

  1. In your project-portfolio folder, create a new file and name it resume.html. Open this file and begin editing it.
  2. Create the basic structure of an HTML document

    How?

    Remember, you can go to our resources page and use the "Basic HTML Template"

  3. In the css folder of your project-portfolio, create a new stylesheet to use on your resume. Name it resume.css
  4. Link your resume.css to your resume.html.

    How?

    Place the following code in the <head> of your document

    <link rel="stylesheet" href="css/resume.css">
  5. Take a look at your printed resume. Think about how you could code this. What elements would be your headings? What elements would be lists? Using a pencil or pen, do some basic markup on your printed resume.
  6. Still using your printed resume - are there specific sections? For example, do you see a clear header, a footer (maybe not), areas that seem to belong together? Think of how you could mark the content in these sections to allow them to be styled in a special way.

    How?

    We can use html to mark up sections, using

    <div>, <header>, <footer>, <article>, <section>, <aside>

    Read more about semantic elements at A List Apart or Team Treehouse

    <div class="education">
  <h2>Education</h2>
  <ul>
    <li>Saint Joseph's University, 2010</li>
    <li>Fairfield University, 2006</li>
  </ul>
</div>
  7. Once you are happy with how it looks, begin creating styles for your resume. At the very least, add a background color and color your h1, h2, h3, h4... tags
  8. Save and add a link to this in your main project portfolio page

Homework

Read

  • Read through this guide about why using tables for layout is a bad idea. It was written in 2003 and presents alternatives to table-based layouts. The audience for this site was people who were using tables for layout (which you haven't), but there is a good presentation of what using CSS for layout can look like. We will start to use CSS for layout next week.
  • Read through this guide to working with tables in HTML. It's a great introduction to tables, and also talks about using styling for tables.

Do

  • Start working on Project #4. It will be due next Friday (October 3, 2014)
  • Finish coding your resume. Upload to GitHub.