Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 1

Cours HTML / CSSLearn to code

HTML/CSS easily

Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

Cours HTML / CSS

6 Sessions de ~3 heures > ~18 heures au total,

A chaque sessions aura des objectifs atteindre pour pouvoir continuer la prochaine session,

30% de thorie et 70% de pratique,

Finalit : Monter un site en HTML / CSS responsive,

En bonus, utilisation doutil de versioning

2

Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

Rappel du projet

3

Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52 4

Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

Balises meta

5

Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

Balises meta Une balise meta est une information sur la nature et le contenu dune page web, ajoute dans len-

tte de la page au moyen de marqueurs HTML.

Depuis quelques mois, le nombre de balise meta a considrablement augmenter.

Nous avons :

les balises de base (meta charset, viewport, )

les balises utile pour le rfrencement (meta description, keywords, title, favicon, ),

les balises de partage social (opengraph) (meta og:title, og:description, ),

les balises de personnalisation (meta apple-touch-icon, msapplication-TileColor, ),

les balises personnalises (vos propres meta non compatible W3C).

6

Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

Balises meta

Une liste non exhaustive est disponible dans ce repository :

https://github.com/icom-nicolasaguenot/metalist

Vous pouvez le rcuprer sur vos instances locales en faisant un git clone :

git clone git@github.com:icom-nicolasaguenot/metalist.git

7

Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

La syntaxe MarkDown (fichiers *.md)

Cette syntaxe est simple prendre en main et permet de crer des fichiers lisible rapidement par les intervenants dun projet.

Toute la syntaxe est prsente ici :

http://bit.ly/1CsYJDL Lien complet : https://github.com/fletcher/MultiMarkdown/blob/master/Documentation/Markdown%20Syntax.md

8

Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

Exercice final Crer un fichier myProject.md dans votre repository GIT.

Si vous avez du mal crer le mme fichier :

http://bit.ly/1xpnIbc

Intgrer le contenu comme sur limage droite.

Rpondez ces 3 questions en argumentant vos rponses :

Pourquoi mon projet est-il organis de cette manire ? (Avantages et inconvnient de cette organisation)

Comment suis-je arriv ce rsultat ? (Diffrentes tapes, problmatiques dorganisation)

Quelles sont les difficults rencontrs durant ces 6 sessions ?

Une fois termin, dernier commit -m final commit et dernier push.

9

Nicolas AGUENOT - Freelance web developer - contact@nicolasaguenot.com - +33 (0)6 27 32 20 52

Des questions ?

10