HTML5 CSS3 & responsive design : formation professionnelle

Apprenez à transformer une maquette Photoshop en page HTML CSS et mettez à jour vos connaissances HTML5 CSS3 en continu.
4.4 (6 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
24 students enrolled
$50
Take This Course
  • Lectures 109
  • Contents Video: 5.5 hours
  • Skill Level All Levels
  • Languages French
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2015 French

Course Description

HTML5 CSS3 : la porte d'entrée du web professionnel

HTML et CSS sont la base du web, et leur maitrise est désormais demandée pour tous les métiers du secteur, que l'on soit graphiste, développeur, rédacteur, blogueur, chargé de marketing, community manager...

Même s'il est accessible à tous, ce cours a pour objectif d'acquérir des connaissances solides sur le HTML5 et CSS3 pour être autonome, et savoir réaliser le travail d'un intégrateur professionnel : transformer une maquette Photoshop en page HTML & CSS.

Une formation HTML5 CSS3 professionnelle

Il ne s'agit pas d'un simple tutoriel : ce cours est la version numérique d'une vraie formation professionnelle, parmi celles que je dispense depuis plusieurs années à des centaines de personnes dans les principaux centres de formation à Paris. Avec les avantages supplémentaires de pouvoir aller à votre rythme, et de consulter le cours et les ressources à tout moment.

Méthodologie HTML CSS complète

Il est facile de trouver sur le web des ressources sur le HTML CSS. Pourtant, beaucoup de personnes, même des développeurs expérimentés dans un milieu professionnel depuis plusieurs années, bidouillent et tâtonnent quand il s'agit de CSS. Ce cours développe une vraie méthodologie de travail, claire et réutilisable en toutes circonstances.

Fondamentaux HTML CSS et cas pratique à partir d'une maquette Photoshop

Le cours aborde d'abord les fondamentaux, qui permettent d'être autonome quels que soient le projet et les outils utilisés, en mélangeant théorie et pratique, à travers un projet simple.

Puis, fort de la méthodologie développée, le cours finit par un cas pratique réel, tel qu'il se produit en entreprise : une maquette Photoshop, cette fois très graphique, attrayante et visuelle, mais avec la structure plus complexe d'un véritable site web, vous sera donnée, et il faudra l'intégrer en HTML et CSS.

Mise à jour HTML5 CSS3 en continu

Ce cours permet aussi de se mettre à jour avec les nouveautés HTML5 CSS3 en continu : de nouvelles leçons sur les nouvelles fonctionnalités sont ajoutées au fur et à mesure qu'elles deviennent supportées par les principaux navigateurs.

Exercices HTML5 CSS3 corrigés et quizz

Tous les fichiers finaux du projet et du cas pratique sont évidemment fournis.

Des questionnaires permettent de vérifier régulièrement l'acquisition des connaissances.

Formation HTML5 CSS3 en Français

Il y a déjà suffisamment de notions à intégrer sans rajouter en plus la difficulté d'une autre langue. L'intégralité de la formation est en Français.

Certificat de formation HTML5 CSS3

A la fin du cours, Udemy vous délivrera un certificat, attestant que vous avez suivi cette formation, que vous pourrez facilement mettre en lien dans votre CV en ligne ainsi que sur les réseaux sociaux professionnels comme Viadeo et LinkedIn.

Questions et accompagnement

Je suis là pour vous aider ! Comme dans une vraie formation, vous pouvez me poser vos questions sur le cours dans l'espace de discussion prévu à cet effet, j'y répondrai sans faute.

What are the requirements?

  • Logiciel Photoshop conseillé mais facultatif pour le cas pratique

What am I going to get from this course?

  • Fondamentaux solides en HTML CSS, basés sur les standards et les bonnes pratiques d'aujourd'hui.
  • Transformer une maquette Photoshop en page HTML CSS de façon autonome, avec une méthodologie complète et professionnelle.
  • Mise à jour continue des connaissances en HTML5 CSS3 : meilleur référencement, vidéos et animations sans Flash, graphisme avancé...

What is the target audience?

  • Débutants enthousiasmés à l'idée de créer un site web en codant
  • Graphistes voulant compléter leurs compétences en devenant également intégrateurs
  • Intégrateurs ou développeurs web souhaitant consolider leurs connaissances avec une méthodologie de travail et se mettre à jour
  • Hors sujet : création d'une maquette Photoshop, outil de gestion des contenus (CMS), newsletters, APIs JavaScript (géolocalisation, stockage local, canvas, 3D...)

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
07:12

Présentation des objectifs, du public, du plan et de la pédagogie du cours. N'hésitez pas à poser vos questions et à signaler d'éventuels problèmes dans l'espace de discussion.

Section 2: Comment fonctionne un site web ?
06:08

HTML et CSS ne sont qu'une partie d'un tout, et ne suffisent pas à eux seuls à faire un site Internet professionnel complet. Il est important de garder une vue d'ensemble de l'écosystème d'un site web, pour savoir communiquer dans une équipe et connaitre les rôles de chaque technologie. Le HTML a un rôle multimédia, interactif et surtout sémantique, tandis que le CSS s'occupe de l'aspect visuel des pages, avec le graphisme et le positionnement.

05:07

Il existe une série de problématiques transversales, qu'il faut garder en tête à toutes les étapes de réalisation d'un site web : compatibilité, responsive design, ergonomie / UX, performances / temps de chargement, référencement, accessibilité et sécurité.

00:58

Un intégrateur s'occupe uniquement du HTML et CSS, il devra être accompagné d'un graphiste, pour la maquette, d'un développeur back-end pour l'outil de gestion des contenus, et éventuellement d'un développeur front-end, s'il y a des animations.

Connaître son rôle
4 questions
Section 3: Outils de travail
00:13

Installation de l'environnement de travail. Les outils utilisés font évidemment partie intégrante d'une bonne méthodologie et d'un travail efficace.

01:33

Nous allons utiliser un navigateur adapté à un usage professionnel : Firefox Developer Edition.

03:14

Nous allons utiliser un éditeur de code adapté à un usage professionnel : Brackets.

01:39

En suivant les standards HTML et CSS, les problèmes de compatibilité seront aujourd'hui quasiment inexistants.

01:11

Deux manuels officiels sont à retenir et à utiliser sans modération : WebPlatform et MDN.

Section 4: Fondations : le squelette d'une page HTML
02:02

Création des fichiers et dossiers de notre projet HTML et CSS.

02:30

Toute page HTML doit impérativement commencer par le bon doctype : <!doctype html>. Les autres doivent être prohibés.

01:25

Chaque balise HTML s'écrit avec un chevron ouvrant, son nom, et un chevron fermant. Avec, optionnellement, des attributs, qu'on note avec leur nom, égal sa valeur, entre guillemets doubles. S'il y en a plusieurs, on les sépare avec des espaces. La convention est d'écrire uniquement en minuscules. Par exemple : <p id="test">Test</p>.

02:16

L'ensemble de notre page est contenu dans la balise <html>. A l'intérieur d'elle, il y aura toujours deux grandes parties : <head>, pour indiquer des informations techniques invisibles, <body>, pour ce qui s'affiche à l'écran.

02:16

On pense à indiquer la langue de la page pour le référencement, et on choisit toujours l'encodage de caractères UTF-8.

04:02

On précise un titre et une description de la page pour le référencement naturel, en tâchant d'être court, pertinent et spécifique. On peut aussi prévoir une favion.

01:13

On travaille avec une feuille CSS externe qu'on charge avec la balise <link>, on ne fait pas de styles directement dans le fichier HTML.

01:09

On travaille avec un fichier JavaScript externe qu'on charge avec la balise <script>, on ne fait pas de script directement dans le fichier HTML. On charge les JavaScript en fin de page, et non pas dans le <head>.

00:40

Exemple de squelette HTML typique.

Une bonne ossature HTML
4 questions
Section 5: La structure HTML
00:55

Avant de coder en HTML, on fait un schéma de sa maquette.

01:38

On dessine la maquette de façon schématique, le plus précisément possible, et en faisant le plus possible de blocs de regroupement. On les nomme en Anglais, avec une syntaxe du type : header-logo.

03:15

On reproduit chaque bloc du dessin en HTML avec la balise <div> et en indiquant son nom dans l'attribut "id", pour identifiant.

00:52

Synthèse méthodologique de l'étape de structuration HTML.

Une bonne structure HTML
2 questions
Section 6: Contenu HTML et sémantique
01:06

Il s'agit de hiérarchiser l'information, de lui donner du sens, comme dans un éditeur de texte.

03:30

Les principales balises HTML sémantiques sont les titres : <h1>, <h2>, <h3> et les paragraphes <p>.

02:50

Pour les listes et les menus, on utilise la balise <ul>, dans laquelle on place des éléments <li>.

01:50

On utilise la balise HTML <strong> pour les mots-clés et <em> pour mettre un contenu en emphase.

01:09

& doit être écrit &amp; < doit devenir &lt; et > doit être transformé en &gt;.

01:08

Résumé des principales balises HTML sémantiques : <h1>, <h2>, <h2>, <p>, <ul> + <li>, <strong>, <em>.

Donner du sens
4 questions
Section 7: Contenus multimédia et interactif
00:43

Ajouter des liens, images et autres contenus riches à la page.

02:20

Les liens se font avec la balise <a>. S'il s'agit d'un lien externe, on le fait s'ouvrir dans un nouvel onglet avec target="_blank".

Le bon lien
3 questions
02:38

On ajoute une image avec la balise HTML <img>. On oublie pas d'indiquer les dimensions, et le texte alternatif pour l'accessibilité.

02:01

On utilise le JPEG pour les photographies, le PNG pour les images simples (icônes, logos,...). En JPEG, on compresse au maximum le fichier pour qu'il ne soit pas trop gros à charger, grâce par exemple à l'option Enregistrer pour le web de Photoshop.

Le bon choix d'image
5 questions
01:14

Les contenus externes seront fournis, il suffit de les copier-coller, et il s'agira souvent de la balise <iframe>.

Section 8: Valider son code HTML
02:04

On teste son code HTML pas seulement en l'affichant dans le navigateur, mais aussi en le validant avec les outils officiels.

00:35

Résultat de la partie HTML.

Section 9: Sélecteurs CSS
01:06

Les sélecteurs CSS permettent de choisir à quels éléments de la page on applique notre style.

05:24

Les identifiants sont uniques, et se notent avec le signe # (dièse), tandis que les classes peuvent être assignées à plusieurs éléments, pour former un groupe, et se notent avec le signe . (point).

05:10

On écrit les noms en Anglais, en minuscules, les différents mots séparés par des tirets. On essaie de choisir des noms qui soient précis et qui vont rester viables sur le long terme. On décompose et factorise au maximum les différents styles.

02:08

Sélection arborescente des enfants avec l'espace ou de tous les descendants avec le chevron >, très pratique pour les menus.

01:42

Sélection conditionnelle, par exemple au survol :hover.

06:22

La priorité des sélecteurs n'est pas une question d'ordre mais de spécificité : #identifiant > .classe > balise. En cas de priorité identique, c'est le dernier qui l'emporte, c'est le principe de surcharge / cascade du CSS.

00:30

On commence son code CSS par le graphisme général, puis on continue avec le positionnement.

Choisir le bon sélecteur
6 questions
Section 10: Le graphisme en CSS
00:25

Une propriété CSS s'écrit avec son nom, deux points, une valeur, et point virgule pour terminer.

04:22

On peut gérer la police, la taille, l'alignement et le style du texte. C'est important pour la lisibilité.

02:06

On note de préférence les couleurs en format rgb(), et on préfère des dimensions relatives en em ou % autant que possible pour le responsive design.

02:05

background-color nous permet de mettre une couleur de fond à un bloc, et background une image de fond, répétée ou non.

00:53

Les blocs peuvent avoir des bordures, qui peuvent être arrondies.

Le bon graphisme CSS
5 questions
Section 11: Le positionnement en CSS
00:22

Suivre la méthodologie est impératif en positionnement CSS pour être efficace.

01:13

L'outil normalize permet de partir sur des bases CSS propres et identiques sur tous les navigateurs.

05:51

Les éléments se classent automatiquement entre block (<div>, <h1>, <p>,...), pour un affichage vertical et avec des dimensions, en inline (texte, <a>, <strong>, <span>,...) pour un affichage horizontal et sans dimensions, et en inline-block (<img>,...) pour un affichage horizontal et avec des dimensions. Il est fortement déconseillé de modifier ces modes d'affichage CSS.

02:43

width et height, en CSS, sont les dimensions de la zone de contenu et non pas du bloc. Il faut donc retirer l'espacement intérieur, padding, et la bordure, border. Les marges externes, margin, ne rentrent pas en compte.

03:30

Les marges se lisent dans le sens des aiguilles d'une montre : haut, droite, bas, gauche. Elles s'aditionnent horizontalement et fusionnent verticalement.

03:30

Pour mettre des blocs les uns à côtés des autres, on utilise float côté CSS, et on n'oublie pas d'appliquer la classe clearfix côté HTML sur le bloc parent, qui les englobe.

03:18

Pour centrer le site, on utilise des marges automatiques. Verticalement, il faudra jouer manuellement sur les marges.

03:31

Synthèse méthodologique de l'étape de positionnement CSS.

Les bons réflexes de positionnement CSS
12 questions
Section 12: Méthodologie professionnelle d'intégration HTML et CSS
00:49

On oublie pas de tester son site dans tous les navigateurs et sur tous les supports.

03:11

On utilise l'Inspecteur de Firefox sans modération pour déboguer.

02:43

Synthèse méthodologique de toutes les étapes d'intégration HTML et CSS.

00:26

Conclusion du cours HTML et CSS.

Section 13: Cas pratique : intégration d'une maquette Photoshop en page HTML & CSS
01:28

Récupérez la maquette Photoshop dans les ressources de la leçon, et suivez bien les consignes.

07:29

Réglages et outils utiles de Photoshop, puis récupération des informations nécessaires comme les couleurs et dimensions, et enfin export des images.

01:38

Correction de l'exercice de dessin de la maquette.

22:05

Correction de l'étape de structuration et de contenu HTML.

40:58

Correction du graphisme et du positionnement en CSS.

Section 14: Aller plus loin en HTML
01:12

On peut améliorer le partage sur les réseaux sociaux avec des balises meta complémentaires, notamment une image.

01:50

On peut aussi faire des liens et des menus internes à la page, pour les longs contenus, grâce aux ancres.

01:41

Il existe des balises spécifiques pour les citations et les abréviations.

03:25

On peut avoir à faire des tableaux de données, et c'est ce qui est utilisé pour le positionnement dans les newsletters.

Section 15: Formulaires HTML
01:46

La balise <form> permet d'ajouter un formulaire, qui peut être validé grâce à un bouton et à l'attribut action.

04:44

On ajoute un champ avec la balise <input>, sans oublier de le lier à un intitulé <label>.

Les choix : cases à cocher et boîte de sélection
04:16
02:45

Sensibilisation à la sécurité dans les formulaires, et notamment aux méthodes HTTP GET et POST.

Section 16: Aller plus loin en CSS
00:54

On peut aussi sélectionner des éléments en fonction de leurs attributs.

02:22

Les positionnements relatif et absolu permettent de placer une zone en fonction du bloc parent ou de toute la page, avec des coordonnées. Exemple typique : un bandeau au-dessus d'une image.

02:01

Le positionnement fixe permet de placer un élément de façon fixe par rapport à la vue. Exemple typique : une barre de compte en haut du site, qui reste accessible même quand on défile dans la page.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Cyrille Tuzi, Formateur HTML5 & JavaScript, certifié PHP

Coding websites from 16 years, I've been a lead developer in a web agency for several years, where I've done many institutional websites, including a rewarded one for Alstom Transport.

I got the professionally recognized PHP certification twice (for PHP 5 then PHP 5.3, you can check that on my website).

Recently, I'm a HTML5, CSS3, jQuery and JavaScript professional trainer from 5 years in the most important training centers in Paris.

I'm now committed to provide those professional trainings for everyone in a more affordable way.

***

Codeur depuis plus de 16 ans, j'ai été lead développeur pendant plusieurs années en agence web, où j'ai réalisé de nombreux sites web institutionnels, dont un projet pour Alstom Transport qui a été récompensé.

J'ai obtenu la certification PHP, reconnue professionnellement, deux fois (pour PHP 5 et PHP 5.3, vous pouvez le vérifier sur mon site web).

Dernièrement, je suis formateur HTML5, CSS3, JavaScript & jQuery professionnel depuis 5 ans dans les plus importants centres de formation à Paris.

Je m'occupe maintenant de fournir ces formations professionnelles à tous d'une manière plus abordable.

Ready to start learning?
Take This Course