Télécharger le PDF du cours
Réalisation d’un projet en HTML et CSS : par où commencer ?
Lorsqu’on est face à un projet qui commence à être complexe, la difficulté principale est bien souvent de savoir par où commencer. Cela est d’autant plus vrai lorsqu’on n’a pas beaucoup d’expérience en développement.
La meilleure façon de faire, selon moi, est de commencer par réfléchir aux différents langages qu’on va devoir utiliser et d’identifier les points les plus complexes du projet. Ensuite, l’idée va être de découper le projet dans son ensemble en sous-projets ou en modules qu’on attaquera les uns après les autres.
Dans le cas présent, cela reste relativement simple car nous n’avons qu’une page à créer et que nous nous contentons de n’utiliser que du HTML et du CSS. La réflexion principale va ici se faire sur le design général de la page.
Si on crée une page de CV, nous allons déjà vouloir insérer une photographie avec un paragraphe de présentation et des informations de contact.
Ensuite, nous voudrons présenter nos expériences professionnelles, puis notre formation académique, nos compétences et enfin finir avec nos centres d’intérêt.
Nous allons commencer avec la version mobile de notre CV qui sera la version standard. Pour créer cette version, nous allons utiliser le modèle des boites flexibles en choisissant une orientation en colonne principalement.
Voici le résultat auquel on souhaite parvenir :
See the Pen Cours HTML CSS 15.2.1 by Pierre (@pierregiraud) on CodePen.
Structure HTML de notre page de CV
Comme d’habitude, nous commençons par créer la structure HTML avant de définir les styles particuliers en CSS.
Nous allons déjà ici commencer avec la structure minimale d’une page valide et allons également renseigner le meta name="viewport" et lier notre fichier HTML à un fichier CSS.
Ensuite, nous allons créer une zone d’en-tête pour notre page avec un élément header et allons simplement placer le titre principal de notre page de CV ici.
Sous notre header, nous voulons créer une première section de présentation pour notre CV.
Cette section va contenir :
- Un bloc contenant une photo de profil ;
- Un bloc contenant un paragraphe de présentation et un lien de téléchargement du CV au format PDF ;
- Un bloc d’informations de contact et des liens vers nos réseaux sociaux.
Ici, je vous propose la structure suivante :
On commence par créer un premier bloc avec un div dans lequel on place notre photo de profil. Ensuite, on déclare deux nouveaux div pour chacun de nos deux blocs de section pour pouvoir ensuite les mettre en forme.
Notre premier bloc de contenu possède une structure très simple : un titre, un paragraphe et un lien.
La structure de notre deuxième bloc est un peu plus complexe : on place les différentes informations de contact dans différents div class="contact-flex". L’idée va être de créer des conteneurs flexibles pour aligner les éléments. On crée également un bloc avec nos icônes sociales qui seront cliquables (je laisse ici les liens vides).
A ce stade, je pense qu’il est important que vous notiez une chose : ici, je vous propose une structure en sachant que j’ai déjà réalisé l’exercice. En pratique, bien évidemment, on ne trouvera quasiment jamais la structure optimale du premier coup et serons souvent obligés de revenir sur le code HTML pour l’ajuster.
Pour éviter de trop nombreux allers-retours dans le code et de vous retrouver au final avec un code brouillon, je ne saurais que trop vous recommander de bien réfléchir à ce que vous souhaitez obtenir avant de commencer à coder.
Sous cette première section de présentation, nous allons avoir deux sections qui vont avoir une structure similaire : première une section décrivant nos expériences professionnelles et une seconde avec notre parcours scolaire.
Chacune de ces deux sections va être divisée en blocs, chaque bloc représentant une expérience. Chaque bloc expérience va suivre le même schéma : un logo, des informations « méta » par rapport à l’expérience et une description de celle-ci.
Je vous propose ici la structure suivante :
Pour notre quatrième section présentant nos compétences, nous allons utiliser un système de barres plus ou moins remplies qui vont indiquer notre pourcentage de maitrise de la compétence en question. Ici, je vais vous proposer deux designs différents en CSS.
Dans tous les cas, la structure de cette section va ressembler à notre bloc d’informations de contact de notre première section.
Enfin, notre dernière section va nous permettre de présenter nos centres d’intérêt à travers des vignettes.
Je vais également en profiter pour rajouter un pied de page à mon CV pour avoir un effet de symétrie avec l’en-tête.
Styles CSS de la version mobile de notre CV
Comme on l’a décidé précédemment, nous allons commencer par créer les styles de la version mobile de notre CV qui seront donc les styles standards puis allons ensuite utiliser les Media Queries pour les styles de la version bureau.
Nous allons déjà ici nous occuper d’effectuer un reset CSS des marges internes et externes sur tous nos éléments pour avoir le même comportement dans tous les navigateurs et pouvoir les positionner précisément ensuite.
Nous allons également en profiter pour définir quelques styles généraux comme la police d’écriture, l’alignement par défaut des textes, la façon dont va être calculée la taille des éléments ou encore l’affichage des éléments de lien.
Ensuite, nous allons nous occuper de régler les styles du header et du footer qui sont les parties les plus simples de notre CV.
En version mobile, on va vouloir que le CV s’affiche en pleine page, c’est-à-dire que les différents blocs occupent tout l’espace en largeur et allons ensuite centrer les éléments à l’intérieur de façon à ce qu’on ait un espace vide égal à 5% de la largeur totale de la page de chaque côté.
Pour faire cela, on va demander aux éléments dans nos blocs de n’occuper que 90% de la largeur des blocs qui eux occuperont 100% de la largeur disponible et allons centrer les éléments dans les blocs.
Nous allons ensuite définir les styles généraux communs à toutes nos sections. Nos éléments section vont tous être des conteneurs flexibles et nous allons choisir l’axe horizontal comme axe principal.
Nous allons également aligner les éléments au centre selon l’axe principal (l’axe horizontal donc) avec justify-content : center. Ensuite, on va définir des styles purement esthétiques pour nos sections : couleur de fond, ombres, etc.
Nos éléments section sont des conteneurs flexibles. Cela signifie que tous leurs enfants directs sont des éléments flexibles. Pour notre première section, nos 3 div class="photo-profil", div class="prez" et div class="contact" sont donc des éléments flexibles.
Ces trois blocs occupent par défaut 90% de l’espace disponible en largeur dans le conteneur avec width: 90% tant qu’aucun flex-basis n’est défini. De plus, ils sont alignés au centre selon leur axe principal qui est l’axe horizontal grâce à justify-content : center.
Il va suffire d’ajouter un text-align : center à notre premier div pour centrer notre photo dans la section.
D’un point de vue esthétique, on va régler les dimensions de la photo sur 150*150px et allons lui attribuer une bordure blanche ainsi et allons créer un effet d’ombre autour. Ensuite, on applique un border-radius égal à la moitié de ses dimensions, ce qui aura pour effet « d’arrondir » notre image.
Ici, nous allons également vouloir que notre image se trouve à cheval entre notre header et notre première section. Pour réaliser cela de manière simple, nous allons devoir utiliser un petit trick CSS qui consiste à attribuer une marge haute négative à l’image pour la faire sortir de son conteneur.
Pour notre premier bloc de présentation, nous allons nous contenter d’ajouter une bordure basse et de mettre en forme notre lien de téléchargement.
Notre deuxième bloc contenant nos informations de contact va subir une mise en forme un peu plus complexe. L’idée ici va être d’aligner les informations de contact les unes sous les autres.
Pour cela, on va appliquer un display : flex à nos éléments portant la classe contact-flex en définissant à nouveau l’axe horizontal comme axe principal. On utilise align-items: center pour centrer les éléments en hauteur au cas où certains prendraient plusieurs lignes.
On cible ensuite le premier paragraphe de chaque conteneur flexible avec .contact-flex p:first-child pour lui attribuer une largeur de base égale à 40% du conteneur flexible et le dernier avec .contact-flex p:last-child pour lui attribuer une largeur de base égale à 60% du conteneur flexible. Cela va permettre aux différents couples d’informations d’être bien alignés les uns sous les autres.
On transforme également notre conteneur div class="social" en conteneur flexible. L’axe principal est par défaut l’axe horizontal. On choisit de repartir l’espace libre selon l’axe principal dans le conteneur équitablement entre les différents éléments avec justify-content: space-around.
Ici, on règle manuellement la taille des différents éléments flexibles en définissant explicitement une hauteur et une largeur mais pas de flex-basis.
Nos deuxième et troisième sections de CV vont recevoir la même mise en forme. Ici, chaque expérience est composée de trois blocs : une image, des informations importantes et une description.
Nous allons transformer nos conteneurs div class="exp" qui contiennent une expérience chacun en conteneurs flexibles et allons définir l’axe horizontal comme axe principal.
Nous allons ensuite demander à notre premier élément flexible qui est notre conteneur d’image de n’occuper que 25% de la largeur du conteneur jusqu’à 100px. On règle également la largeur de notre image en soi à 100% de la taille du conteneur.
Notre deuxième élément flexible (exp-info) occupera lui 70% de la largeur et on définit une marge à gauche auto ce qui signifie que la marge va absorber l’espace restant dans le conteneur.
Notre dernier élément flexible va occuper par défaut tout l’espace disponible.
On va ensuite également mettre en forme l’intérieur de nos div class="exp-info". Pour cela, on les transforme également en conteneur flexible et on choisit l’axe vertical comme axe principal. Cela va avoir pour effet d’afficher les différentes informations en colonne.
Pour la section compétence de notre CV HTML et CSS, je vais vous proposer deux designs différents. Nous allons appliquer le premier design au bloc de compétences professionnelles et le deuxième design au bloc de compétences personnelles.
Le niveau de maitrise de nos compétences va être représenté par une barre plus ou moins remplie et plus ou moins verte. Pour nos compétences professionnelles, nous allons vouloir placer les barres à côté des compétences tandis que pour les compétences personnelles nous allons placer les barres en dessous.
On va donc commencer par transformer nos div class="comp" en conteneurs flexibles et définir l’axe horizontal comme axe principal.
Ensuite, on va vouloir que les textes décrivant les compétences occupent 40% de l’espace pour les compétences professionnelles et que le conteneur de barre occupe 60% de l’espace du conteneur.
Ensuite, nous allons devoir créer notre barre en soi. Pour cela, on utilise un display : block pour nos span et une hauteur de 100% afin que les barres aient bien la même hauteur que les paragraphes.
On applique finalement la couleur sur une certaine largeur du conteneur grâce aux classes c85, c90, etc. Pour les barres, on pense bien à répliquer le border-radius du conteneur lorsqu’elles touchent un angle du conteneur afin d’avoir le meilleur rendu possible.
On va également appliquer un display : flex aux conteneurs de nos compétences personnelles, toujours en choisissant l’axe horizontal comme axe principal et en laissant la possibilité aux éléments flexibles de passer à la ligne.
Ici, on utilise également justify-content: space-between pour coller le texte de la compétence contre un bord du conteneur et le pourcentage d’acquisition contre le bord opposé.
On passe un flex: 0 0 100% à nos conteneurs de barre afin qu’ils occupent tout l’espace disponible et passe de fait à la ligne. Ici, on veut créer une barre moins épaisse que précédemment. On définit donc la hauteur du conteneur comme étant égale à la moitié de la hauteur de nos paragraphes. On réutilise ensuite les barres créées précédemment.
Pour la dernière section de notre CV présentant nos centres d’intérêt, nous allons vouloir afficher des vignettes avec une légende en dessous et afficher deux vignettes par ligne en centrant le tout.
On va un flex: 0 1 50% à nos différents éléments flexibles figure et également les transformer en conteneur flex en choisissant cette fois-ci l’axe vertical comme axe principal et en centrant les éléments selon leur axe secondaire, c’est-à-dire horizontalement.
Finalement, on définit une taille fixe pour nos différentes vignettes ainsi qu’un border-radius : 50% afin que nos images apparaissent comme rondes.
Styles CSS de la version bureau de notre CV
Pour la version bureau de notre CV HTML et CSS, nous allons pouvoir nous permettre de placer certains éléments de section côte-côte plutôt que les uns en dessous des autres.
Pour créer cette version bureau, nous allons utiliser la règle CSS @media screen and (min-width: 980px){}. Les styles définis dans cette règle vont donc s’appliquer pour tous les appareils disposant d’un écran et lorsque la fenêtre est plus large que 980px.
Ici, on va déjà commencer par modifier la largeur de nos sections afin qu’elles n’occupent que 80% de la largeur de la page. On en profite également pour aligner notre titre principal sur la nouvelle largeur des sections et pour définir une couleur pour les liens au survol.
L’axe principal de nos sections est encore l’axe horizontal. Notre photo est toujours centrée car le div qui la contient occupe 90% de la largeur de la section, qu’il est lui-même centré et qu’on lui a appliqué un text-align : center.
Nous allons cette fois-ci vouloir que les deux blocs de contenu de la première section de notre CV s’affichent côte-à-côte. On définit donc un flex: 0 0 45% pour chacun et des marges gauche pour le premier et droite pour le second automatique afin qu’elles absorbent l’espace restant. Ici, le flex-basis défini va être prioritaire que la largeur des div.
On remplace également la bordure horizontale de séparation de nos deux blocs par une bordure verticale entre les deux et on en profite pour appliquer des styles à notre lien de téléchargement et notamment au survol de la souris.
Pour nos deux sections suivantes, on se contente de réduire la taille de base des logos dans la section et d’augmenter la taille prise pas les informations. On en profite également pour cette fois-ci aligner la description sous les informations de chaque expérience.
On ne touche pas au design de la section compétence qui nous convient très bien en l’état.
Finalement, on place chacun des blocs représentant nos centres d’intérêt côte-à-côte en définissant un flex: 0 1 25% pour chacun de nos éléments figure.
Vous pouvez trouver le code complet du CV ci-dessous :
See the Pen Cours HTML CSS 15.2.1 by Pierre (@pierregiraud) on CodePen.
