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.
I decided to continue with the small flexbox tutorials. So here is another one. In this tutorial, we will make a navigation header using flexbox. If you haven’t read my first post on flexbox, you should check it out here. I have made a codepen of what we will be building. Let’s get started with the HTML.
So, now that I work with a team of web developers, I am constantly learning new things. One of the many new things I’ve learned about, is flexbox. I have to admit, I found it very intimidating at first. I figured I’d make a small tutorial about flexbox using a very simple navigation menu.
Flexbox makes things easier, especially when it comes to centering items. One of the main reasons I use Bootstrap in the majority of my projects is due to it being a pain to layout items and get them centered. Using frameworks like Bootstrap and Foundation help you get up and running quickly. However, most developers (I’ve been guilty of this) don’t go back and remove the unused CSS or use a CDN where most users will have the file cached, but for those who don’t, well it could take a bit more time to load.
So I’ve decided to start a blog and write about my journey of starting a new career. I just landed a job as a Junior Web Developer and I really wish I would have done this sooner! My goal for this blog is to gain a better understanding of the topics that I post about and hopefully help other new developers find their way through the maze of learning to code.
I have chosen to use ghost as my means to accomplish this. I wanted to play around with it before I decided to put it up on a server, so I started off with this repo on Github and typed
vagrant up in my terminal. Assuming you have vangrant, if not, check them out. It was actually quite simple once I figured out the best way to go about installing it. I’m also looking forward to tweaking the default theme and maybe writing out a small tutorial on how I accomplished this.
I know there are numerous tutorials on how to setup Ghost with Digital Ocean, but I figured I’d throw mine into the hat. This will be a quick and to the point tutorial of how to get your start a Ghost blog with Digital Ocean.
First, a quick introduction to Ghost and Digital Ocean. Ghost is an open source blogging platform that is easy to get up and running. It functions like a CMS and your posts are written in Markdown. Digital Ocean is a cloud hosting provider. They offer good prices and have a good deal of tutorials to help you get up and running. I’ll be honest, it took me a few days of research and playing around to get one of my sites up and running as I had only used GoDaddy before. So knowing your way around the terminal helps, but isn’t required for this tutorial.