Ensemble,Donner une identité Web à votre business

# INSTRUCTIONS

Construire un site avec du jQuery et de la vidéo

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

## Les dégradés en CSS

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

Mobile FIrst

Ecran PC

Ecran PC

Ecran Tablette

Mobile

## INSTRUCTIONS Découverte du responsive

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

## Le préfixage en CSS

http://www.alsacreations.com/article/lire/1159-prefixes-vendeurs-css-proprietaires.html http://pleeease.io/play/ ## C'est quoi le Responsive WebDesign http://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html ## Différentes tailles des écrans de device http://mydevice.io/devices/ ## Choisir la taille de sa police (et son unité) : http://www.pompage.net/traduction/dimensionner-ses-fontes-avec-rem ## Les media queries https://developer.mozilla.org/fr/docs/Web/CSS/Media_queries http://www.alsacreations.com/article/lire/930-css3-media-queries.html ## Les coins arrondi https://developer.mozilla.org/fr/docs/Web/CSS/border-radius ## Ombre portée https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow https://developer.mozilla.org/fr/docs/Web/CSS/text-shadow

Web Slider Page&Form

Liens Utils

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

Liens Utils

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

Les Etapes de réalisation

# 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

Page Green Office

Ce projet porte sur la découverte du Float

Répartition des taches

## HTML

• Utilisation des balises sémantique
• Utilisation de l'attribut alt sur les images

## CSS

• Utilisation du float pour le placement des éléments : les images, la nav, etc
• Utilisation de l'attribut alt sur les images

Méthodologie de travail

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

Links utils

• ## La propriété background-image:

  https://developer.mozilla.org/fr/docs/Web/CSS/background-image

• ## La propriété padding

  https://developer.mozilla.org/fr/docs/Web/CSS/padding

• ## La propriété max-width

  https://developer.mozilla.org/fr/docs/Web/CSS/@viewport/max-width

• ## La propriété float

  https://developer.mozilla.org/fr/docs/Web/CSS/float

• ## La propriété clear
  • https://developer.mozilla.org/fr/docs/Web/CSS/clear
  • http://fr.slideshare.net/jonathanpath/responsive-webdesign-devenir-un-rwd-master (page 7)
  • http://fr.learnlayout.com/clear.html