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
Web Dev
By Stanislas Ormières
Web Dev
- 618