Book Image

Learning Bootstrap 4 by Building Projects

Book Image

Learning Bootstrap 4 by Building Projects

Overview of this book

Bootstrap, the world’s most popular frontend framework, is an open source toolkit for building web applications with HTML, CSS, and JavaScript. Learning Bootstrap 4 by Building Projects covers the essentials of Bootstrap 4 along with best practices. The book begins by introducing you to the latest features of Bootstrap 4. You will learn different elements and components of Bootstrap, such as the strict grid system, Sass, which replaced Less, flexbox, Font Awesome, and cards. As you make your way through the chapters, you will use a template that will help you to build different kinds of real-world websites, such as a social media website, a company landing page, a media hosting website, and a profile page, with ease. By the end of this book, you will have built websites that are visually appealing, responsive, and robust.
Table of Contents (9 chapters)
Free Chapter
1
Introduction

Building a menu

Now, we get to start on our first project. What I've done is taken our hello_world project and used it as our template for the first project. I copied the contents of the hello_world project into a folder named P1, for Project 1, and I've also copied in the node_modules so that I've got everything there that I need from hello_world, which is going to be a template going forward:

Using this as a template will make the project's startup time a little bit quicker. We also need to make sure that our Sass files are cleared, because we will be putting in our own variables for this project.

Before we start updating our hello_world template and shaping it into a photosharing website, I want you to get a rough idea of what we are going to build. The following is a screenshot of the photosharing website's home page. There are obviously more features...