JeffAstor
Web Development

Clone Twitter's Front End Part I

undraw svg category

NOTE: This post was originally created as a lesson for my high school students. The target audience is beginners to web development.

Twitter’s role in modern society can’t be understated. Anyone with anything to say gets an opportunity to be heard. Just find a device with access to the Internet and type up to 140 characters into the tweet box. Click submit. Boom. You have a voice.

Simple concepts that are surprisingly powerful always amaze me, and the tweet is a prime example. And it can’t be that hard to recreate, can it?

Let’s do that here. We’ll build out a simplified Twitter feed page that replicates how the application works on the front-end.

This screenshot will serve as our guide during the process.

twitter landing page

Part 1 (this part) will deal with the markup. That is, we’ll write a bit of HTML and a lot of CSS. Part 2 will mix markup and JavaScript.

The Navbar

We’ll start with the fixed navbar component. Open up a new codepen or fork this one here and follow along.

All we’ve done here is layout some div elements that will hold most of the app content and add a bunch of CSS variables to the :root pseudo selector. If any of that is confusing to you, check out some of my earlier posts on building websites from scratch or on using CSS variables .

Start by adding the following code to your CSS section.

We specify that the body should use the --color-twitter-bg CSS variable to color our main background, and that the base font-size should be 14px.

Giving the .navbar a fixed position, with top: 0, right: 0, left: 0, and z-index ensures that it stays at the top of the screen and overlaps everything that moves under it. We use display: grid and create 12 columns of equal width. Then, we create a grid-template-areas property to specify how much space each section should take up.

The .links section is be given a grid-area name equal to ‘links’ and uses flexbox to position the elements inside of it.

If you don’t understand any of this part, check out one of my previous posts on CSS grid and CSS flexbox

To see our results in action, add add some HTML and icons to the navbar.

We’re making use of the font-awesome library to create icons in our HTML by using classes like fa-search, fa-bolt, and fa-user. We need to add the font-awesome css stylesheet to our file before the icons will actually appear. So refactor the code in between your head tags to look like this.

Now all of our icons should appear. We still have a little work to do.

Notice how each div has the class name equal to what we’ve specified in the grid-template-areas property of the .navbar? Make sure to add that information to your CSS section like so.

The elements should now be positioned properly along the x-axis, but they’re not styled very well and look out of place. Let’s fix that now.

We’ll start by creating a css rule to vertically center every element.

After assigning that class to the .bird, .search, and .actions elements, we’re ready to start making things look nice.

We’ll start by working on our navbar links. Add the following css to your file.

Let’s take a sneak peek to see how it looks (telling the bird, search, and actions sections not to display).

Wow. That made a big difference. We told each <li> inside our .links list to have a flex of 1. This tells the list items to take up all the available space inside the list, and share it equally. The minimum size of each <li> is set to 1/4 the size of the </ul>.

We make the list items 49px tall and set their border-bottom to solid 2px transparent. This will take up all 50px of the navbar and 1 extra pixel. It will also provide a nice transition effect when we add color to the border in a second. We finish it off with transition: all 0.2s ease so that all animations will have a 200ms delay (200ms is 2/10 of 1 second) and look smooth.

Add the following to your css to see that colored effect happen.

This chunk of code tells any list items with a class of .active or any list item that is hovered over should have a color and border-bottom equal to the Twitter blue color we defined earlier.

If you look carefully at Twitter’s home page, you’ll see there’s a tiny dot above the active link also. We’ll implement that like so:

Though this isn’t always the best way to accomplish this, it is good to know how to use the ::before and ::after pseudo-selectors.

That weird ::before selector is a pseudo-selector that is applied to the span nested inside of the <li> with an active class. It basically creates a <div> before the span that is a 5px radius circle with the background of twitter blue. We position it absolutely to take it out of the flow of the page and move it 10px from the top of the navbar.

Mozilla outlines the ::before pseudo-selector here.

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

The example they give is this one:

I don’t know how often we’d want to put a heart before all links, but hey, at least we know!

With all those additions, our navbar should now look like the following codepen.

Let’s finish up the rest of this navbar real quick.

Throw the rest of this css into your page to complete the navbar.

Nothing super interesting here, other than how we made the .fa-circle icon hide the bottom part of the .fa-user icon. Because the user icon is nested in the circle icon, we tell the .fa-user to have transform: translateY(6px). This moves the user down 6px from its original position. The circle icon has a border-radius of 50% and it’s overflow set to hidden. Now, when the user icon moves beyond the outside of the circle, it is hidden. Lovely.

The rest is pretty standard.

To polish off the navbar, add the following media queries so that everything looks nicer when the width is minimized.

Showcasing the power of CSS grid, these rules guarantee that our navbar looks decent enough at different screen sizes.

Let’s check out our page one more time.

The Main Tweet Feed Section

Whew, we’re finally ready to create our Twitter feed page. Let’s add create the two outside columns first, and then fill out our tweet box and twitter feed.

Update your .main div to look like this:

and then add the following code to the bottom of your CSS section.

This is all standard HTML and CSS with an added pinch of CSS flexbox and CSS grid. Make sure to also update the media queries for nicer displays on different sized screens.

With all that code, we finally get to something like this codepen.

Not looking half bad. We’ll fix those media queries when we add the feed in to make things look nicer.

That’s more than enough code for one day. Let’s save the tweet box and feed until the next post.

Wrapping Up and Resources

Our halftime result isn’t anything to scoff at. It took more code than I originally thought it would, and there’s definitely room for improvement. Still, we’re almost at a working prototype and we’re ready to make our site interactive.

Tags:

← Previous Post undraw svg category

Build a Dropdown in Vanilla JS

 Next Post →undraw svg category

Clone Twitter's Front End Part II