Développement d'interfaces 1 - Langages web
Objectifs:
- Avoir un environnement de développement optimal installé (éditeur VSCode).
- Introduction aux langages du web (HTML, CSS).
- Acquérir une bonne compréhension du HTML.
- Maîtriser les outils développeur du navigateur.
Exercices-types:
- Travailler sur des patterns typiques des interfaces web (menu, media object, formulaire).
- Selon un modèle visuel, établir une structure cohérente en HTML.
- Créer pendant chaque cours un mini-site, en appliquant une nouvelle fonctionnalité.
Outillage
- L’éditeur Visual Studio Code, avec l’extension Live Server.
- Déploiement avec Netlify.
- Utilisation de l’inspecteur.
Un programme possible
- Fonctionnement du web (serveur, navigateur, protocoles, standards)
- HTML.
- Faire fonctionner les liens, arborescence de fichiers.
- Balises pour formater du texte.
- CSS, principes fondamentaux.
- Les sélecteurs du CSS
- Les unités CSS
- Styler du texte
- Les standards du web (W3C, nouvelles fonctionnalités, caniuse…)
- Listes
- Images
- Couleurs
- Web fonts
- Mise en page, CSS Box Model
- La mise en page sur le web. CSS Columns.
- Flexbox basics.
- Media Queries.
On peut s’inspirer du cours en ligne https://learnfromsteph.dev/
Evaluations
Evaluations suggérées:
- Questionnaire sur les connaissances HTML (~ semaine 5).
- Questionnaire sur les connaissances CSS (fin de semestre).
- 1 projet: implémentation de maquette simple (~ moitié de semestre).
- Exercices: validation des exercices hebdomadaires.
📚 Ressources
- Cours-Web.ch
- Cours CIE1 - support “Développement frontend” pour les cours interentreprise des classes Duales.
- Learn From Steph, par Stephanie Eckles.
Structure globale des cours
Pour situer ce cours dans le contexte de la formation: