I decided to revisit a project I completed a while ago that displays a random quote from Forismatic. This project is also part of the Free Code Camp curriculum that I have been completing in my spare time. I originally used Bootstrap to help with the layout of the page. I figured I would rewrite it without the help of a CSS framework to lean against, using flexbox. I have made a codepen for anyone who wants to look at the finished product.

The HTML

So the HTML is easy and doesn’t need much explanation. I am making use of the <blockquote> and <cite> tags to hold the quote and author. Here is the HTML:

Adding the CSS

This will center everything in our <body> and also set our font as Open Sans.

Now that the <body> is centered we will need to do the same to the container so all of the elements inside the container will be centered as well. We also need to make sure that flex-direction: column; is set since flex-direction: row; is the default and we want our content in a column.

Now our footer stays at the bottom of the page even if the quote is one sentence long. The height: 100vh; basically tells the browser to set the height to 100% of whatever height the viewport is. The flex: 1 tells the browser how much space the element should take up. Setting flex to 1 will tell the browser to make this element larger than its siblings since the default value is zero.

Lets style the <footer> and make the loading icon hidden for the time being.

This concludes the styling portion of this tutorial. I plan on writing up a Part 2 that will walk through the jQuery code. If you have any questions or comments feel free to leave them below. If you want to view the finished page, you can find it here and I have also added a Github repo for those who would rather download the source code to play around with. The final code up to this point is below.