Why did I make a Bootstrap template in 2018?
It seems weird to go and download Bootstrap again and start laying out a simple profile page after being deep into thousand line JavaScript files. After the whirlwind of starting our company (www.digitaldynasty.ca) with my business partner Matt Lawrence, the work began to pile up and time for doing small projects became shorter and shorter. We picked up larger clients and I was assigned to working directly with one of our biggest ones on a daily basis. Although this gave me a great perspective on coding with a team of people, I didn’t get much time to work on a portfolio of work since most of the projects I was helping with were under NDA’s. So starting with a simple portfolio Bootstrap template is an easy way for me to get back into portfolio work as well as providing content for a new project that we are working on (hint: Read the article to learn more)
Lets get a little background on me
I’ve got a little bit of a different path then most for getting into web development. Taking Computer Engineering Technology at my local college, we started learning programming in assembly, making micro controllers flash some lights. Turn this bit on, that one off, very simple stuff. Yet learning how coding works at a machine level gives me a different perspective on writing and learning coding languages. Whether that’s a good or bad thing I’ll let everyone reading this decide. When learning web development I took the same approach as with learning coding on a micro controller, I started at the bottom.
Before diving into any sort of frameworks or libraries I made sure I understood all the intricacies of HTML, JavaScript and CSS as they were meant to be used. Even jQuery wasn’t allowed during this time. I made websites (not very good ones) Chrome extensions (Lists by Design), Chrome apps (Clicks to Riches) and even helped clients build out features in pure JS. Once I was familiar with these technologies I brought in jQuery and Bootstrap and really started to appreciate the time saving and ease of use. Being able to create a page structure in a matter of minutes by just adding classes was almost magic to me after having to write out each and every style in CSS.
After learning these frameworks I quickly moved through a bunch of the popular technologies; NodeJS, React, Angular, Vue, Cordova and probably a few more I’m forgetting. I was excited to see what they all had to offer, and where I could use them in my future projects. I look at these frameworks as tools instead of learning how to do everything on just one of them I’d rather learn how to use them all and apply them to where they work best. I think this is where my approach differs then some of you out there, I might not be an expert in any of these frameworks but due to my solid base in pure JavaScript I find it easier to switch between them.
Reasons for choosing Bootstrap
So why after learning all this did I decide to make a template in bootstrap in 2018? Even though plenty of new and exciting frameworks now exist I still believe Bootstrap is a great base for new developers to start with. Not only has it been supported the longest, it continually evolves with the web, for instance in the newest version most of the components can be built with flex box. Now flex box might not be the newest technology but recently, with the popularity of CSS Grid, flex box has made somewhat of a comeback in being a more supported version of the former. The template I am making is meant to be used by someone just beginning their web development journey. Take it and play around, use it, break it. The only libraries used in this is Bootstrap, jQuery, Lightbox and Font Awesome for the icons. I think this is a great place to start for anyone getting into creating websites because even though it’s not as ‘low level’ as I started, it’s basic enough to understand how web technologies work. Start with just changing the colors, I didn’t make it too easy for you so you’ll have to figure out which classes to change (hint: find and replace is your friend). Add your social media links to the anchor tags. Remove some elements and play around with positioning. There is plenty you can do by just taking a template like this and understanding how it works.
Whats this new project we are working on?
This template was made as a start to a new project that we are working on. HTML All The Things (website coming soon) or HATT will be a resource for fresh and seasoned web developers that want to learn, see what other developers are up to or laugh at our mistakes. We’ll post it all there and hopefully build a community that will help each other throughout this journey. Along with templates, we’ll have code snippets, articles like this one to accompany all our work as well as a Podcast. My first contribution to HATT will be Split, a portfolio template that anyone can take and quickly use to show off their work. In the future my content will range from easy to understand code snippets to full on project templates in more complicated frameworks such as Vue.js (stay tuned!). As well as following the technologies that are trending up I will try to provide the core JavaScript content that people can use to learn some basic development concepts. With that I’m really looking forward to being able to contribute to the web development community!
