Oh my code! Je crée mon premier site web

Oh my code!

Avant-propos

Sommaire

1. Je plonge dans le code (sans me noyer)

Qu’est-ce qu’une page web?

Le rôle du navigateur

Le code source d’une page web

J’apprends à parler au navigateur

Votre page personnelle

Utilisation d’un éditeur de texte

Je crée le dossier de mon projet

Je prépare mon document

J’écris ma première ligne de code

À quoi sert le langage HTML?

Plus de contenu avec les balises

J’ajoute du texte

HTML, la structure de toute page web

2. J’utilise mes premières balises

Le modèle de page

La section hero

La section à propos

La section services

La section lead

La section réseaux sociaux

Le modal

Une question de design

Je prépare mes images

Images et dimensions

Où trouver de belles images?

Je commence à coder mon site

Je crée le menu

Je crée le contenu du bandeau

3. Je m’exprime avec style

Mon premier style avec CSS

Je crée ma feuille de styles

Je définis mon premier style

Retour sur la syntaxe CSS

J’ajoute plus de styles

Je change la couleur du texte

Je change la taille du texte

J’ajoute des effets au survol

Je modifie la police

4. J’organise mon contenu

Des boîtes!

À quoi ressemble une DIV?

Je veux créer une DIV!

Je structure ma page avec les DIV

Je modifie la structure HTML

Je donne du style aux boîtes

Je donne des dimensions aux boîtes

5. Je booste ma page

Hérédité et ciblage

Je cible un élément

Je crée le bouton Contactez-moi

De belles propriétés en héritage

Au survol

J’ai un nouveau message

J’adapte

J’ajoute des effets

Tout en douceur : les transitions

Rien n’est figé, tout se transforme

Des sections flexibles

J’ajoute des sections à ma page

Je modifie le CSS en toute flexibilité

J’adapte avec les Media Queries

6. Hébergement et visibilité

Je mets mon site en ligne

En local/à distance

Je choisis un hébergement web

Je choisis une adresse

Je déménage avec FTP

Je modifie mon site

Je gère mon site avec des outils performants

J’analyse avec Google Analytics

Je garde contact avec mes visiteurs

Je finalise mon site

Je crée la section footer

Je modifie le style du footer

7. Je dynamise mon site

JavaScript, tour d’horizon

Les usages

J’écris en JavaScript

Je crée un nouveau fichier

Premiers scripts

Je crée un modal

J’utilise JavaScript

Bonus

Questions/réponses

PHP, Python, Ruby… pourquoi tous ces langages?

WordPress, qu’est-ce que c’est?

Bootstrap, c’est quoi?

Trois modèles de pages

Modèle Save The Date

Modèle Restaurant

Modèle Boutique de mobilier

Liens utiles

MDN WebDocs

Balises HTML

Propriétés CSS

Langage JavaScript

Vérifier la compatibilité avec les navigateurs

Poser des questions

Index