• CPF
  • Elearning-Tutoré
  • Tous publics

Elearning - Tutoré

HTML, CSS, JavaScript
A mon rythme

Le développement Front End correspond aux éléments d'une application web (développés avec HTML, CSS et JavaScript) qu'un utilisateur peut voir et avec lesquels il peut interagir directement. Cette formation s'adresse aux personnes qui souhaitent acquérir les bonnes bases et les bonnes pratiques pour développer une application Web Front End.

Objectifs pédagogiques

  • Etre capable de développer une application web Front End
  • Savoir utiliser les balises HTML
  • Etre capable de mettre en forme les pages via les CSS
  • Etre capable de mettre en place des formulaires

 

 

* La durée de la formation affichée pour ce programme est une valeur estimée.
Celle-ci peut varier en fonction de la motivation de l'apprenant et de sa régularité dans le déroulement.

 

Profil des bénéficiaires

Pour qui ?

  • Tous publics
  • Pour toute personne souhaitant s'initier au code et concevoir un site internet

Pré-requis

  • Avoir une bonne utilisation de la navigation web, et une certaine aisance avec les domaines de la logique

Programme

Le Web et le client léger

  • C'est quoi le Web ?
  • Comprendre les expressions du Web
  • Le W3C
  • Historique et usage d'Internet en France
  • Différence entre page Web statique et dynamique
  • Rôle du client et du serveur
  • Définition des principaux éléments d'un site Web
  • Quelques chiffres Internet
  • Dates clés du Web
  • Protocole HTTP
  • Clients légers : navigateurs et moteurs de rendu
  • Quelques chiffres sur les navigateurs
  • Avantages et inconvénients du client léger
  • Choix des navigateurs
  • Démonstration - Installation d'un outil de développement
  • Conclusion

Les balises HTML

  • Maquetter une page
  • L'historique d'HTML
  • Les balises, attributs et règles d'HTML
  • Les premières balises
  • Les éléments HTML4 obsolètes
  • Doctype : simplification HTML5
  • La balise
  • La balise
  • La balise
  • La balise
  • L'encodage des caractères
  • La balise
  • Placer du texte sur une page HTML
  • Les commentaires
  • Les liens
  • La validation du code HTML
  • La mise en page à l'aide d'éléments conteneurs
  • Les images
  • Les couleurs
  • Les nouveautés HTML5
  • La balise
  • La balise
  • La balise
  • La balise
  • La balise
  • La balise
  • Les avantages des nouvelles balises
  • Les nouvelles balises sémantiques
  • Les nouveaux attributs
  • Tester la compatibilité des balises suivant le navigateur
  • Bien coder

Les formulaires HTML

  • Zones de saisie basiques
  • Méthode GET ou POST
  • Améliorer la saisie
  • Principales balises du formulaire
  • Valider un formulaire
  • Attributs de la liste déroulante
  • Attributs globaux HTML
  • Événements de la fenêtre
  • Événements du formulaire
  • Événements du clavier
  • Événements à la souris
  • Événements liés au presse-papiers
  • Événements des médias
  • Événements divers
  • Formulaire HTML

Les balises multimédia

  • La balise
  • Le format mp3
  • Le format Ogg Vorbis
  • Le format Wav
  • Le format AAC
  • La compatibilité des formats audio
  • La balise
  • Le format H.264 MPEG-4
  • Le format OGG
  • Le format H.265 MPEG-4
  • Le format WebM
  • La compatibilité des formats vidéo

Les feuilles de style CSS

  • Les règles de base
  • Les sélecteurs
  • Les modes de sélection
  • Cascade et héritage des propriétés
  • Le positionnement des éléments
  • La typographie et le texte
  • Les Web fonts
  • Intégrer des Web fonts avec Font Squirrel
  • Intégrer des Web fonts avec Google Font Web
  • Les listes
  • Les arrière-plans
  • Les liens hypertextes et les pseudo-éléments
  • Les propriétés des boîtes
  • Les tableaux
  • Les bordures
  • La mise en page
  • La version CSS3
  • Les bords arrondis (CSS3)
  • Les ombres (CSS3)
  • La gestion du texte (CSS3)
  • Les arrière-plans multiples (CSS3)
  • Les dégradés de couleurs (CSS3)
  • Les transformations (CSS3)
  • Les transitions (CSS3)
  • Les animations (CSS3)
  • Les transformations 3D (CSS3)

