Dernière mise à jour le 30 mars 2023 par LMD

1. Atelier page CV en pas à pas

2. Liens utiles

Voici quelques liens vers des ressources utiles à la session HTML/CSS.

Mémento des propriétés HTML
Un récapitulatif simple du rôle des principales balises HTML5, classées par catégories d’usage et bien expliquées avec des exemples et des conseils d’usage. À toujours avoir sous la main.

Mémento des propriétés CSS
La suite du précédent, mais dédié aux propriétés CSS. Tout aussi nécessaire.

Initialement, un Mémento raisonné, vraiment simple et basique mais sans explications, avait été publié par l’excellent site Classroom in a book. Il a disparu mais peut encore être consulté en PDF sur ce lien : Memento HTML & CSS

Liste complète des propriétés HTML
C’est la fondation Mozilla pour les développers. C’est clair et complet. Pourquoi s’en priver?

Liste complète des propriétés CSS
Une bible, en anglais, mais très complète et surtout très clairement expliquée, avec des exemples d’utilisation, des propriétés CSS. A consulter sans modération pour approfondir ses connaissances.

Tuto complet HTML5/CSS3
Encore par OpenClassroom, un tuto complet qui récapitule les grands principes d’utilisation des langages html5 et css3. Demandera un compte gratuit pour être consulté librement.

Choisir une couleur pour le web
Le site d’adobe pour trouver des harmonies colorées. Indispensable.

Google Fonts
Pour ajouter des fontes personnalisées sur votre site. Incontournable aujourd’hui. Tout est clairement expliqué : choisir une fonte, cliquer sur le bouton quick use et suivre les instructions.

Pour convertir ses propres fontes
Pour intégrer ses propres fontes à son site (à condition d’avoir les droits sur ces fontes) il faut les convertir avant de les mettre dans le dossier racine. Une seule solution : Font Squirrel.

Une liste d’outils dont on aura besoin un jour
Parmi les plus intéressant, le générateur de règles css3, notamment pour l’animation et les transitions.

Utiliser les Flex Box
Une explication assez complète et pédagogique sur l’usage des flex box en CSS. Une fonctionnalité d’avenir à apprendre à maîtriser.

Et pour réaliser des mosaïques d’images plus élaborées
Réservée aux plus aguerris d’entre-vous, la bibliothèque javascript Masonry. Délicat d’usage mais tellement plus beau.

Des effets de survol d’image en CSS3
Le code est donné. Il reste à l’adapter à vos besoins, en plus simple éventuellement.

Un mur d’images en vrac
Effet intéressant. Nécessite cependant JQuery, donc quelques compétences avancées. Intéressant cependant d’analyser le code source pour voir comment c’est fait. Basé sur la bibliothèque Masonry (voir plus haut).

iHover
Encore des effets de survol d’image

3_ Atelier page Responsive en pas à pas