Let's make a 404 page that redirects the user to the previous page they were on. Create an index.html file. I'm going to use some boilerplate tags to get it started. The two important tags to look at are the meta viewport tag & the link tag for the fonts we'll be using.

The meta viewport tag has a content attribute that instructs the browser on what to do with the page's dimensions and scaling. The 'width=device-width' part sets the width of the page to follow the screen-width of the device. The 'initial-scale=1.0' part sets the initial zoom level when the page is first loaded by the browser.

The link tag defines the relationship betwen the current document and an external resource. It takes a rel attribute which defines the relationship between this document and the one we want linked. We want a stylesheet linked. The href attribute tells you where the linked document's location is. In this case we're going to be using google fonts to use their Vollkorn & Lato fonts.

The body of the html is going to take some basic html tags. A h1 with a title class, a div with a content class, and a couple of p tags with various classes.

Let's start the css by declaring some universal styles. I want most elements on the page stylings to be 0 margin & padding with text-decoration & list-style set to none. The body's background will be #333, we want child elements to be flexed & in the center of the page. We also want to give the body a height of 100vh, so it doesn't matter what the viewport is the body will extend to the end of it.

The div.main section will be flexed with it's items in the center. The h1.title will have a color of red, with a font of Vollkorn, the font-size 120px & the margin-top at 25px. Both paragraphs color will be white with the font of Lato. The first p tag will have a margin of 15px 0 10px 0 & a font-size of 24px. The second p tag will have a font-size of 18px.

Because this project is simple we don't need a lot of media queries to make it responsive. The first mq will be 450px to 650px, it will be aimed at big cell phones & small tablets. In it, will change div.main flex-direction to column and align-items center. When you switch the flex container to column you use align-items to center the child elements horizontally. The h1.title margin will change to 0 0 -10px 0 & the p.p1 margin will change to 0 0 10px 0. When you use mqs, you only have to declare the styles that your changing, all the other properties will have the styles with no media query.

The second mq will focus on smaller mobile phones from 320px to 449px. The div.main, h1.title & p.p1 will have the same stylings as the last mq. The p.p1 tag will add a font-size of 18px. The p.p2 will add a font-size of 14px.

This is the result(without the mqs). Scroll to the middle of the window.