Le Responsive Web Design (Media Queries)

  • Problématique et principes du web adaptatif
  • Mise en page adaptative
  • Principes du Responsive Web Design
  • Affichage et résolution d'écran
  • Media Queries
  • Les outils du navigateur pour les développeurs

Un framework CSS : Bootstrap

  • Utilité et définition d'un framework
  • Présentation et fonctionnement de Bootstrap
  • Points forts de Bootstrap
  • Le fichier normalize.css
  • Evolutions de Bootstrap
  • Mise en oeuvre de Bootstrap
  • Le conteneur
  • Dossiers d'installation de Bootstrap
  • Installation de Bootstrap
  • Minification des fichiers
  • Utilisation de Bootstrap
  • Exemples d'éléments Bootstrap
  • Compatibilité avec les navigateurs
  • Scripts JavaScript à ajouter
  • Le code Bootstrap en résumé
  • Présentation et démonstration du système de grille
  • Optimisation du système de grille
  • Démonstration - Offset Bootstrap
  • Penser Mobile First
  • Thèmes et documentations Bootstrap
  • Présentation des éléments
  • Éléments de la catégorie CSS
  • Éléments de la catégorie Composant
  • Éléments de la catégorie JavaScript
  • Amélioration des interfaces
  • Les fenêtres modales
  • Personnalisation de Bootstrap
  • Démonstration - Personnaliser Bootstrap avec les CSS
  • Jumbotron

Le langage JavaScript

  • Les bases du langage JavaScript
  • Les tableaux
  • La commande console
  • Les opérateurs
  • Les différents tests d'égalité
  • Les fonctions
  • Les événements
  • La programmation orientée objet
  • La création d'une classe
  • La mise en oeuvre de l'héritage
  • Démonstration - Modification du DOM

Le framework jQuery

  • Présentation de jQuery
  • Écosystème jQuery
  • Fonction jQuery
  • Installation de jQuery
  • La méthode ready
  • Les différents modes de sélection
  • Modifier le DOM
  • Événements
  • Démonstration - Utilisation de jQuery

Conseils pour bien coder

  • Respecter le doctype HTML5
  • Fermer les balises
  • Indiquer l'URL canonique
  • Définir le cache
  • Définir les emplacements pour le JavaScript
  • Respecter la sémantique
  • Respecter la hiérarchie des titres
  • Influencer le référencement
  • Bien choisir le texte d'un lien
  • Utiliser l'attribut nofollow
  • Mettre un attribut alt à chaque balise d'image
  • Préciser la taille des images
  • Utiliser la balise
  • Limiter le nombre de balises
     
  • Préférer les feuilles de style CSS aux attributs style
  • Utiliser l'attribut id
  • Limiter et combiner les fichiers du même type
  • Limiter le nombre de connexions à d'autres domaines
  • Assurer la compatibilité avec Internet Explorer
  • Tester le rendu final

Déroulement

Formation elearning

Un de nos formateurs prend contact avec vous et vous présente la plateforme elearning, notament comment évoluer dans votre parcours de formation.

A votre rythme ...

  • Vous déroulez la formation à votre rythme.
  • Certains modules comportent des leçons avec apprentissage en direct dans le logiciel étudié.
  • Vous visualisez une leçon courte, puis vous effectuez l'exercice proposé. Vous pouvez faire plusieurs tentatives, plusieurs manipulations seront comptées comme bonnes réponses, nous n'imposons rien (menus, icônes, ...)
  • Vous acquierez alors un véritable savoir-faire par la pratique.

Accompagnement et suivi

Une formation en elearning sans formateur / coach n'est pas bénéfique et efficace pour tous.

En effet tout le monde n'a pas la maturité digitale et une autonomie suffisante pour un apprentissage efficace et réussi.

C'est pourquoi nous proposons de vous accompagner dès le départ de votre projet :

  • Une évaluation de votre niveau avant apprentissage
  • La possibilité de contacter un formateur via email (pour points de blocages, ...)
  • Des séances complémentaires au elearning avec un formateur (présentiel ou à distance)
  • Des points d'avancement dans votre parcours
  • Une évaluation de la formation

Après votre parcours de formation, vous avez gagné en efficacité, c'est certain.
Maintenant comment matérialiser cette montée en compétences ?

Nous vous proposons de passer une certification, celle-ci officialisera vos nouveaux acquis et augmentera l'employabilité de votre cv.

  • Une certification (pour les modules certifiables)
  • Un financement via votre CPF (pour les modules éligibles, et si formule avec accompagnement d'un formateur)

Contenu de cette offre éligible au CPF

  • Un rendez-vous (télephonique/visio) avec un formateur pour échanger sur votre besoin, votre expérience et la validation du parcours. Il vous montrera également le fonctionnement de la plateforme de formation et les bonnes pratiques d'un parcours de formation réussi
  • Passage d'un test de positionnement
  • Votre accès personnel à la plateforme (avec suivi de votre parcours)
  • Des modules vidéos pédagogiques
  • Des exercices en réel dans le logiciel (machine virtuelle, pas besoin d'avoir le logiciel installé sur son poste)
  • Des échanges par email avec votre formateur dès que vous en éprouverez le besoin.
  • Deux séances de formation de une heure avec votre formateur sur les thématiques de votre choix, parmi ce programme (soit 2 heures de formation pour lever des points de blocage et selon votre progression dans le parcours)
  • Evaluation de la formation
  • Passage de la certification associée

Formez-vous à votre rythme ! La durée de la formation est prévue sur 3 mois pour rester efficace.

Cependant vous accèderez aux ressources pédagogiques pendant 1 an. De quoi revenir sur certains points et refaire quelques exercices pour lutter contre la courbe de l'oubli.

Certifications et modalités

Résultats attendus à l'issue de la formation

Uune certification reconnue !

L'apprenant aura la possibilité de passer la certification ENI (certification AVIT) à l'issue de la formation. Il s'agit d'un examen sans sanction, vous obtenez une note graduée de 0 à 1000.

Modalité d'obtention

A l'issue de la formation si l'apprenant souhaite passer la certification, il se verra remettre le certificat.

Détails sur la certification

Equivalences et passerelles de cette certification : aucune. L'apprenant pourra s'il souhaite continuer sa montée en compétences et suivre une formation de type perfectionnement. - Blocs de compétences : non concerné car un seul bloc. - Débouchés/métiers : La bureautique étant une compétence transversale, elle est utilisable dans tous les domaines et peut concerner tous les types de métiers.

 

Si vous souhaitez financer cette formation via votre CPF, c'est possible.

Détails et inscription

 

 Dans le doute appelez nous, notre conseillère pourra vous guider.

 

Date modification : 16/11/2021

Ces formations pourraient vous intéresser

Gérer mes Cookies

Les cookies sont importants pour le bon fonctionnement d'un site. Afin d'améliorer votre expérience et nos services, nous utilisons des cookies pour collecter les statistiques en vue d'optimiser les fonctionnalités de notre site Web.

Vous pouvez choisir de bloquer certains types de cookies. Sélectionnez votre choix concernant chaque catégorie de cookie. Cliquez sur «soumettre les préférences » pour valider vos choix.

Mesure d'audience

Ces cookies servent à mesurer et analyser l’audience de notre site (nombre de visiteurs, pages vues, durée sur le site, etc.) afin d’en améliorer la performance.

Afin de recevoir notre plaquette,

veuillez saisir votre adresse email