A Marketer's HTML/CSS Journey: What is Bootstrap?
When studying HTML/CSS, I followed the study method I outlined in the previous post — referencing lectures from various sources while steadily working through my main textbook. As I mentioned before, I organized every example into individual folders as I studied. Along the way, whenever a major chapter ended, the book would sometimes include an exercise to build a complete HTML document from header to footer — from head to toe, so to speak.
The code was naturally long and complex, but after completing each one, I realized that the process of building up from head to footer step by step was incredibly helpful for understanding web document structure. After that realization, somewhere around the middle of the book, a thought occurred to me:
"Why don't I try building an actual page instead of just modifying examples?"
I decided to create a simple single page introducing myself using what I'd learned. After all, an HTML page that isn't hosted is essentially a private practice notebook — nothing to be embarrassed about.
So I started flipping back and forth through my thick HTML+CSS textbook, cobbling together a rough page. But no matter what I tried, the page looked painfully dated and no different from a basic study exercise. I was getting frustrated — until I discovered a whole new world.
I found "Bootstrap," tucked away in the appendix of my book.
What is Bootstrap?
Bootstrap is a web page design framework originally from Twitter that provides open-source layouts, input forms, navigation bars, buttons, and various other web page components. It supports not only PC but also tablet and mobile designs, making it a fully responsive web design framework.
When I first encountered Bootstrap, I searched high and low trying to understand it, but the concept just wouldn't click at first.
However, after actually using it, I was able to grasp the concept much more easily. There's plenty of advanced information on other developers' blogs for the experts, so let me explain it simply — for beginners like me.
Bootstrap was originally developed at Twitter. With so many employees working on development simultaneously, everyone had different coding styles, designs were all over the place, and management was a nightmare. To solve this problem, a few Twitter employees invested their off-hours into creating a standardized framework that could serve as a baseline. That was the beginning.
When they shared what they'd built internally, the response was overwhelmingly positive. More developers and web designers joined in, and that's how Bootstrap evolved into what it is today.
Still not clicking? How about this explanation: When I was first tinkering with Bootstrap to build web pages, I had a lightbulb moment. "This is exactly like customizing my Cyworld mini-homepage back in the day!" For those unfamiliar, Cyworld was Korea's dominant social platform in the 2000s, and it let you customize your page extensively — choosing skin colors, tab backgrounds, text colors, button styles. Skilled users would even create custom skins and sell or share them. That's essentially what Bootstrap does for web development.
Just like that, Bootstrap provides standardized components that we can freely use, and many people even go further by creating and selling templates based on it. (In some ways, it's similar to how PowerPoint templates work.)
Advantages of Bootstrap
- If you know HTML and CSS, you can start using it easily.
- It provides consistency and efficiency.
- You can use all sorts of elements — from layouts to large and small components — tailored to your preferences.
- You can use clean, polished designs that your humble HTML and CSS skills could never produce on their own.
- It's responsive web design — automatically adjusting the layout and elements for PC, tablet, and mobile screens.
Why Digital Marketers Should Know About Bootstrap
- It enables a broader and deeper understanding of web page components.
- Through the grid system, you can understand layouts and responsive web design.
- Understanding responsive design helps you grasp the importance of mobile-friendly content.
- You can experience and understand the various elements that make up a website.
- You can learn the names and types of commonly used standardized classes.
- A stronger understanding of web pages improves your communication with developers and designers.
In reality, while Bootstrap was developed for convenience and efficiency, learning it properly and in depth would require at least one full book's worth of study. So in this post, rather than covering "how to use Bootstrap," I've focused on what Bootstrap is, what makes it great, and why a marketer who's just starting to learn HTML and CSS — a marketer, not a web designer — should know about it.
In the next post, I'll write about how to get your hands dirty with Bootstrap — getting started with hands-on practice and preparing to build a single-page website!