code icon

CSCI 1720

Intermediate Web


Homework 4 - Cards

  1. In your working_folder\homework folder, make a new subfolder and name it hw4_cards
  1. Download the starter files archive for this assignment and save them in the working_folder\homework\hw4_cards folder
  1. Extract the files. If you want, you can then delete hw4_starter-files.zip
  1. Open working_folder\homework\hw4_cards as a Brackets project
  1. In Brackets, open index.html

We're going to use embedded CSS for this assignment. So all of your CSS code will be added to what's already between the <style> & </style>

  1. index.html is completed already. Look at the code and see how the page is structured. You'll see that this page was constructed using the Bootstrap framework. All of the displayed content will be placed in a .container element

What we want to do is take this

screen shot

and turn it in to this:

screen shot

HTML+CSS

  1. Here's what your finished project should look like
screen shot
Fig. 0- Finished project
(click image to zoom in)

I'll include the pictures and bios for each card. So you'll just end up having to modify the image for each card and its included bio

  1. By looking at the HTML, you should be able to tell what classes we're going to have to add:
    • .card: will define the outer card component
    • .card-inner: will define the styling for the card's displayed content
    • .card-inner .header: will define the styling for the nested header element
    • .card-inner img: will handle styling for images that are embedded in the card
    • .card-inner p: will handle styling for the 'Bio' paragraph
    We may have to define some pseudo classes and/or helper classes as we go. But those are the main ones
  1. So, to make sure you don't miss anything, go ahead and create the classes in your index.html's <style> section
screen shot
Fig. 2- Provided styles
(click image to zoom in)
screen shot
Fig. 2a- Add "card" classes
(click image to zoom in)
  1. The .card class acts as a container for the displayed card content (.card-inner). So, it just needs some basic styling
screen shot
Fig. 3- .card

Again, this allows us to position the cards on the page without messing up each card's inner content

  1. Now, for the card's inner (display) content
screen shot
Fig. 4- .card-inner

Notice that the position value for .card-inner is relative. So, since .card-inner is nested in (is a child of) .card, top: 0; & left: 0; will position the element's top left corner right on top of the .card's upper left corner, making them overlap. This is what we want

  1. Add the following to style each of the three elements (.card-header, img, & p) that will be nested inside each .card-inner
screen shot
Fig. 5- .card-inner .card-header

Once again, the .card-header is positioned to overlap .card-inner, with its upper left corner sitting on top of .card-inner's (and, consequently, .card's) left corner(s)

screen shot
Fig. 6- .card-inner img

This should be pretty obvious: We're centering the image, giving it a little top and bottom margin, & giving it a little border (to separate the pics with light backgrounds from the .card-inner's background). border-radius: 50%; makes the border circular (the images were edited to be circular with a transparent background, so this makes the border fit the picture, instead of being a big ol' square)

screen shot
Fig. 7- .card-inner p

The only thing to note here is text-align. The justify value 'squares off' the display of the text by modifying the space between words, making the text appear more block-like (like newspapers' & magazines' print content)

  1. Fig. 2 included a bit of a fib. The CSS isn't completely done. In order to arrange the cards in the grid-like display in Fig. 1, it's easiest to use Flexbox. Expand the code for .col-md-12, which is currently empty. Add the following
screen shot
Fig. 8- Styling the flex container
(click image to zoom in)
  1. Look at the end of the index.html end. This is a jQuery script I wrote to handle the animation of the cards. When a card is hovered over, it scales up slightly to provide visual feedback to the user. Look at the code and see if you can figure out what's going on (we'll be diving in to jQ real soon!)
screen shot
Fig. 9- jQuery script to enlarge and
reduce the display size of cards

After looking closely, you might have noted that the script dynamically adds and removes two CSS classes. Which we haven't defined, yet. So, add

screen shot
Fig. 10- CSS classes for scaling

So, when the user hovers over one of the cards, the mouseenter event is 'fired.' This causes the script to remove the .scale-down class (if present), and add the .scale-up class. .scale-up has a .5s transition time and scales the card to 110% of its orginal size. When the cursor leaves the card (mouseleave), another event is 'fired,' which removes the .scale-up class and adds the .scale-down class, making the card shrink back to its original size

  1. Save your work and display the page with Live Preview. You should see something like this:
screen shot
Fig. 11- One card
(click image to zoom in)
  1. Now, we just have to add the remaining five cards. You can do this easily by highlighting the code for the first card, down to the empty line (add one, if you have to) below it and pressing Ctrl+d five times. Then, looking at the file bios.html, you can copy and paste each card's content (don't forget to add alternative text to your images!)
screen shot
Fig. 12- Duplicating the cards
(click image to zoom in)
screen shot
Fig. 13- Duplicating the cards
(click image to zoom in)
  1. Once you have all six cards completed, save your work and return to Live Preview and refresh the page, if necessary. Now, to see the power of Flexbox, open the developer tools (F12 or Right-click→Inspect)
  1. Click the responsive test tool → screen shot
    (In Chrome, by default, you'll find it in the upper right corner of the display)

The responsive test tool isn't perfect, but it will give you an idea of how the display will be produced for different sized viewports. Another way you can test is by resizing the browser window itself and adjusting its width with your mouse

  1. Hover over each image. If you copied the provided code for the .scale-up & .scale-down classes, when you hover over the image, it should grow in size a little bit and the paragraph's text should turn red
screen shot
Fig. 14- Hovering over an image

I tweaked the validation script a little bit for this assignment (instead of calling an external JS file, I've embedded the code in index.html, so I could customize some of the values to make it work). So the icons will be there when you view the page locally, but they still won't work until you upload your work to the server

Uploads & such

  1. Once everything is working as it should, upload your index.html file & images folder to your server account into a new folder named /homework/hw4
  1. In your browser, view the file from the server

Remember, the path will be

zabc1.csci1720.net/homework/hw4/index.html,

where you will replace 'zabc1' with your ETSU ID

  1. Verify that the hover effect works, still
  1. Ctrl+click each of the icons for the validator and ensure that your work is error-free
screen shot
Fig. 15- Validation
(click image to zoom in)
  1. Copy & paste the URL for your assignment into a new text file in Brackets. Save the file as hw4_cards.txt and upload the file to the HW 4 folder in D2L

Have a nice day 😊