Most of the time, when designing a website, developers will use a CSS Framework. There are tons of frameworks to choose, Bootstrap, Tailwind, Bulma, and more. We will be using Bootstrap.
Go to getbootstrap.com, click on Documentation, then go to Introduction and copy the CSS. Paste it into the header. Below might not be the latest version, so please double check.
<head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous"> </head>
Bootstrap has a lot of components to use, which we will go over in the next lesson, but let’s go over a few basic parts.
Bootstrap has many elements made up of divs. This means that nested elements are needed. Inside our body, lets create a div with the container class.
<body> <div class=”container”> <!-- STUFF GOES HERE --> </div> </body>
You can use comments to explain your code, which can help you when you edit the source code at a later date. Comments do not show up in your browser when you load the HTML page. To create comments in HTML, just use:
<!-- THIS IS A COMMENT IT WORKS ACROSS MULTIPLE LINES -->
To create comments in CSS, just use:
/*THIS ALSO WORKS ACROSS MULTIPLE LINES*/
The container class has its own CSS properties with margins and padding. This evenly spaces out your content based on the viewport(desktop, laptop, mobile ,tablet, smart fridge 😜). Anything you put in here will format perfectly. In the next lesson, we will start creating our page.