Objectifs

• Construire une page structurée en HTML
• Appliquer des styles CSS
• Positionner des éléments avec différentes techniques (display, float, flex)
• Savoir changer de branches git

Playground

Vous allez transformer votre CV en une jolie page HTML/CSS :)

Pour cela vous allez créer 2 fichiers dans un dossier créé exprès pour l'occasion. 1 fichier index.html pour l'HTML et un fichier styles.css pour y mettre les styles CSS de votre CV.

Pour vous aidez voici quelques ressources :

• Créer une page HTML/CSS. Suivre les parties 1, 2, 3 et il n'est pas nécessaire de faire les activités de ces parties.
• Mise en page

Mais comme c'est trop easy vous allez avoir quelques contraintes...

Contraintes

Votre CV doit être versionné avec git.

Vous aller devoir créer votre cv en suivant différentes étapes.

Mon premier CV HTML

Tout mettre dans la page index.html, même les styles CSS.

Séparer le fond de la forme

Mettre tous les styles CSS dans le fichier prévu pour. C'est à dire styles.css, sans oublier de la lier à votre page index.html

Petite question : quel est le fond et quelle est la forme entre HTML et CSS ?

Aligner des blocs avec display

Pour cette étape, avec git, vous devez créer une nouvelle branche que vous appellerez align-display.

Une fois la branche créée, basculez sur celle-ci. Puis vous devrez modifier votre code pour aligner 2 ou 3 blocs horizontalement sur la même ligne en utilisant la propriété CSS display (avec les bonnes valeurs :). Par exemple, alignez le bloc de texte compétences et diplômes l'un côté de l'autre

Aligner des blocs avec float

Avec git, revenez sur la branche principal (master).

Créez une nouvelle branche que vous appellerez align-float

Une fois la branche créée, basculez sur celle-ci. Puis vous devrez modifier votre code pour aligner les même blocs précédent en utilisant la propriété CSS float (avec les bonnes valeurs :)

Aligner des blocs avec flex

Avec git, revenez sur la branche principal (master).

Créez une nouvelle branche que vous appellerez align-flex

Une fois la branche créée, basculez sur celle-ci. Puis vous devrez modifier votre code pour aligner les même blocs précédent en utilisant la propriété CSS flex (avec les bonnes valeurs :)

Aller plus loin

Vous pouvez :

• transformer chaque section de votre CV en page HTML.
• Ajouter des effets de textes et d'animations sur vos éléments.
• Chercher ce que c'est un portfolio et trouver des exemples