---
title: Atelier FrontEnd
tags: frontend, support, angular
robots: noindex, nofollow
author: Julien Noyer
---
# Mettre en pratique les principes de base du développement FrontEnd
## Introduction
Cette atelier d'une durée de 4 heures est prévu pour vous faire manipuler les principe de base du développement FrontEnd avec les langage HTML, CSS et Javascript.
Par équipe de 3 vous devrez réaliser un site web constitué de 4 page différentes en responsive design :
- Page d'accueil
- Page protfolio
- Page image
- page contact
La mise an place de requêtes média diuvent être faites pour les formats suivant :
- Smartphone : 350px
- Tablette : 750px
- Desktop : 950px
<br><br>
## Sources du projet
Vous trouverez sur le lien suivant toutes les sources pour réaliser ce projet :
- https://we.tl/t-6ky7LYbS2S
<br><br>
## Liste des groupes
Le projet est à réaliser par groupe de 4 dont voici le liste :
---
<br><br><br><br><br><br>
# Design
Le design présenté est basique dans la mesure ou il y à très peu de style, il à étét prévu pour vous laisser la possibilité de l'adapter à vos envie. Dans cette exercice il vous ai demandé de vous investire en réalisant un design plus poussé. Les images ci-dessous vous présentent la structure que vos pages doivent respecter.
## Page d'accueil
| Smartphone | Tablette | Desktop |
| -------- | -------- | -------- |
|  |  |  |
<br><br>
## Page Porfolio
| Smartphone | Tablette | Desktop |
| -------- | -------- | -------- |
|  |  |  |
<br><br>
## Page Image
| Smartphone | Tablette | Desktop |
| -------- | -------- | -------- |
|  |  |  |
<br><br>
## Page Contacts
| Smartphone | Tablette | Desktop |
| -------- | -------- | -------- |
|  |  |  |
---
<br><br><br><br><br><br>
# Programmation Javascript
Une fois que vous aurez créer tout le site en HTML et CSS sur plusieurs page, il vous ai demandé d'y ajouter la programmation Javascript afin de transformer le site en Single Page : c'est à dire que les différentes parties du site doivent s'afficher sans recharger la page.
<br><br>
## Gestion de l'affichage des parties du site en Javascript
Pour pouvoir réaliser cette tâche vous devez placé toutes les balises du site directement dans le fichier index.html. Vous devrez ensuite capter en Javascript le click sur les différents liens pour afficher ou masquer le contenu du site.
Il faut initialement que toutes les parties du site sauf le contenu de la page d'accueil soient masqué en CSS pour les afficher au bon moment lors du clic sur un lien spécifique.
<br><br>
## Gestion du portfolio en JSON
Pour pousser plus loin le développement Javascript il vous ai demandé d'utiliser le fichier *portfolio.json* contenant les données suivantes pour afficher le protfolio :
```json=
[
{
"title": "Le Narcisse",
"file": "./img/portfolio1.jpg"
},
{
"title": "Le Souper à Emmaüs",
"file": "./img/portfolio2.jpg"
},
{
"title": "Saint-Jérôme",
"file": "./img/portfolio3.jpg"
},
{
"title": "Awakened by Fire",
"file": "./img/portfolio4.jpg"
},
{
"title": "Le Joueur de luth",
"file": "./img/portfolio5.jpg"
},
{
"title": "Bacchus",
"file": "./img/portfolio6.jpg"
}
]
```
Comme vous pouvez le voir les données suivantes sont sous la forme d'un tableau d'objet. Pour pouvoir vous en servire, vous devez utiliser la méthode *Fetch()* afin de charger le fichier *portfolio.json* en Javascript. Une fois que le fichier est chargé vous pourrez effectuer une itération sur le t'ableau d'objet afin d'ajouter dans la page HTML les différentes balises pour afficher le contenu dans le fichier *indes.html*.
Une fois le protfolio affiché, vous devrez ajouter le code Javascript qui permet d'afficher une seule image du portfolio.
> La gestion du protfolio en Javascript est concidéré comme un bonus dans la notation
---
<br><br><br><br><br><br>
# Système de notation
Pour finaliser cette atelier vous devrez individuellement répondre à 3 QCM sur les différents langages manipuler lors de cette atelier :
- **QCM HTML** https://forms.gle/yrmn6SSP5yP5GYWs9
- **QCM CSS** https://forms.gle/GdKYxtnXFUXGMxUa8
- **QCM Javascript** https://forms.gle/VTUFsuroc9yrB8Ct9
Chacun de ces QCMs vous permettra d'obtenir une note individuelle sur 20 et la moyenne de toutes ces notes permettront de définir une note sur 10 pour le groupe.
<br><br>
Les différentes étapes de cet atelier sont notées de la manière suivante :
- **HTML (3.5 points)** : bonnes pratiques, sémantique HTML5, indentation, commantaires
- **CSS (3.5 points)** : bonnes pratiques, choix des sélecteurs, indentation, commantaires
- **JS (3 points)** : Gestion de l'affichage des parties du site en Javascript
- **Option JS (3 points)** : Gestion du portfolio en JSON
---
<br><br><br><br><br><br>
# Ressources
## Liens utiles
- **W3Schools Online Web Tutorials** https://www.w3schools.com
- **MDN: Documentation du Web** https://developer.mozilla.org/fr/
- **HTML Semantic Elements** https://www.w3schools.com/html/html5_semantic_elements.asp
- **CSS Media Queries** https://www.w3schools.com/css/css3_mediaqueries_ex.asp
- **for...of** https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for...of
- **if...else** https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/if...else
- **Element.querySelector()** https://developer.mozilla.org/fr/docs/Web/API/Element/querySelector
- **element.innerHTML** https://developer.mozilla.org/fr/docs/Web/API/Element/innertHTML
- **element.classList** https://developer.mozilla.org/fr/docs/Web/API/Element/classList
- **element.getAttribute** https://developer.mozilla.org/fr/docs/Web/API/Element/getAttribute
- **EventListener** https://developer.mozilla.org/fr/docs/Web/API/EventListener
- **Utiliser Fetch** https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch
## Supports de cours
- **Hypertext Markup Language** https://hackmd.io/@dws-teach/SyO1wn858
- **Cascading Style Sheets** https://hackmd.io/@dws-teach/BJO72aLqL
- **Les bases de la programmation Javascript** https://hackmd.io/@dws-teach/rk2baTI5U
Sign in with Wallet
Connect another wallet