HTML5, CSS3, Responsive – Création de pages web

Avoir des connaissances internet standard. Une expérience pratique du web est souhaitable.

Créer des applications web dynamiques et responsives, en utilisant conjointement les nouvelles possibilités du langage HTML5 et des feuilles de style CSS3.

Vous êtes adhérents à l’OPCO ATLAS

Cette formation fait partie des Actions Collectives campusAtlas. Elles sont accessibles à toutes les entreprises adhérentes à Atlas.

Démarches auprès de campusAtlas :

Choisissez la session qui correspond à votre souhait et, à partir de la plate-forme, saisissez votre demande de prise en charge.

Pour plus d’informations sur les conditions d’accès et les démarches, visitez la plateforme campusAtlas https://campus.opco-atlas.fr/ ou contactez votre conseiller formation Atlas !

Pour réserver votre place auprès d’AJC FORMATION :

Si vous souhaitez réserver votre place sans attendre la confirmation de campusAtlas, nous vous recommandons de nous retourner sans attendre un bulletin d’inscription complété. Pour le télécharger sans délai cliquez ici.

À la suite de votre inscription, nous nous engageons à vous répondre dans un délai de 48 heures. Nous serons en mesure de vous garantir ou non la tenue de votre formation au plus tard 15 jours avant son déroulement.

Vous n’êtes pas adhérents à l’OPCO ATLAS

Retournez-nous sans attendre un bulletin d’inscription complété. Pour le télécharger sans délai cliquez ici.

À la suite de votre inscription, nous nous engageons à vous répondre dans un délai de 48 heures. Nous serons en mesure de vous garantir ou non la tenue de votre formation au plus tard 15 jours avant son déroulement.

À l’issue de chaque module, le formateur évaluera chacun des participants en fonction des cas pratiques et exercices effectués.

Une attestation de formation vous sera remise.

• Alternance d’exercices, cas pratiques, QCM et de notions théoriques, projet Fil Rouge.
• Evaluations régulières et retour du formateur sur les points moins bien assimilés.
• Les supports de cours seront mis à disposition via notre la plate-forme de téléchargement AJC Classroom.
• Accès à notre plateforme à distance de Classe Virtuelle
  Mêmes possibilités et interactions avec votre formateur que lors d’une formation présentielle. En effet, votre formation se déroulera en connexion continue 7h/7 :
  • • • Echanges directs avec le formateur et l’équipe pédagogique à travers la visioconférence, les forums et chats
      • Vérification de l’avancement de votre travail et évaluation par votre formateur à l’aide d’exercices et de cas pratiques
      • Suivi pédagogique et conseils personnalisés pendant toute la formation

   

  Vous recevrez les informations de connexion par mail dès votre inscription. En cas de problème de connexion, vous pourrez joindre notre équipe à tout moment (avant ou même pendant la formation) au 0182837241 ou par mail à l’adresse hotline@ajc-formation.fr.

Les personnes en situation de handicap sont invitées à nous communiquer leurs besoins spécifiques. Nous ferons tout pour les mettre dans les meilleures conditions de suivi de la formation (compensation, accessibilité…)

Une attestation de fin de stage sera remise à tous les participants à l’issue de leur parcours.

Développeurs, concepteurs web, chefs de projets…

Introduction à HTML

• Fonctionnement d’ un site Web
•  Présentation du langage HTML
•  Structure d’un document HTML
•  Le doctype
• Balises Meta
•  Positionnement de HTML par rapport à CSS
• Choix d’un éditeur de Texte

Travaux pratiques : Mise en place d’une page simple via un éditeur de texte

Les balises de base

• Syntaxe des balises
•  Les balises à contenu et les balises vides
•  Les attributs de balise
•  Les balises de titre
•  Les balises de structure
•  Les liens
• Les images
•  Les listes
•  Les tableaux

Travaux pratiques :
Création d’une page simple (Titres, Paragraphes, image, liens)
Création d’une page présentant les films

Les formulaires

•  Les inputs du formulaire
• Principe d’envoi des formulaires
•  Les différents éléments du formulaire

Travaux pratiques : Création d’un formulaire de création de compte client

Les nouveautés HTML5

•  Les nouvelles balises de structure
•  Les nouveaux inputs de formulaire
•  Validation native des formulaires
•  Ajouter du son et des vidéos
•  Le canvas
•  Le format SVG

Travaux pratiques : Adaptation avec de nouveaux inputs dans le précédent formulaire

Présentation de CSS

•  Utilité des feuilles de style
•  Où écrire le CSS ?
•  Syntaxe de base
• Principe de fichiers tels que reset.css ou normalize.css
•  Les sélecteurs
•  Quelques propriétés de base
•  Les couleurs (RGB, HSL, HEX)

Travaux pratiques : Ajout de styles dans la page créée par les balises de base

Structure et positionnement des éléments

•  Les éléments block, inline
•  Marges et bordures
•  Le positionnement dans le flux
•  Position relative et absolue
•  Autres positions

Travaux pratiques : Création d’un gabarit

Les nouveautés CSS3

•  Les nouveaux sélecteurs
•  Créer des dégradés
•  Les bordures arrondies
•  Les effets de texte
•  Les transitions
•  Les animations
•  Le positionnement en grille
•  Le positionnement Flexbox

Travaux pratiques : Adaptation du précédent gabarit, ajout de différents effets

Introduction au Responsive Web Design

• Les modes du web
• Compatibilité des navigateurs
• Part de marché des navigateurs
• Le marché mobile
• La nécessité du Responsive Design
• Les différents types de terminaux
• Les limites du Responsive Design

Travaux pratiques : Présentation d’outils de Test d’un site responsive

Application du Responsive Web Design

• Une solution basée sur HTML et CSS
• Adaptation des contenus visuels (images, icônes, polices, …)
• Adaptation du positionnement
• Adaptation de la navigation
• Les différentes unités de mesure
• Principe de Grille

Les Media Queries et propriétés CSS

• Approche portrait/paysage, tactile, impact sur l’ergonomie
• Règles conditionnelles (orientation, device-width…)
• Réglage complémentaire de rendu visuel (Viewport)
• Eviter les débordements. Points de rupture

Travaux pratiques : Faire évoluer le gabarit à l’aide des Media Queries