Pour les exercices suivants, je vous propose un code de départ représentant une page d'accueil simplifiée :
exercice 1 CSS [débutant/intermédiaire]:
Quel code devrait-on appliqué pour avoir ce résultat là :
Pourquoi avoir choisi cette solution plutôt qu'une autre ?
exercice 2 CSS / JS [intermédiaire/avancé]
Comment faire pour que les boutons up/down change l'ordre blocs pour l'utilisateur ?
exercice 3 JS [avancé]
Comment stockeriez-vous les changements d'ordre de l'exercice2 pour les rechargements ultérieurs de la page
- Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Never Utopia missions</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>h1 {
text-align: right;
margin: 20px;
}
body {
margin: 0px auto;
width: 800px;
background: lightsteelblue;
padding: 0px;
}
html {
background: aliceblue;
margin: 0px;
padding: 0px;
}
.forum {
border: 1px black solid;
margin: 10px;
background: aliceblue;
flex-basis: 40%;
}
.forum h2 {
padding: 0px 10px;
}
.forum div * {
padding: 0px 20px;
}
.main-content {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}</style>
</head>
<body>
<h1> Mon joli forum</h1>
<div class="main-content">
<div class="forum">
<h2> vie du forum</h2>
<div>
<div class="sous-forum">
<p>règlement</p>
</div>
<div class="sous-forum">
<p>présentation</p>
</div>
<div class="sous-forum">
<p>flood</p>
</div>
</div>
<div>
<button>up</button>
<button>down</button>
</div>
</div>
<div class="forum">
<h2> code</h2>
<div>
<div class="sous-forum">
<p>tuto</p>
</div>
<div class="sous-forum">
<p>problème</p>
</div>
<div class="sous-forum">
<p>commande</p>
</div>
</div>
<div>
<button>up</button>
<button>down</button>
</div>
</div>
<div class="forum">
<h2> graph</h2>
<div>
<div class="sous-forum">
<p>tuto</p>
</div>
<div class="sous-forum">
<p>problème</p>
</div>
<div class="sous-forum">
<p>commande</p>
</div>
</div>
<div>
<button>up</button>
<button>down</button>
</div>
</div>
<div class="forum">
<h2>roleplay</h2>
<div>
<div class="sous-forum">
<p>tuto</p>
</div>
<div class="sous-forum">
<p>problème</p>
</div>
<div class="sous-forum">
<p>commande</p>
</div>
<div>
<button>up</button>
<button>down</button>
</div>
</div>
</div>
</div>
</body>
</html>
exercice 1 CSS [débutant/intermédiaire]:
Quel code devrait-on appliqué pour avoir ce résultat là :
Pourquoi avoir choisi cette solution plutôt qu'une autre ?
exercice 2 CSS / JS [intermédiaire/avancé]
Comment faire pour que les boutons up/down change l'ordre blocs pour l'utilisateur ?
exercice 3 JS [avancé]
Comment stockeriez-vous les changements d'ordre de l'exercice2 pour les rechargements ultérieurs de la page
Des XP à gagnerN'oubliez pas que chaque participation fournie dans cette mission vous rapporte 1 XP dans le domaine correspondant !
