In-class Practice

Working with Multimedia and Tables

Part 1

Let's add a handful of images to further refine the site's look.

  1. Open the practice site in VSCode: Open VSCode
  2. Open a tab so you can preview your site as you work: View Your Practice Site
  3. You will need to have completed Practices 1 through 4 to continue. If you have not, go to Practice #4, and copy/paste the HTML into your index.html file and the CSS into your style.css file from Part 2 of the exercise.
  4. In the HTML, add a div that has an id attribute with the value logotitle around both div elements that contain your logo and title/menu. The code should look similar to this:

    <div id="logotitle">
      <div class="logo">
        <a href="/index.html">Future DCI Logo Web Conference Logo</a>
      </div>
      <div class="titlemenu">
        <h1>DCI Web Conference </h1>
        <h2>October 28-30,  — Lexington, VA</h2>
        <nav>
          <ul class="sitemenu">
            <li><a href="/index.html">Home</a></li>
            <li><a href="/speakers.html">Speakers</a></li>
            <li><a href="/schedule.html">Schedule</a></li>
            <li><a href="/venue.html">Venue</a></li>
            <li><a href="/register.html" target="_blank">Register</a></li>
          </ul>
        </nav>
      </div>
    </div>
    
  5. Next, replace the text "Future DCI Web Conference Logo" with a img element that has the following attributes:
    • src of https://jasontmickel.com/dci108/inclass/logo.jpg
    • alt of DCI Web Conference Logo
    • class of logo-image
  6. With the new logo image in place, we need to make some adjustments in CSS to make it look right. Do the following:
    1. Add a #logotitle selector with one property: margin-top of 35px
    2. From the .logo selector:
      • Remove the border
      • Change both width and height to 168px
      • Reduce padding to 0
    3. Add a .logo-image selector with:
      • width of 100%
      • border-radius of 3px
    4. For the selector .titlemenu, increase the width to 75% since our logo image is smaller than the box we originally had set aside.
  7. Scroll down to your first conference-info section. Let's add in some teaser photos. Do the following:
    1. Open up a blank line between the h2 and h3 elements.
    2. On the blank line, add a figure element with the class attribute teaser.
    3. Inside the new figure element, add an img element with the class attribute teaser-image, a src attribute of https://jasontmickel.com/dci108/inclass/speaker.jpg, and an alt attribute of Professional Speaker.
  8. Make similar changes to the other two conference-info sections, adding the figure class="teaser" element with an img class="teaser-image" inside it that has the following attributes:
    1. For the Schedule section's image:
      • src of https://jasontmickel.com/dci108/inclass/audience.jpg
      • alt of Conference Audience
    2. For the Venue section's image:
      • src of https://jasontmickel.com/dci108/inclass/stackhouse.jpg
      • alt of Stackhouse Theater
  9. We now need some CSS to clean up the teaser images. Add the following to your CSS file:
    1. Add a selector for .teaser with:
      • margin of 2em auto 0
      • max-width of 300px
    2. Add a selector for .teaser-image with:
      • width of 100%
      • border-radius of 3px
  10. With the new images, the conference-info sections are now too short. Increase the height for this selector in CSS to 650px.
  11. Finally, let's remove the bottom border for links to clean up the look. Use the CSS comment style to deactivate the line with border-bottom in the a selector.

If you entered everything correctly, your HTML and CSS files should look like this:

And your output should look like this:

Part 2

