WebLabs 02 | CSS and Responsive Design with Bootstrap

In our previous lab, you got a taste of some basic HTML and applied a little formatting. In this section, we’ll go more in-depth on Cascading Style Sheets, or CSS, the W3C standard for defining the presentation of documents in HTML. By extracting the presentation layer from the structure of the content, we can more efficiently control how our pages are styled. CSS is a separate language with its own syntax.

This lab will also introduce you to the concept of responsive web design (RWD). With users on phone, tablet, and computer, we want to design sites that will look good on all of those devices. The premise behind RWD is that the HTML provides content and structure, but the styling flexes based on the device.

Bootstrap is a free and open-source front-end framework for designing responsive websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only. [Wikipedia] Bootstrap was created by developers at Twitter and released in 2011. Bootstrap 4 contains pre-built CSS classes based on flexbox, CSS’s grid layout.

responsive design

Image Source: Medium.com Best Practices of Responsive Design

In WebLab 02, we’ll cover:

01 | Getting Started with CSS

02 | Cascading CSS

03 | CSS Selectors

04 | Responsive Design with Bootstrap

05 | Let’s build a responsive page!