Références HTML, CSS, Javascript et jQuery

Prise en main HTML, CSS, Javascript, jQuery : cours, tutoriels et références des langages

lundi 2 octobre 2017, par clem

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 :
```
<head>
     <title>tests intégration Bootstrap</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     
     <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
     <link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css" />
     
     <script src="js/jquery.min.js" type="text/javascript"></script>	
     <script src="js/popper.min.js" type="text/javascript"></script>
     <script src="js/bootstrap.min.js" type="text/javascript"></script>
</head>
```
- 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 : .le-selecteur::before { white-space: pre; content: "\A \A0"; }

Cet article est mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions - 4.0 International.

Tech de Gamuza

Références HTML, CSS, Javascript et jQuery

Cours et tutoriels

références HTML

Références CSS

Références pré-processeurs CSS

Références framework CSS

Références Javascript

Références jQuery

Outils pour développement web

Astuces pour mémoire :

Dans la même rubrique