To integrate a few other media elements, let's make some changes to your venue.html page that you created back in Practice #1.

  1. The venue page is just a shell that we need to bring up-to-date to look like the home page. To do so:
    1. Copy and paste the entire header section from the top of the body from index.html over top of the current header section in venue.html.
    2. Do the same for the entire footer section at the bottom of body.
    3. Copy and paste the two link elements from the head of index.html into the head of venue.html.
  2. Inside of main, create a section element with an id attribute of introduction and a class attribute with two values: container and clearfix.
  3. Inside this new section, add:
    1. A header element containing an h2 element with the text Venue.
    2. A p element containing the text:

      The primary venue for the conference will be the Stackhouse Theater in Elrod Commons on the campus of Washington and Lee University.

  4. Next, add another section element with an id attribute of location.
  5. This new section will contain the address for Elrod Commons and a Google Map indicating its location. Let's set it up:
    1. Inside the section, add a div element with a class attribute of details.
    2. Inside the "details" div, add an h3 element with the text Stackhouse Theater.
    3. Still inside the div and below the h3, add a paragraph with the following content:

      Elrod Commons<br>
      Washington and Lee University<br>
      204 West Washington Street<br>
      Lexington, VA 24450
      
      We haven't discussed it much, but the self-closing br element is a "line break", which can be used inside a paragraph to push content to another line. It should be avoided in other contexts. See here...
    4. Below the div, add an iframe element with an id attribute of map. Set the src attribute of the iframe to:

      https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.0843798776646!2d-79.44480543996286!3d37.788062249181!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x884ccbb8212373d7%3A0x668e1a530155c42e!2sJohn%20W.%20Elrod%20Commons!5e0!3m2!1sen!2sus!4v1583174168153!5m2!1sen!2sus

  6. Next, add a third section element, this time with the id attribute of wlu.
  7. In this section, we will have a brief statement and a video of W&L.
    1. Inside the section, add a div element with a class attribute of details.
    2. Inside the "details" div, add an h3 element with the text Washington and Lee University.
    3. Still inside the div and below the h3, add a paragraph with the following content:

      Watch this brief video to learn more about the great students at our host location.

    4. Below the div, add an iframe element with an id attribute of video. Set the src attribute of the iframe to:

      https://www.youtube.com/embed/zTHN9gkU1hk

  8. Now, we need to add some CSS to get everything looking right:
    1. Add one selector for both #location and #wlu that sets their padding to 22px 80px 66px.
    2. Add a selector for .details with the following rules:
      • display as inline-block
      • width of 49%
      • vertical-align of top
      • padding of 1em on all sides.
    3. Add one selector for both #map and #video that sets display to inline-block, width to 50%, and border to none.
    4. Then add a selector for #map only with a height of 250px.
    5. Add a selector for #video only with a height of 400px.
  9. Finally, after looking more closely, it makes more sense to set the top margin on the main element rather than on the "introduction" section. That way if we have a page on which we don't want or need this section, the top margin will still apply. This process is called refactoring code — meaning that we're improving the structure of how it is written even though the end results aren't obvious to the user. To fix this:
    1. Add a main selector and set the top margin to 250px.
    2. Remove line with the top margin property from the selector for #introduction.

Your venue.html file and new CSS should now look like this:

And your output should look like this:

Part 3

