## HTML
- Utilisation du reset.css ou du normalize.css
- Utilisation du plugin jQuery [Flexslider](https://www.woothemes.com/flexslider/) : - cliquer sur ce lien - télécharger le plugin - suivre les instructions (Step 1 à 3)
## CSS- Utilisation du plugin jQuery [Flexslider](https://www.woothemes.com/flexslider/) : - cliquer sur ce lien - télécharger le plugin - suivre les instructions (Step 1 à 3) - Largeur limité à 1100px maximum pour certains éléments - titres h2 : 1.5em - titres vignette : 2em
# BONUS Trouver le moyen de désactiver les fleches directionnelles dans le FlexSlider (Step 4)
https://developer.mozilla.org/fr/docs/Web/CSS/gradient http://www.colorzilla.com/gradient-editor/
## L'audio en HTML https://developer.mozilla.org/fr/docs/Web/HTML/Element/audio
## La vidéo en HTML https://developer.mozilla.org/fr/docs/Web/HTML/Element/Video
## CSS
- Utilisation des media queries
- Utilisation du display none
- Largeur limité à 80% maximum - Largeur du bloc de gauche en desktop : 70% - Largeur du bloc de droite en desktop : 30%
- Police utilisés : - "PT Sans Narrow" - "Open Sans"
- Tailles utilisés : - titres h2 : 16px en rem - nav : 24px en rem
Révision et approfondissement du float et du inline-block
## HTML - Utilisation du reset.css ou du normalize.css
## CSS Utilisation du inline-block et du float pour le placement de certains éléments - Largeur limité à 1500px maximum - Transparence du bloc d'entête : 0.75 uniquement pour le fond - Utiliser une class pour limiter intelligememnt le contenu - Taille de la police : - par défaut : 1em - titres h1 : 3em - titres h2 : 2em - Police utilisés : - Titre : "Courgette" - Texte : "Open Sans"
## BONUS - Trouver comment on intègre une google map
Découverte des tableaux et des formulaires
## HTML - Utilisation du normalize.css - Utilisation des balises pour le tableau et pour les formulaires
## CSS - Largeur limité à 1500px maximum - Largeur du tableau : 90% - Taille de la police : - On laisse les valeurs par défaut - Police utilisés : - Titre : "Courgette" - Texte : "Open Sans"
## La propriété box-sizing
https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing
http://www.binvisions.com/wp-content/uploads/2011/09/css-box-model-border-content_590x328.jpg
## La propriété background-size
https://developer.mozilla.org/fr/docs/Web/CSS/background-size
## La propriété background-position
https://developer.mozilla.org/fr/docs/Web/CSS/background-position
## Le modèle de boite http://www-sop.inria.fr/members/Sylvain.Chevillard/fr.selfhtml.org/css/formats/affichage/modele_boite.png
## Le inline-block http://fr.learnlayout.com/inline-block.html
## La propriété vertical-align
## La propriété min-width https://developer.mozilla.org/fr/docs/Web/CSS/min-width
## La propriété line-height https://developer.mozilla.org/fr/docs/Web/CSS/line-height
## La propriété border https://developer.mozilla.org/fr/docs/Web/CSS/border
## La propriété list-style-type https://developer.mozilla.org/fr/docs/Web/CSS/list-style-type
# INSTRUCTIONS Découverte du inline-block
## HTML - Utilisation du inline-block pour le placement de certains éléments - Utilisation du float pour quelques éléments - Utilisation du reset.css ou du normalize.css
## CSS - Largeur limité entre 800px et 1100px - Largeur du bloc gauche : 69% - Largeur du bloc de droite : 30% - Utiliser une class pour limiter intelligemment le contenu - Taille de la police : - par défaut : 1em - titres : 2em - Police utilisés : - "Slabo 27px"
## BONUS - Trouver comment on réalise les coins arrondis en CSS pour arrondir les photos
Ce projet porte sur la découverte du Float
Observer : - Bien analyser toute les subtilités de la maquette ; - Est-ce que je comprends la demande du graphiste, le sens de chaque élément du site ? - Connaissances manquantes pour réaliser le travail ? - Faire un schéma / mockup : - Représenter la découpe HTML, en indiquant les balises qui seront utilisées
https://developer.mozilla.org/fr/docs/Web/CSS/background-image
https://developer.mozilla.org/fr/docs/Web/CSS/padding
https://developer.mozilla.org/fr/docs/Web/CSS/@viewport/max-width
https://developer.mozilla.org/fr/docs/Web/CSS/float
Copyright © 2017 - All Rights Reserved - WebKonexion
Template by Port Foliot