Navbars and Site Banners

Flatiron’s software engineering immersive program in Atlanta starts in just a few days and I could not be more excited. So excited that I’m doing a mid-week update to the site! The main changes include removing Flexbox (for now), adding a functional navigation bar, adding a “hero banner,” and incorporating google analytics.


I had a lot of fun working with Flexbox while writing my last post. However, I removed the Flexbox display to see how much I could do with just HTML and CSS’s normal flow. As it turns out, everything you see here can be developed without Flexbox.

Creating the navigation bar took a bit of trial and error. I eventually landed on sleek navbar tutorial from Fieldtrip. The instructions were clear and concise.

The Banner

A hero banner, like the image above, is a very large banner image used in website design to help engage users. Sites like Webdesignerdepot and artonic have great examples. This tutorial on youtube was a good guide.

Google Analytics

If you right click and “View Page Source,” you might notice a “google-site-verification” item in the head. I set up the verification and google analytics for this site after watching video by Maile Ohye from google webmasters.

I hope you enjoyed reading this post. I’ll be back soon with more updates about my software engineering journey.