Web Design Basics

Web design is not like it used to be in the bad old days. In the past we had to learn the basics of HTML (relatively straight forward), the intricacies of CSS (a dark art) and javascript. Whilst it's useful to have learnt the fundamentals of each, these days the task of designing and coding a website is made much easier by using a CSS framework. We'll focus on the Bootstrap framework, but the principles used are common to other CSS frameworks like Tailwind, Foundation etc.

The Grid

Perhaps the most ground breaking and useful component of Bootstrap (at least in my own personal experience) is the grid. Using the grid makes constructing the layout of a page much easier. In the early days of web design we had to hijack the use of tables to get the layout we needed. Then using tables for layout became illegal and we had to battle with CSS to structure our pages. This often involved the use of hacks and workarounds. Use of the grid means that those days are gone.

The grid in Bootstrap divides a 'container' into 12 imaginary columns on the horizontal plane and any number of rows in the vertical plane. We can allocate to an element (usually a div) any number of columns and each element takes up a width relative to its allocated columns. For example, a row may contain two divs with a width of 6 columns, or four divs with a width of 3 columns. Notice that the total number of columns must be less than or equal to 12. If you have five divs in a row, each with a width of 3 columns, the fifth div will wrap onto the next row. All this is handled for you by Bootstrap.

Bootstrap Components

Bootstrap also provides a selection of components that you can copy and paste into the code of your web page. The components that I find myself using the most often are form elements, cards, navs and buttons. Use of these components provides a consistent look and feel.

Using Bootstrap

There are a couple of options for linking to teh Bootstrap CSS and javascript files. You can link to a CDN (Content Delivery Network) or you can download the files and host them locally. Each option has its own advantages. Copying and pasting the link to a CDN is quick and easy. But what if there are issues connecting to the CDN? Downloading and installing the files takes up space and is one more thing to install in an environment, but access to the files might prove more reliable.

Criticisms

The main criticism I hear of Bootstrap is that, because it's so popular, many websites end up looking the same.