CSS Libraries Lab

Objectives

  1. Practice using Basscss for page layout

  2. Practice styling elements with CSS

Faking a Twitter feed

Now that we're familiar with Basscss, it's time to kick things up a notch and use it to fake a Twitter feed. Don't worry, we're still keeping things relatively basic. Here's what your end result should look like:

A couple of pointers:

  • The feed is contained in a div that is 600px wide, and centered horizontally. Do this using Flexbox for practice! Note that it also has some top margin to make the feed not stick to the page.

  • Feel free to use any content you want

  • All tweets have a bottom line to separate them a little, apart from the last tweet.

  • Keep an eye on the whitespace: between the image and the text on the right, between the tweet and the separator, ...

  • Lastly, add a custom class called muted (you can do this in the of the HTML using the

Clone: https://github.com/learn-co-curriculum/js-dom-and-events-css-libraries-lab

Last updated