Simplissime

Pour cet épisode, je vais tenter de faire un site simple, fonctionnel et responsive, sans class et sans grille.
Pour illustrer celui-ci, je vais lister une sélection de BD, mais vous pouvez utiliser vos images et vos textes pour en faire un portfolio.

Accueil

La page d’accueil liste les éléments, on pourrait faire une vraie liste avec ul et li, mais cela n’a rien d’obligatoire.

Pour le CSS, j’ai choisi une Google Font que j’importe dans le CSS (ce n’est pas la meilleure manière de faire, mais c’était plus simple pour modifier toutes les pages).

Pour avoir un texte adapté selon les écrans, j’ai utilisé un calcul pour la taille de typo, 100vw = la largueur du viewport (fenêtre ou écran sur mobile).
font-size:calc(20px + (100vw - 320px) / 48);

Sur un écran de 320px on aura du 20px…

320  -> 20px
640  -> 26.66px
1280 -> 40px
1440 -> 43.33px
1920 -> 53.33px

@import url('https://fonts.googleapis.com/css?family=Muli:400');

body{
  background:#fff;
  margin:0;
  font-family:Georgia, 'Times New Roman', Times, serif;
  line-height: 1.5;
}

nav a{
  display:block;
  font-family: 'Muli', sans-serif;
  font-size:calc(20px + (100vw - 320px) / 48);
  text-decoration: none;
  color:#333;
  padding:8px;
  margin:0;
  font-weight: 400;
  background: #fff;
  transition: background-color .4s, font-size .4s;
}

nav a:hover{
  background:#f6f6f6;
}

nav a span{
  font-size:calc(16px + (100vw - 320px) / 256);
  font-family:Georgia, 'Times New Roman', Times, serif;
  opacity: 0.8;
} 

Code amélioré

J’ai ajouté un SVG et j’ai joué avec le sélecteur :nth-child(x) où x est la place de l’enfant par rapport à son père.

See the Pen portfolio simple by Benoît Wimart (@benoitwimart) on CodePen.

Page de l’item (« single »)

Voici le contenu du body d’une page :

  

  

       
Pinocchio Winscluss
       
Pinocchio est la libre adaptation du célèbre roman éponyme de Carlo Collodi par l'auteur de bande dessinée Winshluss publiée en 2008 par les Requins Marteaux.

       
La bande dessinée retrace les évènements du roman éponyme en parodiant personnages et situations. Ainsi, Pinocchio est un petit enfant robot destiné à être vendu en tant qu'arme de guerre. Mais ce dernier tue malencontreusement la femme de Gepetto, puis quitte la maison. En parallèle, Jiminy Cafard se met à vivre dans sa tête. 
       
  
    
  

Je découpe la navigation en deux et j’ajoute un <article>…</article>.
Quelques observations :

• les liens ont des ancres (les dièses croisillons), internet.html#content va ouvrir la page internet.html et remonter le contenu jusqu’à l’id content (<article id="content">) ;
• du CSS sera ajouté pour rendre homogène le contenu, attention je ne le place pas sous la suite, mais je l’intègre avec d’autres sélecteurs par similitudes.

body{
  background:#fff;
  margin:0;
  font-family:Georgia, 'Times New Roman', Times, serif;
  line-height: 1.5;
}

h1,
nav a{
  display:block;
  font-family: 'Muli', sans-serif;
  font-size:calc(20px + (100vw - 320px) / 48);
  text-decoration: none;
  color:#000;
  padding:8px;
  margin:0;
  font-weight: 400;
  transition:background-color 0.4s;
}

h1{
  margin:0 auto;
  padding:1em 8px;
  color: #111;
  max-width:850px;
  line-height: 1.1;
}

nav a:hover{
  background:#f6f6f6;
}

h1 span,
nav a span{
  font-size:calc(16px + (100vw - 320px) / 256);
  font-family:Georgia, 'Times New Roman', Times, serif;
  opacity: 0.8;
}

img{
  max-width: 100%;
  display: block;
  height:auto;
}

article{
  max-width:850px;
  margin:0 auto;
  padding-bottom:1.5em;
  font-size:calc(16px + (100vw - 320px) / 256);
}

article img{
  margin:auto;
}

p,ul{
  padding:8px;
  font-size:calc(16px + (100vw - 320px) / 256);
  margin:0 auto 1.5em auto;
}

p:nth-of-type(1){
  text-indent:0.5em;
}

nav>a{
  background: #fbfbfb;
}
nav>a>svg{
  height:auto;
  width:1em;
  display: inline-block;
}

i{
  font-style: normal;
}

/* oooooooooooooooooo */
i:nth-child(1) {color: #B71C1C;}
i:nth-child(2) {color: #880E4F;}
i:nth-child(3) {color: #4A148C;}
i:nth-child(4) {color: #311B92;}
i:nth-child(5) {color: #1A237E;}
i:nth-child(6) {color: #0D47A1;}
i:nth-child(7) {color: #01579B;}
i:nth-child(8) {color: #006064;}
i:nth-child(9) {color: #004D40;}
i:nth-child(10){color: #1B5E20;}

nav:first-child>a:nth-child(1) {color: #B71C1C;}
nav:first-child>a:nth-child(2) {color: #880E4F;}
nav:first-child>a:nth-child(3) {color: #4A148C;}
nav:first-child>a:nth-child(4) {color: #311B92;}
nav:first-child>a:nth-child(5) {color: #1A237E;}
nav:first-child>a:nth-child(6) {color: #0D47A1;}
nav:first-child>a:nth-child(7) {color: #01579B;}
nav:first-child>a:nth-child(8) {color: #006064;}
nav:first-child>a:nth-child(9) {color: #004D40;}
nav:first-child>a:nth-child(10){color: #1B5E20;}

/* pour la 2nde nav */
nav:last-child>a:nth-last-child(10) {color: #B71C1C;}
nav:last-child>a:nth-last-child(9)  {color: #880E4F;}
nav:last-child>a:nth-last-child(8)  {color: #4A148C;}
nav:last-child>a:nth-last-child(7)  {color: #311B92;}
nav:last-child>a:nth-last-child(6)  {color: #1A237E;}
nav:last-child>a:nth-last-child(5)  {color: #0D47A1;}
nav:last-child>a:nth-last-child(4)  {color: #01579B;}
nav:last-child>a:nth-last-child(3)  {color: #006064;}
nav:last-child>a:nth-last-child(2)  {color: #004D40;}
nav:last-child>a:nth-last-child(1)  {color: #1B5E20;}

See the Pen portfolio page simple by Benoît Wimart (@benoitwimart) on CodePen.

Démonstration (non finalisée, seul le premier lien marche) sur CodePen

Suite pour améiiorer les performances avec srcset dans l’épisode 01.