︎
 
Njeshe Amal “ARTicle” blog

If you want to go quickly, go alone. If you want to go far, go together.




CONTENTS

· An Informal Introduction
· To Bootstrap, or Not To

· Redux: What The Flow?

· Get Started: Node/Express

· REST



BAKIN MASANIYA
Computer scientist, Lisa Gelobter, assisted with the 1995 creation of Shockwave, essential technology that led to the development of web animation. (So, we have her to thank for GIFs).

Every morning, a gazelle wakes up. It knows it must run faster than the fastest lion or it will be killed. Every morning, a lion wakes up. It knows it must outrun the slowest gazelle or it will starve to death. It doesn’t matter whether you’re a lion or gazelle. When the sun comes up, you’d better be running.

︎  ︎  




Home
ART—icle 02

To Bootstrap, or Not To.

A simple guide to getting started.




Before we begin, let’s get the assumptions out of the way. In following this guide, I assume that you have a basic understanding of building a site using HTML, CSS, and JS. I also assume that you have had a confusing experience with Bootstrap and hope to try again.
In this guide, I will provide screenshots of my actual process. I did not wake up with this knowledge. In fact, I attribute my success to Ayana Cotton of Flatiron School. Thanks, girl. I will follow a step-by-step format. Did I mention screenshots?


STEPS TO IMPLEMENTING BOOTSTRAP


When working on any product, it is important to have a vision. If you are an architect, you make blueprints. [01] If you are a developer, you will make wireframes. These two processes represent the same idea. A wireframe can be done physically, as in pencil to paper, or digitally. I use fluidui.com to make wireframes because of the awesome templates. [02] After you have your wireframe, it is time to advance to everyone’s favorite part, reading the documentation. I know, you thought we were going to skip over that part. You thought wrong, and here is why. It is important to get a basic understanding of the documentation in order to know which elements are useful to you and which ones aren’t. For this guide, I will be showing you how to use the BoostrapCDN (more on CDN here). We will be using the BootstrapCDN because it enables us to access bootstrap using only <link> and <script> tags. Easy, yes? Since you read the docs, you know that there are templates that you can use instead of building out your html code out from scratch. If you wish to use one, follow screenshot [03] and pick out a template.
Else, skip to step [06]. Next, towards the top of the examples page, click on “download examples” towards. This will give you access to ALL of the templates. [04] After you have copied the files you need, you can delete the folder if you want to. [05] In your app’s frontend add two new files and name them index.css and index.html. Additionally, if you previously had an index.html file that you were working from, rename that to draft-index.html. Then, paste the necessary files in their respective folders. [06] To access bootstrap add the css <link> to the <head> of your app. Optionally, [07] you can also add JS script tags at the end of <body>. This will be necessary for including components that need JS to function. And finally, you have the the basics necessary for implementing bootstrap into your application. When you include <script> tags linking any existing JS files you were working on, you will most likely get a ton of errors. Fear not, young dev. Work through the errors one-by-one, and integrate your forms, cards, buttons, and id elements you used for DOM manipulation and event handling. Then you’ll reach your MVP using boostrap.
Thanks for stopping by 🙃️, BYE! 
NEXT PAGE     HOME     INDEX