Scribd
Importer
26 vues3 pages

Examen de Programmation Web Frontend

Le document décrit un examen de programmation web frontend d'une durée de 4 heures, comprenant une partie théorique avec des questions sur HTML, CSS, JavaScript et Git, et une partie pratique où les apprenants doivent créer une landing page pour un produit fictif. Les tâches incluent la configuration d'un dépôt Git, la création d'une maquette sur Figma, le développement de la page HTML, l'application de styles CSS, l'ajout de fonctionnalités JavaScript et l'intégration de Bootstrap. Enfin, les étudiants doivent finaliser et déployer leur projet avec une documentation appropriée.

Transféré par

possietcheuwoua
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
26 vues3 pages

Examen de Programmation Web Frontend

Le document décrit un examen de programmation web frontend d'une durée de 4 heures, comprenant une partie théorique avec des questions sur HTML, CSS, JavaScript et Git, et une partie pratique où les apprenants doivent créer une landing page pour un produit fictif. Les tâches incluent la configuration d'un dépôt Git, la création d'une maquette sur Figma, le développement de la page HTML, l'application de styles CSS, l'ajout de fonctionnalités JavaScript et l'intégration de Bootstrap. Enfin, les étudiants doivent finaliser et déployer leur projet avec une documentation appropriée.

Transféré par

possietcheuwoua
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Spécialités/Options : GENIE LOGICIEL

Examen : Control Continu

Epreuve écrite : Programmation web frontend 1

Durée : 4h

Partie 1 : Questions théoriques (4 points)

1) Qu’est ce que la programmation web ? 0.5pt


2) Qu'est-ce que HTML et à quoi sert-il ? 0.5pt
3) Quelle balise HTML est utilisée pour créer un lien hypertexte ? 0.5pt
4) Qu'est-ce que CSS et comment est-il lié à un document HTML ? 0.5pt
5) Qu'est-ce que JavaScript 0.5pt
6) Que fait la méthode [Link]() en JavaScript ? 0.5pt
7) Qu'est-ce que Bootstrap et pourquoi est-il utilisé dans le développement web ?
0.5pt
8) Qu'est-ce que Git et quel est son rôle dans le développement de logiciels ? 0.5pt

Partie 2 : Partie pratique (16 points)

Les apprenants devront réaliser une page de destination (landing page) pour un
produit ou un service fictif. Cela leur permettra de démontrer leurs compétences en
matière de conception de page, d'interactivité, de réactivité, et d'intégration des outils
de développement.

1. Configuration Initiale du Projet (1.5 points)

1-Créer un dépôt Git local pour le projet.

2-Initialiser le dépôt et le connecter à un dépôt distant sur GitHub ou GitLab.

3-Créer la structure de dossiers : /[Link], /css/[Link], /js/[Link], /img/.

2. Maquettage sur Figma (3 points)


Créer une maquette incluant :
• Un en-tête avec le logo et le menu de navigation (liens vers section « Accueil »,
« Produits », « À propos », « Contact »).
• Une zone principale qui présente le produit avec un titre accrocheur, une image,
une description courte et un bouton d'appel à l'action (CTA).
• Une section de témoignages ou d'avis clients (avec plusieurs témoignages
fictifs).
• Une section « À propos » qui explique brièvement l’entreprise.
• Un formulaire de contact à la fin de la page.

3. Création de la Landing Page HTML (3 points)

Créer une structure de page en respectant la maquette conçue sur Figma de la


question 2.

CSS (3 points)

Utiliser des styles pour rendre la page esthétique :

1-Choisir une palette de couleurs cohérente.

2-Utiliser les techniques de mise en page (Flexbox ou Grid) pour bien structurer les
sections.

3-Appliquer des marges, des espacements et des typographies adaptées.

JavaScript (2.5 points)

Ajouter une fonctionnalité interactive comme :

1-Un modal qui s'affiche lorsque l'utilisateur clique sur le bouton « En savoir plus » dans
la section produit.

2-Un script qui valide le formulaire de contact (assurer que tous les champs sont remplis
avant l'envoi, et afficher un message de succès ou d'erreur).

Bootstrap (1.5 points)

Intégrer Bootstrap pour :

1-Utiliser des composants tels que des boutons, des formulaires ou des cartes de
témoignages.
2-S’assurer que la page est responsive (affiche bien sur mobile, tablette et desktop) en
utilisant les classes Bootstrap adaptées.

4. Finalisations et Déploiement (1.5 points)

Engagement et Push :

1- Commiter régulièrement les modifications apportées tout au long de la création du


projet.

2-Pousser l'ensemble du code sur le dépôt distant.

Documentation :

1-Rédiger un fichier [Link] décrivant le but du projet, les technologies utilisées,


ainsi que des instructions d'installation (pour le cas où quelqu'un voudrait exécuter le
projet localement).

Vous aimerez peut-être aussi