Core
Interaction

HTML/CSS Puzzles

Tuesday, 2/28 – Lab

Results

chikh538.github.io 1, 2, 3, 4, 5, 6
funge549.github.io 1, 2, 3, 4, 5, 6
esragumrukculer.github.io 1, 2, 3, 4, 5, 6
kayaa946.github.io 1, 2, 3, 4, 5, 6
khalp570.github.io 1, 2, 3, 4, 5, 6
kims889.github.io 1, 2, 3, 4, 5, 6
seowxx.github.io 1, 2, 3, 4, 5, 6
leej312.github.io 1, 2, 3, 4, 5, 6
lie771.github.io 1, 2, 3, 4, 5, 6
kmpnguyen0.github.io 1, 2, 3, 4, 5, 6
privv824.github.io 1, 2, 3, 4, 5, 6
walde906.github.io 1, 2, 3, 4, 5, 6

Instructions

  1. Download the starter kit.
  2. Try to complete each task using as short and simple code as possible. Try to match your CSS and HTML as close as possible to the image. This includes the color, font size, width/height, etc.
    • You may find the Digital Color Meter on your Mac computer helpful for copying colors.
  3. Each task should reflect how the reference image looks at both the mobile and desktop breakpoints. The reference images are a 1:1 scale when viewed at 100% width. Make sure you click each image to open it in a new tab and view it at 100% width so that you get the scale correct. Each desktop screenshot is 1000px wide, and each mobile screenshot is 400px wide.

1. Inline Block

2. Quotes in Cards

Make sure to adjust the type sizes, margins and padding at the mobile breakpoint.

3. Flexible Checkerboard

4. Contain Yourself

5. Media Query Rothko

6. Typography and Google Font embed

For this puzzle you'll need to use the Krone One Google font to match the screenshots. Click the "select font" button next to Krona One, then click on the "1 family selected" tab that appears at the bottom of your page. Follow the instructions to use the font in your CSS file.

For the example you'll also need to adjust the `letter-spacing`, `line-height`, and `font-size` properties to match the screenshots.