To integrate some data in tables, let's make some changes to your schedule.html page that you created back in Practice #1.

  1. Just like the venue page, the schedule page is just a shell that we need to bring up-to-date to look like the home page. To do so:
    1. Copy and paste the entire header section from the top of the body from index.html over top of the current header section in schedule.html.
    2. Do the same for the entire footer section at the bottom of body.
    3. Copy and paste the two link elements from the head of index.html into the head of schedule.html.
  2. Inside of main, create a section element with an id attribute of introduction and a class attribute with two values: container and clearfix.
  3. Inside this new section, add:
    1. A header element containing an h2 element with the text Schedule.
    2. A p element containing the text:

      The conference opens with a series of workshops on day one. Days two and three feature several talks by expert web designers and developers as well as panels facilitated by industry experts.

  4. Next, add another section element with an id attribute of schedule and a class attribute of container.
  5. This new section will contain three tables — one for each day of the conference. Let's start with some workshops on day one of the conference. The instructions will walk you through how to set up the first table. For the other two tables, I will give you the data, and you will mimic the structure from the first to create them.

    The company running the conference asked you to use a series of color-coded badges throughout the schedule to help attendees immediately see what type of session each one is. The codes and colors are:

    • "registration" → purple
    • "workshop" → blue
    • "break" (which includes lunch and snack breaks) → green
    • "keynote" (which includes full session wrap-ups) → teal
    • "talk" → red
    • "panel" → dark yellow
  6. Before we start writing the tables in HTML, let's add some CSS first that will help you better to see if you are building your tables correctly.
  7. In CSS, add #schedule to the existing selector for #location, #wlu. Don't forget to add a comma so that all three IDs get the padding property applied.
  8. Create a selector for table with:
    1. border-collapse → collapse
    2. width of 100%
    3. 4em bottom margin
  9. Create a caption selector with:
    1. font-size of 1.75rem
    2. font-weight of bold
    3. font-family of "Raleway"
    4. left-aligned text
    5. 1em bottom margin
  10. Style table cells:
    1. Select both the th and td together and give them padding of 1em and a bottom border of 1px solid rgba(115, 53, 39, .2).
    2. Then select only th elements and set width to 25% and vertical-align to top.
  11. Style the .sched-day class as:
    1. 1.5rem font size
    2. italics
  12. Create a single selector for .badge that will apply to the badges you'll create below. Give it all of the following properties:
    1. display → block
    2. font-size → .75rem
    3. font-weight → bold
    4. text-transform → uppercase
    5. letter-spacing → .5px
    6. color → white
    7. padding → 0 1em
    8. border-radius → 1em
    9. width → fit-content
    10. margin-bottom → .5em
  13. Create a .speaker selector with:
    1. display → block
    2. font-family → "Raleway"
    3. font-weight → bold
    4. font-size → 1.2em
    5. letter-spacing → .5px
  14. Create a .topic selector with:
    1. .9em font size
    2. 1px of word spacing
    3. .25px of letter spacing
  15. Finally in CSS, create a series of class selectors for the various badge types from the list above. The class name will be the word that's in quotes. Each selector will only have one property — background-color — which will correspond each badge's assigned color from the same list above. Some colors may be assigned using the color's word in CSS. Others will require you to use a hex code or rgb() value.
  16. Now let's start to build the first table, starting with this table's head:
    1. Inside the section, add a table element.
    2. Inside the table, add a caption element with the text Workshops.
    3. Below the caption, add a thead element that further contains a single trelement. Inside the tr, add:
      • A th element with a scope attribute of row and a class attribute of sched-day and contains the text Day One
      • A td element with a colspan attribute of 2 that contains the text October 28
  17. The entire table will look roughly like this:

    ** Day One ** |  October 28
    ---------------------------------------------------------------------------------------------------
    ** 8:30am **  |  (badge registration) Registration
                  |  Registration is open all day
    ---------------------------------------------------------------------------------------------------
    ** 9:00am **  |  (badge workshop) Workshop                |  (badge workshop) Workshop
                  |  (speaker) Milton Kirk                    |  (speaker) Lori Guerra
                  |  (topic) Not Your Usual Web Dev Tools     |  (topic) Practice Makes Perfect in JavaScript
    ---------------------------------------------------------------------------------------------------
    ** 12:30pm ** |  (badge break) Lunch
                  |  The Marketplace @ Elrod Commons
    ---------------------------------------------------------------------------------------------------
    ** 2:00pm **  |  (badge workshop) Workshop                |  (badge workshop) Workshop
                  |  (speaker) Karam Winter                   |  (speaker) Ayisha Foster
                  |  (topic) Semantic Web Elements are Coming |  (topic) Up Your Game with Web Components
    ---------------------------------------------------------------------------------------------------
    

    Some notes on notation:

    • Text inside parentheses — for example, (speaker) — indicates that this is a special text element. The text following the parentheses should be contained in a span element that has a class attribute with the exact values in the parentheses. For the first row of the table's body, the HTML for this would be:

      <span class="badge registration">Registration<span>

    • If a row only is shown with two cells — a time and one activity —the activity cell should have a colspan attribute with the value 2
    • The hyphens ( - ) and pipes ( | ) are only there to show you where the cells are and should not be displayed on the page or added in HTML.
    • The double asterisks ( ** ) indicate that this content is a th element with a scope of row. The asterisks should NOT actually appear in the table.
  18. Try building the tbody portion of the table shown above without peeking at the full code below.
  19. Next, build the schedule for day two. It should follow the same format as day one's table, and the rules above for reading the format apply. The caption for this table should be Conference Sessions.

    ** Day Two **  |  October 29
    ------------------------------------------------------------------------------------------------------
    ** 8:30am **   |  (badge registration) Registration
                   |  Registration is open all day
    ------------------------------------------------------------------------------------------------------
    ** 9:00am **   |  (badge keynote) Keynote
                   |  (speaker) Cain Brady
                   |  (topic) The State of Web Design
    ------------------------------------------------------------------------------------------------------
    ** 10:00am **  |  (badge break) Morning Break
                   |  Snacks and beverages available in the lobby
    ------------------------------------------------------------------------------------------------------
    ** 10:30am **  |  (badge talk) Talk                        |  (badge talk) Talk
                   |  (speaker) Zara Mejia                     |  (speaker) Barnaby Esparza
                   |  (topic) Responsive Web Design: Clever    |  (topic) Less is More: How 
                   |          Tips and Techniques              |          Constraints Cultivate Growth    
    ------------------------------------------------------------------------------------------------------
    ** 11:30am **  |  (badge talk) Talk                        |  (badge talk) Talk
                   |  (speaker) Tahlia Houghton                |  (speaker) Aamir Cassidy
                   |  (topic) What’s Stopping You?             |  (topic) The Business of Play
    ------------------------------------------------------------------------------------------------------
    ** 12:30pm **  |  (badge break) Lunch
                   |  The Marketplace @ Elrod Commons
    ------------------------------------------------------------------------------------------------------
    ** 2:00pm **   |  (badge talk) Talk                        |  (badge talk) Talk
                   |  (speaker) Hazel Nava                     |  (speaker) Christy Huerta
                   |  (topic) Heavy Metal Coding               |  (topic) Building a Mobile Layout
    ------------------------------------------------------------------------------------------------------
    ** 3:00pm **   |  (badge talk) Talk                        |  (badge talk) Talk
                   |  (speaker) Hubert Fulton                  |  (speaker) Eddie Welch
                   |  (topic) Leveling Up with Flexbox         |  (topic) What Disney Can Teach You
                   |                                           |          about User Experience Design
    ------------------------------------------------------------------------------------------------------
    ** 4:00pm **   |  (badge break) Afternoon Break
                   |  Snacks and beverages available in the lobby
    ------------------------------------------------------------------------------------------------------
    ** 4:30pm **   |  (badge panel) Panel Discussion
                   |  (speaker) Sean Harrington, Nadeem Tanner, Alisa Blankenship, Sahara Davidson
                   |  (topic) Designing a Culture of Design
    ------------------------------------------------------------------------------------------------------
    
  20. Now, build the schedule for day three. It should follow the same format both previous tables, and the rules above for reading the format apply. This table should NOT have a caption element.

    ** Day Three ** |  October 30
    --------------------------------------------------------------------------------------------------------
    ** 8:30am **    |  (badge registration) Registration
                    |  Registration is open until noon
    --------------------------------------------------------------------------------------------------------
    ** 9:00am **    |  (badge keynote) Keynote
                    |  (speaker) Evangeline Callahan
                    |  (topic) So You Want to Be a Unicorn?
    --------------------------------------------------------------------------------------------------------
    ** 10:00am **   |  (badge break) Morning Break
                    |  Snacks and beverages available in the lobby
    --------------------------------------------------------------------------------------------------------
    ** 10:30am **   |  (badge talk) Talk                        |  (badge talk) Talk
                    |  (speaker) Callum Rogers                  |  (speaker) Kody Russell
                    |  (topic) Select This!                     |  (topic) Teaching Our CSS to Play Nice 
    --------------------------------------------------------------------------------------------------------
    ** 11:30am **   |  (badge talk) Talk                        |  (badge talk) Talk
                    |  (speaker) Odin Childs                    |  (speaker) Rebekka Lindsay
                    |  (topic) You Should Be Testing Your       |  (topic) Creating HTML Emails Can Be Fun
                    |          JavaScript                       |
    --------------------------------------------------------------------------------------------------------
    ** 12:30pm **   |  (badge break) Lunch
                    |  The Marketplace @ Elrod Commons
    --------------------------------------------------------------------------------------------------------
    ** 2:00pm **    |  (badge panel) Panel Discussion
                    |  (speaker) Bonnie O'Brien, Cherise Randolph, Gianluca Bloom
                    |  (topic) Making Remote Development Work
    --------------------------------------------------------------------------------------------------------
    ** 3:00pm **    |  (badge talk) Talk                        |  (badge talk) Talk
                    |  (speaker) Jayda Mckee                    |  (speaker) Faris Holder
                    |  (topic) Designing Deals: How Good        |  (topic) Excellent Tacos Are Not 
                    |          Design Drives Sales              |          Created in a Vacuum
    --------------------------------------------------------------------------------------------------------
    ** 4:00pm **    |  (badge keynote) Wrap-Up
                    |  Let's debrief and talk about next year!
    --------------------------------------------------------------------------------------------------------
    
  21. Phew! Sit back and take a breather. Yes, tables are a bear.

Your schedule.html file and new CSS should now look like this:

Final Output

Below is approximately how your final output should look: