PlaceOweb Dotclear

Les polices et fonts

• Google Fonts

Ombres et bords CSS

CSSmatic > CSS tools for web designers

• Border Radius
• Box Shadow
• Gradient Generator

Feuilles de style pour le Web - Trucs & astuces CSS

rem, em, px, pt, cm, in… vw, vh, vmin, vmax

Utiliser em ou px pour les tailles des polices pour les tailles de police, il est préférable d'utiliser em

La nouvelle unité "rem (root-em)" (et les autres : vw, vh, vmin, vmax) Le rem (pour "root em") est la taille de l'élément racine du document dans la police de caractères. Contrairement au em, qui peut être différent pour chaque élément, le rem est constant tout au long du document

Media Queries

div.mybox { border: 2px solid }
@media (min-resolution: 2dppx) {
  /* Media with 2 or more dots per px */
  div.mybox { border: 1.5px solid }
}

sibling : enfant de mêmes parents

Le petit jeu en ligne (32 exercices) pour apprendre les sélecteur CSS : CSS Diner

• Type Selector : A

Select elements by their type

• ID Selector : #id

Select elements with an ID

• Descendant Selector : A B

Select an element inside another element

• Combine the Descendant & ID Selectors : #id A
• Class Selector : .classname

Select elements by their class

• Combine the Class Selector : A.className
• Comma Combinator : A, B

Combine, selectors, with... commas!

• The Universal Selector : *

You can select everything!

• Combine the Universal Selector : A *

This selects all elements inside of A.

• Adjacent Sibling Selector : A + B

Select an element that directly follows another element

• General Sibling Selector : A ~ B

Select elements that follows another element

• Child Selector : A > B

Select direct children of an element

• First Child Pseudo-selector : :first-child

Select a first child element inside of another element

• Only Child Pseudo-selector : :only-child

Select an element that are the only element inside of another one.

• Last Child Pseudo-selector : :last-child

Select the last element inside of another element

• Nth Child Pseudo-selector : :nth-child(A)

Select an element by its order in another element

• Nth Last Child Selector : :nth-last-child(A)

Select an element by its order in another element, counting from the back

• First of Type Selector : :first-of-type

Select the first element of a specific type

• Nth of Type Selector : :nth-of-type(A)

Selects a specific element based on its type and order in another element - or even or odd instances of that element.

• Nth-of-type Selector with Formula : :nth-of-type(An+B)

The nth-of-type formula selects every nth element, starting the count at a specific instance of that element.

• Only of Type Selector : :only-of-type

Select elements that are the only ones of their type within of their parent element

• Last of Type Selector : :last-of-type

Select the last element of a specific type

• Empty Selector : :empty

Select elements that don't have children

• Negation Pseudo-class : :not(X)

Select all elements that don't match the negation selector

• Attribute Selector : [attribute]

Select all elements that have a specific attribute

• Attribute Selector : A[attribute]

Select all elements that have a specific attribute

• Attribute Value Selector : [attribute="value"]

Select all elements that have a specific attribute value

• Attribute Starts With Selector : [attribute^="value"]

Select all elements with an attribute value that starts with specific characters

• Attribute Ends With Selector : [attribute$="value"]

Select all elements with an attribute value that ends with specific characters

• Attribute Wildcard Selector : [attribute*="value"]

Select all elements with an attribute value that contains specific characters anywhere

Mozilla Thimble, Online code editor geared to people teaching and learning HTML, CSS, and JavaScript.

Taper au clavier ;

• Les différentes configuration de clavier
  • Clavier Français, La disposition AZERTY
  • Dvorak-fr, La disposition Dvorak-fr pour écrire du texte ou programmer, notez que les deux touches Alt ont un fonctionnement symétrique ce qui est préférable d’un point de vue ergonomique
• Comment taper plus vite au clavier
• Apprendre à taper sur un clavier AZERTY
• Doigté pour clavier d'ordinateur avec différentes positions initiales des doigts ;
  • Position naturelle
  • Position alignée

Pour s'entrainer au WPM (Word Per Minute / mot par minute),

• La dictée