- Practice using Basscss for page layout
- Practice styling elements with CSS
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
divthat 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<head>of the HTML using the<style>tag). This class gives text a font color of#999. Apply this to the Twitter handle and date timestamp as shown in the screenshot.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent