Cours et tutoriels

• Un tutoriel complet pour aborder la création d’un site web : https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web
  • définir le cahier des charge du site : https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site
  • organisation de l’arborescence : https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers
  • introduction aux balisage HTML : https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML
  • utiliser les feuilles de style en cascade : https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML
  • créer des interactions en Javascript dans les pages web : https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript
• Débuter avec HTML 5 et CSS 3 : Débuter avec HTML : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3
• Débuter avec Javascript : https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript
• Débuter avec jQuery : https://openclassrooms.com/courses/simplifiez-vos-developpements-javascript-avec-jquery
• prise en main rapide de jQuery : http://babylon-design.com/apprendre-et-comprendre-jquery-1-3/ (un peu vieilli mais efficace)
• Débuter avec Bootstrap (version 3 mais majoritairement OK pour bootstrap 4) : http://www.opentuto.com/informatique/maitriser-bootstrap-3-par-la-pratique/
• Exercices pour mise en application des notions de base : (dézipper le fichier et afficher index.html à la racine du dossier) : CSS et Javascript
• Sélecteurs CSS : un jeu en 32 étapes pour tester leur fonctionnement.

références HTML

• Les balises HTML (pour commencer) : https://fr.wikibooks.org/wiki/Le_langage_HTML
• Références complète des balises HTML 5 : https://developer.mozilla.org/fr/docs/Web/HTML/Element
• Spécification HTML 4.01 : http://la-grange.net/w3c/html4.01/cover.html
• en anglais : https://www.w3schools.com/html/default.asp
• intégration des médias : généralités https://developer.mozilla.org/fr/docs/Apprendre/HTML/Multimedia_and_embedding
  • images : la problématique des images responsives (taille adaptée au terminal) : attributs srcset et balise  : https://developer.mozilla.org/fr/docs/Apprendre/HTML/Multimedia_and_embedding
  • vidéos et audio : https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
• Validation des formulaires :
  • la validation d’un formulaire : https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire
  • référence de la balise input (types utilisables pour la validation) : https://developer.mozilla.org/fr/docs/Web/HTML/Element/input
  • exemples d’utilisation des différents types : http://www.the-art-of-web.com/html/html5-form-validation/
  • les pattern :
    • référence pour les expressions régulières (pattern) : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp
    • un outil pour construire et/ou tester les regexp : https://regexr.com/

Références CSS

• Référence complète de CSS 2 : http://www.yoyodesign.org/doc/w3c/css2/propidx.html (sur ce site voir aussi le chapitre sur les sélecteurs CSS : http://www.yoyodesign.org/doc/w3c/css2/selector.html)
• Référence complète de CSS 3 : https://developer.mozilla.org/fr/docs/Web/CSS/Reference
• en anglais : https://www.w3schools.com/css/default.asp
• @font-face : utiliser des polices externes :
  • les bases Polices à télécharger : @font-face
  • présentation des solutions : https://www.alsacreations.com/astuce/lire/630-fonte-personnalisee-site-web.html
  • référence : https://developer.mozilla.org/fr/docs/Web/CSS/@font-face
• Média query :
  • les bases : Adapter la CSS en fonction du terminal : les Media Queries
  • présentation complète : https://www.alsacreations.com/article/lire/930-css3-media-queries.html
  • références des propriétés : https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Utiliser_les_Media_queries
• Flexbox :
  • les bases : Mise en page des blocs avec CSS3 : Flexbox
  • présentation avancée : https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
  • guide complet : https://la-cascade.io/flexbox-guide-complet/
  • pense-bête : http://jonibologna.com/content/images/flexboxsheet.pdf
  • générateurs de code : http://the-echoplex.net/flexyboxes/ ou https://loading.io/flexbox/
• des icones sans images Font awesome :
  • téléchargement : http://fontawesome.io/get-started/ / V4 : https://fontawesome.com/v4.7.0/
  • exemples d’utilisations : http://fontawesome.io/examples/ / V4 : https://fontawesome.com/v4.7.0/examples/
  • le catalogue des icônes : http://fontawesome.io/icons/ / V4 : https://fontawesome.com/v4.7.0/icons/
• Travailler avec méthode : organisation générale des styles CSS
  • le concept du reset CSS : https://www.alsacreations.com/astuce/lire/36-reset-css.html
  • un exemple de feuille de style "de base" commentée : https://www.alsacreations.com/astuce/lire/654-feuille-de-styles-de-base.html
  • un exemple de grille CSS : Grillade https://knacss.com/grillade/
  • Organisation du code, nomenclature des fichiers et ordre d’appel : la méthode Daisy http://daisy.tetue.net/
• Transitions :
  • présentation complète des transitions CSS : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS
  • référence : https://developer.mozilla.org/fr/docs/Web/CSS/transition
  • liste des propriétés pouvant faire des transitions : https://www.w3.org/TR/css-transitions-1/#properties-from-css-
  • exemples de transitions :
    • sur des blocs : http://leaverou.github.io/animatable/
    • sur du texte : https://daneden.github.io/animate.css/
• Transformations 2D, 3D :
  • présentation des transformations 2D : https://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html
  • référence des fonctions de transformation : https://developer.mozilla.org/fr/docs/Web/CSS/transform-function
• Animations :
  • présentation des animations CSS : https://www.alsacreations.com/tuto/lire/1299-timing-des-animations-et-des-transitions-en-css3.html
  • référence : https://developer.mozilla.org/fr/docs/Web/CSS/animation
  • exemples simples :
    • animations d’une seule propriété http://leaverou.github.io/animatable/
    • animations de texte : https://daneden.github.io/animate.css/
  • un générateur d’animations : http://cssanimate.com/
• Portal CSS : un exemple complexe "pur CSS" utilisant transformations + animations : https://la-cascade.io/portal-css/

Références pré-processeurs CSS

• les bases (exemple de SCSS) Pré-processeur CSS : SCSS
• Le concept de pré-processeur CSS : exemple de SASS/SCSS : https://www.alsacreations.com/article/lire/1717-les-preprocesseurs-css-c-est-sensass.html
• LESS (Bootstrap 2 et 3) :
  • Référence : http://lesscss.org/
• SASS / SCSS (Bootstrap 4 et KNACSS) :
  • Référence : http://sass-lang.com/documentation/file.SASS_REFERENCE.html#CSS_Extensions
  • les fonctions intégrées (manipulation des couleurs, opacité, nombres...) : http://sass-lang.com/documentation/Sass/Script/Functions.html
  • Compilateur SCSS en ligne : http://sass.js.org/
  • [avancé] Utiliser le "task-runner" Gulp pour gérer la compilation SCSS et JS : https://la-cascade.io/gulp-pour-les-debutants/

Références framework CSS

• Référence + tutoriel (en anglais) : https://www.w3schools.com/bootstrap/default.asp
• Bootstrap 3 :
  • grilles et typographie : https://getbootstrap.com/docs/3.3/css/
  • composants : https://getbootstrap.com/docs/3.3/components/
  • exemples de pages : https://getbootstrap.com/docs/3.3/getting-started/#examples
  • téléchargement version personnalisé : https://getbootstrap.com/docs/3.3/customize/
• Bootstrap 4 :
  • Eléments à intégrer pour des fonctionnalités complètes (fichiers compactés = minimifiées) :
    • bootstrap lui-même : bootstrap.min.css + bootstrap.min.js
    • popper (infobulles) https://popper.js.org: popper.min.js
    • jQuery + jQueryUI : jquery.min.js + jquery-ui.min.js
  • zip pour utilisation de BS 4 en local : zip/bs4_local.zip
  • exemple du code d’intégration des éléments bootstrap dans le HEAD d’une page html :
    1. <head>
    2.      <title>tests intégration Bootstrap</title>
    3.      <meta charset="utf-8" />
    4.      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    5.      <!-- CSS Bootstrap + jQuery-UI -->
    6.      <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    7.      <link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    8.      <!-- javascripts Bootstrap + jQuery + Popper -->
    9.      <script src="js/jquery.min.js" type="text/javascript"></script>   
    10.      <script src="js/popper.min.js" type="text/javascript"></script>
    11.      <script src="js/bootstrap.min.js" type="text/javascript"></script>
    12. </head>

    Télécharger

  • grilles : https://getbootstrap.com/docs/4.0/layout/grid/
  • composants : https://getbootstrap.com/docs/4.0/components/alerts/
  • typographie : https://getbootstrap.com/docs/4.0/content/typography/
  • utilitaires (espacement, bordures, couleurs...) : https://getbootstrap.com/docs/4.0/utilities/borders/
  • exemples de pages : https://getbootstrap.com/docs/4.0/examples/
• Un autre exemple de framework CSS : KNACSS
  • présentation et documentation https://knacss.com/
  • pense-bête : https://knacss.com/KNACSS-cheatsheet.pdf
  • générateur de templates de pages : https://schnaps.it/

Références Javascript

• Javascript rapide : http://www.toutjavascript.com/reference/index.php
• Références complètes Javascript MDN : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference
• Index des méthodes Javascript : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Index_des_m%C3%A9thodes
• utiliser les cookies :
  • notions de base : https://openclassrooms.com/courses/ajax-et-l-echange-de-donnees-en-javascript/les-cookies-1
  • méthodes natives javascript : https://www.w3schools.com/js/js_cookies.asp
  • le plugin jQuery js-cookie : présentation https://github.com/js-cookie/js-cookie et téléchargement https://github.com/js-cookie/js-cookie/blob/master/src/js.cookie.js
• utiliser le LocalStorage : https://www.alsacreations.com/article/lire/1402-web-storage-localstorage-sessionstorage.html
• en anglais : LocalStorage : https://www.w3schools.com/html/html5_webstorage.asp
• stockage des objets javascript en JSON :
  • présentation complète : https://www.w3schools.com/js/js_json_intro.asp
  • référence : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON

Références jQuery

• Référence de l’API jQuery : http://api.jquery.com/
• Référence jQuery UI : http://api.jqueryui.com/category/all/
• en anglais : https://www.w3schools.com/jquery/default.asp
• Exemples d’utilisations de jQuery : http://jqueryfacile.com/par-l-exemple
• plugin DataTable :
  • référence : https://datatables.net/reference/index
  • exemples : https://datatables.net/examples/index

Outils pour développement web

• Firefox : les différents outils de développement https://developer.mozilla.org/fr/docs/Outils
• En ligne : éditeurs, générateurs, templates, cheat-sheet... pour HTML, CSS, JS et jQuery : http://html-css-js.com/
• Logiciel multi-OS pour compilation des pré-processeurs CSS (LESS, SASS, SCSS...) : http://koala-app.com/
• Documentation en ligne mode offline : http://devdocs.io/
• Documentation offline : https://zealdocs.org/
• Générateur de Lorem ipsum évolué (paragraphes avec titres, formulaires, listes...) : https://www.webpagefx.com/web-design/html-ipsum/

Astuces pour mémoire :

• générer un saut de ligne dans un ::before ou ::after :
  1. .le-selecteur::before {
  2.     white-space: pre;
  3.     content: "\A \A0";
  4. }

  Télécharger