Conception, développement et publication d’un site web
Un cours proposé par Javier Usobiaga FerrerConcepteur Web
Un cours proposé par Javier Usobiaga Ferrer, Concepteur Web
Faites le tour complet du processus de création et de publication d’un site en utilisant HTML, CSS et JavaScript
Dans la conception Web, une bonne interface cherche à plaire et à répondre à la façon dont le cerveau humain agit. Cela signifie que nous avons en chacun de nous un designer, parfois inconscient ou endormi, qui est capable de voir quelque chose qui fonctionne, qui est harmonieux, même s'il ne comprend pas pourquoi. Si vous voulez apprendre les principes de la conception Web et éveiller ce concepteur en vous, vous êtes au bon endroit.
Dans ce cours, vous verrez les deux côtés de la création d'un site Web: d'une part, vous verrez les techniques de base pour planifier un site Web, organiser les informations en wireframes et créer une grammaire visuelle avec typographie, palettes de couleurs, espacement, composition, illustration. Ensuite, vous entrerez dans la construction de cette page en utilisant HTML, CSS et JavaScript, jusqu'au moment de la publication de la page sur Internet.
Votre guide pendant ce processus sera Javier Usobiaga, web designer, fondateur du studio Swwweet et professeur d'autres cours à Domestika tels que Graphiques vectoriels SVG: illustrer et animer avec du code , Mise en page Web avec CSS Grid, Flexbox et autres techniques modernes , Introduction à la programmation en JavaScript e [Introduction au développement Web réactif avec HTML et CSS](Introducción al Desarrollo Web Responsive con HTML y CSS) , qui peut servir de complément à ce qui est exposé dans ce cours.
Qu'allez-vous apprendre dans ce cours en ligne ?
27 leçons & 33 vidéos téléchargées
Que ferons-nous pendant le cours?
1 minute, 12 secondes
Objectifs de conception, cadre et références
6 minutes, 50 secondes
Inventaire de contenu
6 minutes, 17 secondes
Architecture de l'information
9 minutes, 56 secondes
Principes et outils
4 minutes, 9 secondes
Investigation visuelle
6 minutes, 32 secondes
Que comprend ce cours ?
Vous commencerez le cours en rencontrant Javier et quelques concepteurs et développeurs qui rédigent des articles et font diverses expériences sur les technologies Web qui valent la peine d'être suivies. Vous découvrirez également le contenu du cours.
Vous apprendrez les principes du design visuel et les éléments qui le composent, et vous travaillerez principalement sur les plus fondamentaux, tels que la typographie, la couleur, la grille et l'illustration.
Vous aurez un premier aperçu d'un générateur HTML statique et de son système de modèles, ainsi que de l'organisation des fichiers et de la création de pages maîtres.
Dans l'unité suivante, vous commencerez à passer le système de conception proposé au code front-end : la police, la couleur, la grille et d'autres composants.
Vous ajouterez plus d'éléments d'interaction au projet via différentes bibliothèques et fonctions JavaScript.
Vous verrez comment fonctionnent les gestionnaires de versions de code et, enfin, vous utiliserez un service de publication pour faire connaître votre site Web au monde entier.
Logiciels et outils recommandés pour ce cours
Quel est le projet du cours ?
Vous allez créer, développer et publier une page Web avec votre portfolio de travail.
Projets d'élèves du cours
À qui s'adresse ce cours en ligne ?
À toutes les personnes qui souhaitent apprendre les principes de la conception Web et qui souhaitent publier leur propre page Web.
Prérequis et matériel nécessaire
Il serait souhaitable d'avoir une connaissance de base de HTML et CSS. Si vous ne les avez pas, il est recommandé de suivre le premier cours de Javier à Domestika: Introduction au développement web réactif avec HTML et CSS.
Vous aurez besoin d'un ordinateur et d'un éditeur de code (Javier en proposera des gratuits). Il peut également être intéressant d'avoir un programme de conception visuelle comme Sketch, Figma ou Adobe XD, bien qu'ils ne soient pas indispensables.
Avis
- il y a 3 mois
I really enjoyed this course. I already had a website I needed to build and I was able to apply this to improve it so much. It’s comprehensive and well structured.
- il y a 5 mois
Muy buen curso y muy buena explicación del profesor, como siempre. Perfecto para iniciarse en la creación de webs
- il y a 7 mois
Excelente curso para tener las bases de animación con css
- il y a 7 mois
Me gustó
- il y a 8 mois
Excelente curso, viene muy ordenado y armado. Es un muy buen profesor
Il apprécie également son rôle de professeur de Web Design dans des ateliers et écoles renommés tels qu'Elisava, IDEP.
Usobiaga comprend le Web dans son intégralité, non seulement à quel point il peut être beau sur l'écran de l'ordinateur, mais aussi son utilisation dans différents appareils et circonstances.
Selon ses mots, "je pense que la vitesse à laquelle il se charge ou la réponse à laquelle il répond est aussi important que l'esthétique, et il me semble que dans notre industrie, nous l'oublions souvent".
Contenu
- U1
introduction
- Présentation
- Les influences
- Que ferons-nous pendant le cours?
- U2
Idéation d'un web
- Objectifs de conception, cadre et références
- Inventaire de contenu
- Architecture de l'information
- U3
Aspect visuel
- Principes et outils
- Investigation visuelle
- Composition typographique
- Palette de couleurs dans une interface
- Réticule et rythme vertical
- Illustration et iconographie
- U4
Système de modèle
- Préparation de l'environnement et des éditeurs de code
- Structure et fonctionnement des fichiers
- Pages maîtres et création de nouvelles pages
- Conditionnel et partiel
- U5
Développement frontend
- Organisation du code
- Composition et couleur
- Système de grille
- Composants d'interface
- Compléter l'interface
- U6
Interaction Web
- Menus interactifs et déroulants
- Implémentation d'une galerie
- Terminer l'interaction
- U7
Publier un site Web
- Gestion des versions de code
- Services d'édition
- Ressources additionnelles
- PF
Projet final
- Conception, développement et publication d'une page web
Ce qu’il faut attendre d’un cours Domestika
Apprenez à votre rythme
Apprenez chez vous, sans horaires fixes et à votre rythme. C’est vous qui décidez de votre programme d’apprentissage.
Apprenez auprès de grands noms du secteur créatif
Apprenez les techniques et les méthodes les plus utiles auprès des meilleurs professionnels du secteur créatif.
Rencontrez des spécialistes reconnus
Dans chaque leçon, votre professeur vous transmettra ses connaissances avec enthousiasme, vous donnera des explications claires et vous fera bénéficier de son expertise.
Certificats
PLUSEn tant que membre Plus, vous recevrez pour chaque cours un certificat personnalisé signé par votre professeur. Partagez-le dans votre portfolio, sur les réseaux sociaux ou partout où vous le souhaitez.
Soyez aux premières loges
Profitez de vidéos de haute qualité pour ne manquer aucun détail. Grâce à un accès illimité, vous pourrez les regarder autant de fois que nécessaire pour perfectionner vos compétences.
Partagez vos connaissances et vos idées
Posez des questions, demandez des avis ou suggérez des solutions. Partagez votre expérience d’apprentissage avec les autres élèves de la communauté qui ont, comme vous, une passion pour la créativité.
Rejoignez une communauté créative internationale
Cette communauté réunit plus de huit millions de personnes des quatre coins du monde, curieuses et passionnées, avec cette même envie de développer et d’exprimer leur créativité.
Assistez à des cours de haute qualité
Domestika sélectionne les professeurs avec soin et produit chaque cours en interne afin de garantir une expérience d’apprentissage en ligne de qualité optimale.
Foire aux questions
Ce cours s’adresse à ceux qui ont des connaissances de base en HTML et CSS, sans besoin d’être expert. Il est parfait pour ceux qui veulent approfondir les techniques modernes de design web et développement front-end.
Il est recommandé d’avoir des bases en HTML et CSS. Une expérience avancée n’est pas indispensable, mais il est utile de comprendre la structure basique des pages web et l’édition de code.
Vous apprendrez à créer des mises en page responsives, des animations CSS, des graphiques SVG accessibles, l’architecture de l’information, les wireframes, le prototypage, la publication de sites web et à appliquer des méthodologies agiles dans des projets digitaux.
Vous aurez besoin d’un éditeur de code (comme VS Code), Node.js, un terminal, un navigateur web à jour et l’accès à des outils comme Figma, Keynote, PowerPoint ou Notion pour le prototypage et l’organisation.
Vous apprendrez à utiliser les variables CSS pour gérer couleurs, typographies et espacements, ce qui facilite la cohérence visuelle et permet des modifications globales efficaces dans vos projets web.
Oui, vous pratiquerez l’utilisation de CSS Grid et d’autres techniques pour créer des structures web adaptables à différents appareils, améliorant ainsi l’expérience utilisateur finale.
Oui, vous pourrez développer un projet personnel en appliquant tous les concepts de design, développement et publication web pour constituer un portfolio ou un site pour de vrais clients.