Web Dev

Qui suis-je ?

Stanislas Ormières

  • @laruiss (Github, Twitter)
  • stan@stormier.ninja
  • Ancien prof... de SVT (Biologie - Géologie)
  • Autodidacte en HTML - CSS - JS - PHP - MySQL
  • Formation Java EE - MySQL - HTML - CSS - JS

Web dev

Qu'attendez-vous de ce cours ?

Web dev

Pourquoi est-ce difficile ?

3 langages : HTML, CSS, JavaScript

De multiples environnements d'exécution

(Firefox, Chrome, Edge, Safari, Opera, Android view, Safari mobile, Node.js...)

Accessibilité

Mal voyant, non-voyant (lecteur d'écran), déficient moteur (pas de souris...)

Web dev

Les outils

Navigateur (Firefox developer edition)

Visual Studio Code

Hyper

Git

Web dev

Les sites de références

MDN : Mozilla Developer Network

CSS tricks

Stackoverflow

YDKJS

Eloquent JavaScript

Quirksmode

csswizardry

2ality

HTML

Squelette

  • Doctype
  • <html>
  • <head>
  • <body>

HTML

Les principales balises (tags) sémantiques (1) HTML5

  • <nav> (seulement la nav de haut niveau)
  • <main> (1 seul)
  • <header>
  • <footer>
  • <section>
  • <article>
  • <aside>
  • <video>, <audio>, <figure>...

HTML

Les principales balises (tags) sémantiques (2)

  • <h1>, <h2>...<h6>
  • <p>
  • <a>
  • <ul>, <ol> et <li>
  • <em> et <strong>
  • <table>, <tr>, <th> et <td>
  • <img />
  • <button>

HTML

Les principales balises (tags) sémantiques (3)

  • <form>
  • <input type="text|checkbox|radio|number|date|color...">
  • <select> et <option>
  • <textarea>

HTML

Les principales balises (tags)
non-sémantiques

  • <span>
  • <div>

HTML

D'autres balises (tags)
sémantiques (3)

  • <dl> <dt> <dd>
  • <fieldset> <legend>
  • <caption>

HTML

Les attributs (attributes)

  • <html lang="fr">
  • <input type="text">
  • <input type="password">
  • <input type="checkbox">
  • <input type="email">
  • <input type="number">
  • <a href="https://www.duckduckgo.com">
  • <a id="un-nom-d-ancre">

HTML

Les attributs (attributes)
spéciaux

  • id
  • class
    

HTML

Les autres balises
de head

  • <meta>
  • <script></script>
  • <style></style>
  • <link />

CSS

Les bases : les termes et concepts

  • Règle
  • Sélecteur
  • déclaration
  • propriété
  • valeur