Bonjour la communauté OCR. Et merci de vous occuper de mon cas !!!
Je reviens à vous et je vais y venir plus souvent pour apprendre.
J'ai rendu mon exercice CV 3, les consignes étaient d utiliser flexbox pour aligner les 3 blocs de CV et d'intégrer une marge sur la gauche.
Quand l'on débute, l'on as beaucoup d"information et coder nous permet de mieux comprendre les structures et les balises, cependant des questions restent sans réponses. Ci dessous j'y joint le code et les questions en premier pour la visibilité du sujet.
CSS: - Q : J'ai utilisé font squirrel et le générateur pour avoir directement le CSS pour adapter les polices. Cependant le nombres de ligne me parait vraiment long ( en taille ). Est ce que je dois les laisser comme ca? pourquoi fontsquirrel réouvre a chaque fois un @font-face pour 2 fichier ?
Q: j'ai pas réussi à faire un bordure-raduis complet sur la photo ou le liseré à gauche, seulement 2 des 4 bords était raduisé !
Q: Est ce que j'ai bien utilisé simplement flexbox et adapté les mesures pour être dans un syteme facilement adaptable au responsive ?
Q: j'ai galeré pour faire le liseré gris, mon idée la plus simple était de couper le background color a 10 % de marge et d'inserer un <p> pour y mettre les infos dedans. Est ce que j'ai bien fait d'utiliser un <p> pour faire ça ? j'imagine que non un aside ou section alors ? ou quoi ?
HTML:
-Est ce que je n'ai pas crée des DIV inutile et utiliser la sémantique adapté ?
Est ce que c'était bien adapté d'utiliser le même class= pour les 3 blocks ? sachant qu'ils ont leurs parents dans un class différant ?
Justement est ce que ca me sert à quelque chose de mettre une classe à section puisqu'il est le parent naturel ?
en checkant sur w3c, j'ai était ravi de voir qu'il n'y avait que 3 erreurs dans le HTML, ca me change des 20 a 25 erreurs du début. Justement dans ces erreurs
première récurrente et que je ne comprends pas.
"Warning:Consider adding a lang attribute to the html start tag to declare the language of this document.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css_cv3.css">
<title>CV BOUVIER PIERRE</title>
</head>
<body>
<div class="allpage" /> <p> infos :</p>
<header>
<div class="photo" />
<h1><mark>CV BOUVIER PIERRE</mark></h1>
<h2>En formation web dev junior, futur entreprenneur<br/><a href="mailto:bouvierpierre.pro@gmail.com">bouvierpierre.pro@gmail.com</a></h2>
</div>
</header>
<section class="bloc_centrale">
<div class="element">
<h3>Mon expérience</h3>
<ul>
<li>2018 / à ce jour : Formation openclassrooms Web dev junior</li>
<li>2017 / 2018 : AVS : assistant de vie scolaire</li>
<li>2015 / 2017 : préparateur de commandes</li>
<li>2013 / 2015 : formation et emploi en temps que monteur dépanneur frigoriste</li>
<li>2010 / 2013 : employé polyvalent en restauration/li>
<li>2001 / 2009 : Militaire dans l'armée de l'air en occupant la fonction de maître chien</li>
</ul>
</div>
<div class="element">
<h3>Ma formation</h3>
<p>Ma formation <a href="https://www.openclassrooms.com">openclassrooms</a> viens de débuter et j'en suis trés content, quel plaisirs d'apprendre un nouveau métier et bien plus, une nouvelle langue. Ce CV est un premier excercice intéressant qui reprends bien tout ce que l'on à vu depuis le début. J'ai hâte de continuer d'apprendre via cette formation <a href="https://www.openclassrooms.com">openclassrooms</a> et de devenir un bon dévellopeur web.</p>
</div>
<div class="element">
<h3>Mes compétences</h3>
<ul>
<li>déterminé</li>
<li>créatif</li>
<li>innovant</li>
<li>stratège</li>
</ul>
</div>
</section>
</div>
</body>
</html>
J'ai utilisé font squirrel et le générateur pour avoir directement le CSS pour adapter les polices. Cependant le nombres de ligne me parait vraiment long ( en taille ). Est ce que je dois les laisser comme ca? pourquoi fontsquirrel réouvre a chaque fois un @font-face pour 2 fichier ?
Il n'y a pas "deux fichiers", il y en a plein. Regarde dans ton dossier fonts, tu verras. Chaque variation de la famille de police est un fichier : light, light italique, normal, normal italique, gras, gras italique, etc. Il faut donc une déclaration pour chaque élément. Par contre, le code fourni par fontsquirrel n'est pas optimal du tout, aussi je te recommande plutôt https://transfonter.org/ ; à lire : https://www.emmanuelbeziat.com/blog/utiliser-les-proprietes-de-police-avec-une-font-web.
Si tu veux que ça fasse moins, il faudra supprimer des variations. À toi de savoir lesquelles tu utiliseras ou n'utiliseras pas.
j'ai pas réussi à faire un bordure-raduis complet sur la photo ou le liseré à gauche, seulement 2 des 4 bords était raduisé !
C'est où dans ton code ? Montre-nous ce que tu as essayé de faire.
Est ce que j'ai bien utilisé simplement flexbox et adapté les mesures pour être dans un syteme facilement adaptable au responsive ?
Trop de pourcentages, à mon sens. Notamment, les marges n'ont absolument pas à être variables en fonction de la taille du navigateur. Mais sinon, teste le résultat pour voir toi-même si ça fonctionne ou non.
j'ai galeré pour faire le liseré gris, mon idée la plus simple était de couper le background color a 10 % de marge et d'inserer un
pour y mettre les infos dedans. Est ce que j'ai bien fait d'utiliser un
pour faire ça ? j'imagine que non un aside ou section alors ? ou quoi ?
Non, un <p> est fait pour séparer un bloc de texte en paragraphes, pas autre chose. En l'occurrence, tu aurais dû utiliser un div. Mais le plus simple, ce serait encore de mettre un simple border-left sur body.
Est ce que je n'ai pas crée des DIV inutile et utiliser la sémantique adapté ?
Pas spécialement de div inutile, mais pour améliorer, il faudrait que ta balise section soit une balise main, et que tes div à l'intérieur soient des balises section.
Est ce que c'était bien adapté d'utiliser le même class= pour les 3 blocks ? sachant qu'ils ont leurs parents dans un class différant ?
Oui. La classe du parent n'a aucun rapport. Tu mets tes classes où tu veux. C'est juste à toi de faire en sorte que leur nommage ait un sens.
Justement est ce que ca me sert à quelque chose de mettre une classe à section puisqu'il est le parent naturel ?
S'il doit recevoir du CSS, alors oui. Tu utiliseras cette classe pour le cibler.
Maintenant, pour ce qui est des erreurs, elles sont explicites. Lis l'intitulé, tout simplement. Il t'indique même les lignes.
La première n'est pas une erreur, mais un simple warning. Il te suggère d'ajouter un attribut lang="fr" sur ta balise html pour spécifier la langue du site.
La seconde et la troisième te disent que tu as fermé un élément comme si c'était un autofermant, alors que ce n'est pas le cas. On ne fait pas ça :
<div />
Tout simplement.
- Edité par EmmanuelBeziat 23 avril 2018 à 19:12:45
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Merci manu d'avoir pris le temps de répondre pour à mes questions, je vais bosser la dessus.
Quelques question sur mon code
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !