- Retour sur HTML et CSS
- Flexbox, par défaut
- Flex wrap, flex-grow, order...
- box-sizing: border-box;
- Albers
- position (static, relative, absolute, fixed ..)
- float (left, right, none ..)
Frameworks CSS
- https://github.com/lam-artsnum/b2/wiki/02a.-Flexbox
Serveur local avec MAMP ou WAMP
- Démo installation de Wordpress (en local sur mon ordinateur)
- Bases de données et configuration d'un hébergement
Box-sizing
* {
box-sizing:border-box;
}
Albers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hommage au carré</title>
<link rel="stylesheet" media="screen" href="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Un hommage au carré, basé sur le travail de Josef Albers, utilisant CSS, avec un marquage HTML minimal.">
<!-- Utilisez pour ceci flexbox, background, border, height, width,
margin, padding et les unités relative au viewport(à votre fenêtre), vh et vw. -->
</head>
<body>
<section>
<div>
<div>
</div>
</div>
</section>
</body>
</html>
A rendre :
- Créez votre propre hommage au carré (Full CSS évidemment!)sur base du code HTML que vous trouverez dans la barre latérale ("Albers"). Notez que vous pouvez modifier ce code si vous désirez réaliser un autre tableau d'Albers.
- Liez une feuille de style au fichier HTML
- Stylez à l'aide de Flexbox, des marges, de width et height, backgrounds, etc..
- Ajoutez de l'interactivité (effets de survols, liens externes, animations, images..). Soyez inventifs.
- Mettez en ligne
- Ajoutez le lien sur votre page d'accueil, que je puisse y accéder.