HTML5 CSS3 & responsive design : formation professionnelle
4.3 (5 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.
30 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML5 CSS3 & responsive design : formation professionnelle to your Wishlist.

Add to Wishlist

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.3 (5 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.
30 students enrolled
Created by Cyrille Tuzi
Last updated 5/2015
French
Price: $50
30-Day Money-Back Guarantee
Includes:
  • 5.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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é...
View Curriculum
Requirements
  • Logiciel Photoshop conseillé mais facultatif pour le cas pratique
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.

Who 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...)
Students Who Viewed This Course Also Viewed
Curriculum For This Course
109 Lectures
05:25:54
+
Introduction
1 Lecture 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.

Preview 07:12
+
Comment fonctionne un site web ?
3 Lectures 12:13

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.

Rôles du HTML, CSS et autres technologies du web
06:08

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é.

Problématiques transversales : ergonomie, référencement, accessibilité,...
05:07

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.

L'intégrateur HTML & CSS et les autres métiers du web
00:58

Connaître son rôle
4 questions
+
Outils de travail
5 Lectures 07:50

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.

Introduction : l'outil fait le moine
00:13

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

Choisir un navigateur professionnel
01:33

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

Choisir un éditeur de code professionnel
03:14

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

Standards W3C et compatibilité
01:39

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

Les manuels HTML & CSS officiels
01:11
+
Fondations : le squelette d'une page HTML
9 Lectures 17:33

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

Introduction : création et organisation du projet
02:02

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

Preview 02:30

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>.

Syntaxe HTML : balise et attributs
01:25

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.

Preview 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.

Preview 02:16

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.

Preview 04:02

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.

Preview 01:13

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>.

Preview 01:09

Exemple de squelette HTML typique.

Conclusion : le modèle technique d'une page HTML
00:40

Une bonne ossature HTML
4 questions
+
La structure HTML
4 Lectures 06:40

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

Introduction : y a-t-il un architecte dans l'avion ?
00:55

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.

Dessine-moi un site web
01:38

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

Du dessin au code HTML : les blocs et leurs noms
03:15

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

Conclusion : méthodologie de structuration HTML
00:52

Une bonne structure HTML
2 questions
+
Contenu HTML et sémantique
6 Lectures 11:33

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

Introduction : vous savez déjà le faire !
01:06

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

Preview 03:30

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

Preview 02:50

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

Preview 01:50

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

Preview 01:09

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

Conclusion : les principales balises HTML à retenir
01:08

Donner du sens
4 questions
+
Contenus multimédia et interactif
5 Lectures 08:56

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

Introduction : enrichir sa page web
00:43

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".

Preview 02:20

Le bon lien
3 questions

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

Preview 02:38

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.

Formats d'image et optimisation
02:01

Le bon choix d'image
5 questions

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

Contenus externes : vidéos Youtube, publicités, boutons Like,...
01:14
+
Valider son code HTML
2 Lectures 02:39

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

Le validateur HTML officiel du W3C
02:04

Résultat de la partie HTML.

Conclusion : vous savez maintenant créer une page HTML !
00:35
+
Sélecteurs CSS
7 Lectures 22:22

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

Introduction : qu'est-ce qu'un sélecteur CSS ?
01:06

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).

Preview 05:24

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.

Méthodologie pour nommer
05:10

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

Preview 02:08

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

Preview 01:42

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.

La cascade CSS et le piège des priorités
06:22

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

Conclusion : organisation de son code CSS
00:30

Choisir le bon sélecteur
6 questions
+
Le graphisme en CSS
5 Lectures 09:51

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

Introduction : syntaxe CSS
00:25

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

Preview 04:22

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.

Preview 02:06

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

Preview 02:05

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

Preview 00:53

Le bon graphisme CSS
5 questions
16 More Sections
About the Instructor
Cyrille Tuzi
4.3 Average rating
5 Reviews
30 Students
1 Course
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.