In-class Practice

Responsive Design

Part 1

Let's start making our conference site responsive by working with our home page: index.html.

  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 6 to continue. If you haven't, stop here, go back and get up-to-date.
  4. During a code review in preparing for a mobile design, you notice that the audience image under "Schedule" on your home page is sized strangely. In looking through your code, you realize that you have used the id schedule in two different places for two purposes: here and on the schedule.html page. Since you hadn't applied any CSS to the one on the home page, you can safely change the id on this page. Just be a bit more careful next time!
    1. Change the id attribute on the section element in question from schedule to schedule-home.

Let's turn to your style.css file to set up the media queries to make the home page responsive.

  1. At the bottom of the CSS file, add a media query for a max-width of 992px. This query will change the page's header so that it eliminates the background image and fits better as the screen gets smaller. We'll add a few selectors with properties.
  2. Add a selector for .siteheader with these properties:
    1. background-image of none
    2. background-color of rgb(115, 53, 39)
    3. height of auto
    4. padding of 0
  3. Add a selector for #logotitle with these properties:
    1. padding-top of 0
    2. width of 100%
    3. color of #ffffff
  4. Add a selector for .logo with width of 16.9% and vertical-align of top.
  5. Add a selector for .titlemenu with width of 82.5% and background-color of rgb(115, 53, 39).
  6. Add a selector for footer with these properties:
    1. rgb(115, 53, 39) for background color
    2. .5em of padding on all sides
    3. #ffffff for text color
  7. Add a selector for the a element with color of #ffffff.
  8. That takes care of the first media query. Test it out in your browser by resizing your window and ensuring that the changes happen. If not, review your CSS. If all is well, let's do one more.
  9. Below your first media query (be sure you're below its closing curly brace), start a new one that has a max-width of 768px. This query is going to account for mobile screens from a standard iPad in portrait mode and smaller.
  10. Inside the new media query's curly braces, add a selector for .logo with a property of display set to none.
  11. Add a selector for .titlemenu, setting its width to 100%.
  12. Add a selector for h1 with a font-size of 2em.
  13. Add a selector for h2 with a font-size of 1.25em.
  14. Add a selector for .sitemenu with a font-size of .9rem.
  15. Add a selector for #introduction, setting padding to 22px and text-align to center.
  16. Add a selector for .quote, setting:
    1. float to none
    2. width to 100%
    3. margin to 0 on all sides
  17. Add a selector for .conference-info, setting:
    1. display to block
    2. width to 100%
    3. bottom padding to 1em
    4. height to auto
    5. margin to 1em on the top/bottom and auto on the left/right
  18. Add a selector for .teaser, setting:
    1. width to 100 pixels
    2. margins — top = -30px, bottom = .5em, left = .5em, right = 0
    3. max-width to "unset"
    4. float to right

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

Output between 769 and 992px

Below is approximately how your page should look between 769 and 992px:

Output at 768px and below

Below is approximately how your page should look between 769 and 885px:

Part 2

This time, let's use Bootstrap on our final untouched page: speakers.html.

  1. The speakers page is just a shell that we need to bring up-to-date to look like the home page just like we did in previous practices with the register.html, venue.html and schedule.html pages. 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 speakers.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 speakers.html.
    4. Add the following four lines of code ABOVE the link element for "style.css":

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
      
      They MUST go above "style.css" so that your CSS takes precedence.
  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 Speakers.
    2. A p element containing the text:

      We're happy to welcome over twenty speakers to present on the industry's latest technologies and trends. Prepare to be inspired.

  4. Next, add another section element with an id attribute of speakerlist.
  5. This section will contain the two keynote speakers' bios and headshots followed by a set of headshots and basic information for a sample of other speakers at the conference. We'll use Bootstrap to make the speaker blocks display differently depending on the size of the device on which it is being viewed.
  6. Inside the #speaklist section, add an h2 element with the text Keynote Speakers.
  7. Next, add a div element with two class values: row and speakerblock.
  8. Inside this div, add another div with three class values: col-12 col-md-8 speakerbio. Inside this new div, add:
    1. h3 with text Cain Brady
    2. h4 with text The State of Web Design
    3. p with text:

      Where are we? Where have we come from? Where are we going? Take stock of what's going on in current web design and development during an interactive talk that illustrates the potential for the future given the lessons of the past.

    4. h4 with text About Cain
    5. p with text:

      As a designer and front-end developer, Cain Brady has a passion for solving problems while building creative and intuitive products. Cain specializes in product design and interface development, specialties which he regularly writes and speaks about.

  9. Just after the .speakerbio div but still inside the .speakerblock div (this is where good indentation comes in handy), add another div with these class values: col-12 col-md-4 order-first order-md-last.
  10. Inside that div, add yet another div with a class of speakerphoto.
  11. Inside the .speakerphoto div, add:
    1. An img element with a src of https://jasontmickel.com/dci108/inclass/cainbrady.jpg and an alt attribute of Cain Brady.
    2. A div with class speakersocial that contains the following:

      <div class="twitter">
        <a href="#">@cainbrady</a>
      </div>
      <div class="website">
        <a href="#">cainbrady.com</a>
      </div>
      
  12. Stop for a moment to review and be sure you have set up your code correctly because we're really digging deep with the box model here. Just below "Keynote Speakers", your code should look like this:

    <div class="row speakerblock">
      <div class="col-12 col-md-8 speakerbio">
        <h3>Cain Brady</h3>
        <h4>The State of Web Design</h4>
        <p>Where are we?  Where have we come from?  Where are we going?  Take stock of what's going on in current web design and development during an interactive talk that illustrates the potential for the future given the lessons of the past.</p>
        <h4>About Cain</h4>
        <p>As a designer and front-end developer, Cain Brady has a passion for solving problems while building creative and intuitive products. Cain specializes in product design and interface development, specialties which he regularly writes and speaks about.</p>
      </div>
      <div class="col-12 col-md-4 order-first order-md-last">
        <div class="speakerphoto">
          <img src="https://jasontmickel.com/dci108/inclass/cainbrady.jpg" alt="Cain Brady">
          <div class="speakersocial">
            <div class="twitter">
              <a href="#">@cainbrady</a>
            </div>
            <div class="website">
              <a href="#">cainbrady.com</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    If it doesn't, go back and correct it because you need to set up one more of these for the other keynote speaker. If everything is correct, you can safely copy and paste then simply change the information for the second person.
  13. Copy the entire .speakerblock div that you wrote and paste a new one BELOW the </div> closing tag of it.
  14. Change the following info in the new block:
    1. h3 → Evangeline Callahan
    2. h4 → So You Want to Be a Unicorn?
    3. p → They're elusive, those rare beings who do front-end development, visual design, project management, UX, content strategy, and are whizzes at user research. In an industry that's constantly changing and evolving, there are both benefits and drawbacks to being a generalist. We'll walk through strategies to fill gaps in your skill set while working a full-time job, and collaborative tools and techniques you can use while you quest to learn it all.
    4. h4 → About Evangeline
    5. p → Evangeline Callahan is Creative Director for a growing, employee-run digital consulting agency, where she guides clients through identity crisis to a meaningful, impactful web presence. In addition to conducting client therapy, she also designs websites and applications that are both beautiful and organization changing.
    6. img src → https://jasontmickel.com/dci108/inclass/evacallahan.jpg
    7. img alt → Evangeline Callahan
    8. Twitter handle → @evadesigner
    9. Website text → evacallahan.com
  15. On the home stretch! Below Evangeline's .speakerblock div, add an h2 with the text A Sample of Speakers.
  16. Then add a div with class attribute values: row speakersample. Inside this div, you'll be creating 12 mini bios that will display in different configurations based on browser width. If you get the first one correct, the rest will be copying, pasting, and editing the details.
  17. Inside of the .speakersample div, add a div with all of the following in the class attribute:
    1. col-12 — one across @ extra small
    2. col-sm-6 — two across @ small
    3. col-md-4 — three across @ medium
    4. col-lg-3 — four across @ large or greater
    5. speakerphoto
  18. Within this div, add:
    1. An img with the src of https://jasontmickel.com/dci108/inclass/alisablankenship.jpg and an alt of Alisa Blankenship.
    2. A div with class speakersocial that contains:
      1. An h4 with the text Alisa Blankenship
      2. A div with class twitter that contains a hyperlink pointing to # with the text @alisablankenship
      3. A div with class website that contains a hyperlink pointing to # with the text alisablankenship.com
  19. Pause again here to ensure that your code is correct. It should look like this inside the div of class "speakersample" at this point:

    <div class="col-12 col-sm-6 col-md-4 col-lg-3 speakerphoto">
      <img src="https://jasontmickel.com/dci108/inclass/alisablankenship.jpg" alt="Alisa Blankenship">
      <div class="speakersocial">
        <h4>Alisa Blankenship</h4>
        <div class="twitter">
          <a href="#">@alisablankenship</a>
        </div>
        <div class="website">
          <a href="#">alisablankenship.com</a>
        </div>
      </div>
    </div>
    
    As before, if needed, fix up your code. Otherwise, it's time to copy and paste.
  20. Copy and paste the above entire div 11 times. Make sure that each new paste is entirely below the previous and all are inside the div "speakersample".
  21. Use the following table to guide the changes to the details of each div.

    Note: Every image URL below should start with "https://jasontmickel.com/dci108/inclass/"

img src img alt Full Name Twitter Website
1 aamircassidy.jpg Aamir Cassidy Aamir Cassidy @acassdevel develworship.com
2 barnabyesparza.jpg Barnaby Esparza Barnaby Esparza @midsomerdesign midsomerdesign.com
3 hubertfulton.jpg Hubert Fulton Hubert Fulton @hubert designengine.com
4 seanharrington.jpg Sean Harrington Sean Harrington @seanharrington harrington.com
5 farisholder.jpg Faris Holder Faris Holder @farisdayoff anyoneanyone.com
6 christyhuerta.jpg Christy Huerta Christy Huerta @christyhuerta christyhuerta.com
7 rebekkalindsay.jpg Rebekka Lindsay Rebekka Lindsay @bekkstalks rebekkalindsay.com
8 zaramejia.jpg Zara Mejia Zara Mejia @zaramejia zaramejia.com
9 hazelnava.jpg Hazel Nava Hazel Nava @navabeans hazelnava.com
10 callumrogers.jpg Callum Rogers Callum Rogers @callumrogers rogerthat.com
11 eddiewelch.jpg Eddie Welch Eddie Welch @eddiewelch eddiewelch.com

Your speakers.html file should look like this:

Last but not least, let's apply some extra CSS to style the speakers page beyond what Bootstrap is providing.

  1. Bootstrap's CSS changed our h1 and h2 fonts to no longer be bold. Let's reset that. You should have an existing selector of h1, h2. To its list of properties, add font-weight: bold;
  2. It turns out that .container is already a special class in Bootstrap. We could go back and update our code, but since we're not concerned with Bootstrap containers, let's simply update our selector to allow containers to take up the entire browser width. Find the existing .container selector and add to its properties: max-width: 100%;.
  3. In previous practices, you've been adding to a list of selectors for #location, #wlu, #schedule, #registration. At some point we should come back and refactor this into one class that is applied to all of these elements in the HTML. For now, add one more selector to the list: #speakerlist
  4. Above where your media queries start, let's add some CSS to edit the speakers page. Your CSS at the end of this practice will be over 400 lines! If you haven't already, it might be a good time to add a comment in CSS to note that this CSS is for the speakers page: /* SPEAKERS PAGE */
  5. Add a selector for .speakerblock with a bottom margin of 3em.
  6. Add a selector for .speakerbio with right padding of 3em and a top margin of 1em.
  7. Add a selector for the class "speakerphoto" with the following properties:
    1. border that's 1px thick, solid, and the color rgba(63, 37, 32, 0.25)
    2. no padding on any side
    3. center-aligned text
    4. Raleway font
    5. top margin of 85 pixels
    6. bottom margin of 2em
  8. Add a selector for .speakerphoto img. Note the space between the two words. We'll be looking at what this means coming up in class soon. This selector should have the properties:
    1. border radius of 50%
    2. height of 150 pixels
    3. width of 150 pixels
    4. top margin of -75px (note the negative sign, which pulls the photo up)
    5. object-fit: cover; This is a newer rule that allows us to play with how the image fits a particular space. It only works in newer browsers.
  9. Add a selector for the class "speakersocial" that has 1em of padding on all sides.
  10. Add a selector .speakersocial a with color set to unset, which allows us to override any changes made up to this point, setting back to the default.
  11. Add a selector .speakersample .speakerphoto, setting the border to none.

Your latest style.css file should look like this:

Output at large and above

Output from medium to large

Output from small to medium

Output from extra small to small