On responsiveness

Changes in the layout

The menu above and the column layout will change upon the viewports width.

The menu right of the brand logo is visible when the viewport is 1024 pixels wide. Any smaller and it will retract into a burger in the top right of the navbar.

You will see two columns as long as the viewport is more than 768, meaning from 769 pixels, wide.

This page always takes up the whole screen, even on desktops. That means that there is no growing padding left and right when the screen gets very large.

Of course the content is not the main concern here. Our main concern is the so-called "application shell".

This is a css font

The name of the font is Lato

It's loaded from Google and this means that Google's url must be in the Content-Security-Policy meta tag in this page.

Web safe fonts like this one are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use Web Fonts. On

There are alternatives to CSS fonts or Web safe fonts.

Web fonts - as opposed to Web safe fonts or CSS fonts - are a technique to render a font file in a web page using the @font-face tag. According to William Craig from WebFX more than 90% of the Internet's users use a browser that supports @font-face. However he makes a point in this article tht we still need web safe fonts.

A subheading is just a paragraph with strong tags.

This means that the margins above the subheading and below it are equal. You could introduce a subheading class.

/* This is a pre tag */
.class {
font-family: Lato;
}