Recap minimal mobile friendly website

In chapter 2, we created a minimal mobile friendly website.

In this chapter, we revisite the code and add more mobile specific configuration to it.

As a recap, here is the original code.

The HTML:

 1<header>
 2  <div class="row">
 3    Website Title here
 4  </div>
 5</header>
 6
 7<nav>
 8  <div class="row">
 9    <ul>
10      <li>Link 1</li>
11      <li>Link 2</li>
12      <li>Link 3</li>
13    </ul>
14  </div>
15</nav>
16
17<div class="row">
18  <article>
19    <header>
20      <h1>Heading of the content</h1>
21    </header>
22
23    <p>Content paragraphs go here.</p>
24
25    <footer>
26      Author: Makzan
27    </footer>
28
29  </article>
30</div>
31
32<footer>
33  <div class="row">
34    Copyright goes here.
35  </div>
36</footer>
37

The CSS:

 1/* normalize */
 2body, nav, ul, li, p, h1, h2, h3 {
 3    padding: 0;
 4    margin: 0;
 5}
 6
 7/* core styles */
 8* {
 9    -webkit-box-sizing: border-box;
10    box-sizing: border-box;
11}
12
13body > header,
14body > footer {
15    background: #ffce25;
16}
17
18.row {
19    width: 100%;
20    max-width: 600px;
21    margin: 0 auto;
22    padding: 10px;
23}
24
25/* addition styles */
26ul {
27    list-style: none;
28}
29
30h1, p {
31    margin-bottom: .5em;
32}

What’s next? We’re going to take a look at “Using viewport to define initial browser rendering”.

◀ Chapter 4 – Response with media query Using viewport to define initial browser rendering ▶

makzan.

Recap minimal mobile friendly website

Makzan | Mobile web design | Table of Content