1K Blog Marathon: Day 43
You’ve created a scrolling lyrics for your favorite song using <marquee> in HTML. Then you added CSS to add a striking orange background to your <body>. But when you search for website design idea online, you saw glossy, single-page website with glamorous effects and screen size-independent objects. You thought to yourself, “Am I missing something that the world is not telling me?”
Well, it’s time for you to learn about web development frameworks. Take away your simple HTML tags and take your basic CSS to the next level.
Let me introduce you to one of my best friends, Bootstrap.
Among the list of CSS-based web development framework, Bootstrap remains on top as the most popular and widely used by developers.
What is Bootstrap?
Bootstrap is an open-source CS framework for faster website creation. It uses CSS and JavaScript and is mobile-friendly.
Who is responsible for the existence of Bootstrap?
Developed by Mark Otto and Jacob Thornton, it was originally called “Twitter Blueprint”.
When was it released?
It was released on August 19, 2011 as an open-source project. Bootstrap 2 was released on January 31, 2012 and followed by Bootstrap 3 on August 19, 2013. Bootstrap 4 and 5 was released August 19, 2015 and June 16, 2020 respectively. Bootstrap 5 is still in Alpha as of the time of writing.
Where was it conceived?
Working at Twitter, Otto and Thornton created it to streamline the consistency across internal tools of their company.
Why was it created?
They created it to sum up all of their libraries. Because they were using different libraries and tools, inconsistency and issues arouse. To solve this, they created Bootstrap to have a standard library of usable tools (like buttons, toggles, etc.) to use for their development.
To further the development, they conduct weekly hackathon week for the Twitter Dev Team, so more and more contributors and helping the development of Bootstrap.
How it works?
Now, I will show you how to use Bootstrap in your web development process and how to “bootstrap” your programming skills!
Prerequisite: You should be familiar with HTML and CSS, and even a little bit of JavaScript. It’s not necessary that you’re a seasoned programmer, anyone can start Bootstrap even when you are just starting to learn programming. Let’s get started!
1. If you’re a seasoned programmer and want to figure it out on yourself, you can go to their website and follow the instructions: https://getbootstrap.com/
2. If you’re like me who’s just a Curbside Coder and newbie, I highly suggest you head straight to w3schools.com and search for Bootstrap tutorial.
3. As a starting template, copy and paste the following code to your favorite Text Editor and save it as HTML file (.html).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js
</head>
<body>
<div class="jumbotron text-center">
<h1>I’m a Curbside Coder</h1>
<p>Try resizing the browser and see some magic!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
4. Run it by double clicking the file.html. To see the full potential of this example, try resizing the browser. You can see that the objects inside does not overlap each other, and it adjusts as the width / height of the browser window is resizing.
Using Bootstrap as a CSS web framework teach me many things in programming and web development. Let me share you all my learning, and advice.
1. I learn how to use classes. Developing a website is not just typing code, it also requires your “eyes” for design. You can lessen your coding time if you use classes to identical objects, so their styles were identical also.
2. The use of Grid System. Bootstrap uses grid system in columns and rows to make your website mobile-friendly. And may I just point out more importantly that the world is facing a Mobile Age, less and less were browsing in Desktops and Laptops. People are mostly using their mobile phones to search, read blogs, buy and sell and go to social media sites.
3. You have option to use CDN (Content Delivery Network) or plain download the Bootstrap source to start your project. What works for me, however, is the code templates given by w3schools. After that all is self-study.
4. As a tip for debugging, you can use “Inspect Element” in Chrome browser. It really helps. Promise.
5. If you’re getting started in Bootstrap, please, don’t use other plugins / web framework other than JQuery, or else your learning and coding will be disrupted by the “New Shining JS”.
6. Know the power of “!important”. It’s very useful.
7. Document or comment on your code. It will save your soul from burning.
8. Learn Google Fonts, not just Comic Sans or Courier. It’s also a help to learn Font Awesome, it’s awesome!
9. Learn at least one installation approach, like using NodeJS, Gulp, NPM and Composer.
10. And most importantly, Use VS Studio for your code editor, highly recommended!
Because of the streamlined approach of Bootstrap in web framework, many other frameworks emerged and uses Bootstrap as their core. For example, my favorite framework, MDBoostrap. It uses Material Design combined with Bootstrap, but that’s for another blog.
“And that’s one blog, stay hungry!”
“Learning HTML and CSS is a lot more challenging than it used to be. Responsive web design adds more layers of complexity to design and develop websites.”
Jacob Lett, Bootstrap 4 Quick Start: Responsive Web Design and Development Basics for Beginners
Curbside Coder 