Posté par Janine Margueron le 10 juillet 2023

Exercices HTML / CSS

HTML:

CSS:

https://www.w3schools.com/css/exercise.asp

Entrainer les sélécteurs CSS :

Flexbox :

Posté par pierre le 18 août 2021

Pug html

Vous désirez optimiser l’écriture de votre code html, Pug pourrait vous être utile. Pug est un outil de templatage qui permet de générer du code HTML en compilant via une fonction Javascript.

L’utilisation de balises n’est plus nécessaire, grâce à un système d’indentations. Les classes et les id sont définis par des raccourcis, respectivement “.” et “#”.

Un des avantages de Pug réside également dans les nombreuses fonctionnalités qu’il offre: possibilité de définir des variables, d’ajouter de petits éléments de code comme des éléments de logique de base (if, each, unless…). On peut en outre écrire du JS directement depuis le fichier .pug, qui sera converti en page HTML.

Plug nécessitera un apprentissage, ne conviendra pas à tous les projets, mais il est toujours intéressant d’être au courant des technologie à disposition.

https://www.sitepoint.com/a-beginners-guide-to-pug/
https://pugjs.org/api/getting-started.html

Posté par pierre le 12 juin 2019

Sticky Footer

Un footer qui se retrouve en milieu de page, ça ne se fait pas!

Un pied de page (footer) doit toujours être en bas de page, même si le contenu ne remplis pas la page. Malheureusement, bon nombre de templates négligent ce fait.
sticky footer

Dans le lien ci-dessous vous découvrirez 5 techniques vous permettant de le faire, à vous de choisir la meilleure technique suivant l’architecture de votre site.
(en ce qui me concerne, la méthode avec calc() me parait la plus commode, pour autant que vous n’ayez pas trop de contraintes concernant la rétrocompatibilité)

Sticky Footer, Five Ways
Posté par pierre le 29 mai 2019

Un template vide mais avec tout ce qu’il faut

Marre de devoir réécrire a chaque fois la structure de base, appels script et css, reset de vos page html?

Il existe beaucoup de solutions pour vous épargnez ces taches.

Utilisez Initializr et commencez à coder du contenu en 15 secondes

initializr logo

http://www.initializr.com/

L’excellent site Alsacréations nous a également distillé une savoureuse solution digne des meilleurs produits de cette belle région.

logo schnapsit
https://schnaps.it/

Posté par pierre le 22 mai 2019

To close or not to close

Comme tout le monde le sait, on doit toujours refermer ses balises en HTML

<html> </html>

mais quelques unes NE DOIVENT pas être fermées, on les appelle des balises auto-fermantes. Dans les versions précédentes d’HTML il était nécessaire de mettre un slash avant la fermeture de la balise ouvrante />, maintenant ce n’est plus obligatoire, vous pouvez donc toujours utiliser les deux syntaxes :

<meta charset="UTF-8">
ou 
 <meta charset="UTF-8" />


Liste des balises auto-fermantes (self closing tags) qui en doivent PAS être fermées:

    <area />
    <base />
    <br />
    <col />
    <embed />
    <hr />
    <img />
    <input />
    <link />
    <meta />
    <param />
    <source />
    <track />
    <wbr />