Part 1
Let's start making our conference site responsive by working with our home page: index.html.
- Open the practice site in VSCode: Open VSCode
- Open a tab so you can preview your site as you work: View Your Practice Site
- 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.
- 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!
- Change the
id
attribute on thesection
element in question from schedule to schedule-home.
- Change the
Let's turn to your style.css file to set up the media queries to make the home page responsive.
- 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.
- Add a selector for
.siteheader
with these properties:background-image
of nonebackground-color
of rgb(115, 53, 39)height
of autopadding
of 0
- Add a selector for
#logotitle
with these properties:padding-top
of 0width
of 100%color
of #ffffff
- Add a selector for
.logo
withwidth
of 16.9% andvertical-align
of top. - Add a selector for
.titlemenu
withwidth
of 82.5% andbackground-color
of rgb(115, 53, 39). - Add a selector for
footer
with these properties:- rgb(115, 53, 39) for background color
- .5em of padding on all sides
- #ffffff for text color
- Add a selector for the
a
element withcolor
of #ffffff. - 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.
- 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.
- Inside the new media query's curly braces, add a selector for
.logo
with a property ofdisplay
set to none. - Add a selector for
.titlemenu
, setting itswidth
to 100%. - Add a selector for
h1
with afont-size
of 2em. - Add a selector for
h2
with afont-size
of 1.25em. - Add a selector for
.sitemenu
with afont-size
of .9rem. - Add a selector for
#introduction
, settingpadding
to 22px andtext-align
to center. - Add a selector for
.quote
, setting:- float to none
- width to 100%
- margin to 0 on all sides
- Add a selector for
.conference-info
, setting:- display to block
- width to 100%
- bottom padding to 1em
- height to auto
- margin to 1em on the top/bottom and auto on the left/right
- Add a selector for
.teaser
, setting:- width to 100 pixels
- margins — top = -30px, bottom = .5em, left = .5em, right = 0
- max-width to "unset"
- 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.
- 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:
- Copy and paste the entire
header
section from the top of thebody
from index.html over top of the currentheader
section in speakers.html. - Do the same for the entire
footer
section at the bottom ofbody
. - Copy and paste the two
link
elements from thehead
of index.html into thehead
of speakers.html. - 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.
- Copy and paste the entire
- Inside of
main
, create asection
element with anid
attribute of introduction and aclass
attribute with two values: container and clearfix. - Inside this new section, add:
- A
header
element containing anh2
element with the text Speakers. - 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.
- A
- Next, add another
section
element with anid
attribute of speakerlist. - 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.
- Inside the
#speaklist
section, add anh2
element with the text Keynote Speakers. - Next, add a
div
element with twoclass
values: row and speakerblock. - Inside this
div
, add anotherdiv
with three class values: col-12 col-md-8 speakerbio. Inside this new div, add:h3
with text Cain Bradyh4
with text The State of Web Designp
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.
h4
with text About Cainp
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.
- Just after the
.speakerbio
div but still inside the.speakerblock
div (this is where good indentation comes in handy), add anotherdiv
with theseclass
values: col-12 col-md-4 order-first order-md-last. - Inside that div, add yet another
div
with aclass
of speakerphoto. - Inside the
.speakerphoto
div, add:- An
img
element with asrc
of https://jasontmickel.com/dci108/inclass/cainbrady.jpg and analt
attribute of Cain Brady. - A
div
withclass
speakersocial that contains the following:
<div class="twitter"> <a href="#">@cainbrady</a> </div> <div class="website"> <a href="#">cainbrady.com</a> </div>
- An
- 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. - Copy the entire
.speakerblock
div that you wrote and paste a new one BELOW the</div>
closing tag of it. - Change the following info in the new block:
- h3 → Evangeline Callahan
- h4 → So You Want to Be a Unicorn?
- 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.
- h4 → About Evangeline
- 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.
- img src → https://jasontmickel.com/dci108/inclass/evacallahan.jpg
- img alt → Evangeline Callahan
- Twitter handle → @evadesigner
- Website text → evacallahan.com
- On the home stretch! Below Evangeline's
.speakerblock
div, add anh2
with the text A Sample of Speakers. - Then add a
div
withclass
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. - Inside of the
.speakersample
div, add adiv
with all of the following in theclass
attribute:- col-12 — one across @ extra small
- col-sm-6 — two across @ small
- col-md-4 — three across @ medium
- col-lg-3 — four across @ large or greater
- speakerphoto
- Within this div, add:
- An
img
with thesrc
of https://jasontmickel.com/dci108/inclass/alisablankenship.jpg and analt
of Alisa Blankenship. - A
div
withclass
speakersocial that contains:- An
h4
with the text Alisa Blankenship - A
div
withclass
twitter that contains a hyperlink pointing to # with the text @alisablankenship - A
div
withclass
website that contains a hyperlink pointing to # with the text alisablankenship.com
- An
- An
- 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. - 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". - 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 | 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.
- 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; - 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%;. - 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 - 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 */
- Add a selector for
.speakerblock
with a bottom margin of 3em. - Add a selector for
.speakerbio
with right padding of 3em and a top margin of 1em. - Add a selector for the class "speakerphoto" with the following properties:
- border that's 1px thick, solid, and the color rgba(63, 37, 32, 0.25)
- no padding on any side
- center-aligned text
- Raleway font
- top margin of 85 pixels
- bottom margin of 2em
- 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:- border radius of 50%
- height of 150 pixels
- width of 150 pixels
- top margin of -75px (note the negative sign, which pulls the photo up)
- 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.
- Add a selector for the class "speakersocial" that has 1em of padding on all sides.
- Add a selector
.speakersocial a
withcolor
set to unset, which allows us to override any changes made up to this point, setting back to the default. - Add a selector
.speakersample .speakerphoto
, setting the border to none.
Your latest style.css file should look like this: