Besoin d'avis sur mon code exercice html & css

5 août 2018 à 15:02:28

bonjour tous le monde

voila j'ai beaucoup lutter mais j'ai enfin réussis a placer ce ptn de liseret de mer** ahhhh ca va mieux nan plus sérieusement je ne crois pas avoir fait ca de la meilleur facon qui soit je suis ouvert a toute les critiques tand qu'elles sont constructive et quel me perméte de progresser ! :-) mon code html

<!doctype html>

<html lang="fr">
	<head>
		<meta charset="UTF-8" />
		<title> cv </title>
		<link rel="stylesheet" href="style.css" />
	</head>

	<body>

		<div id="blocPage">
			<figure id="flotante">
				<img src="Images/liseret.png" alt="un liseret" />
			</figure>
		<header>

				<div id="texte">

				<h1> jonathan Pruvost </h1>
				
				<blockquote>
					Tu as un rêve, tu dois le protéger. Ceux qui en sont incapables te diront que tu en es incapable. Si tu veux quelque chose, bats-toi. Point final   <br>
					   <cite> - Will Smith </cite>
				</blockquote>

				</div>

				<figure id="image">
					<a href="Images/lion.jpeg" target="_blank" ><img src="Images/lion_miniature.jpeg" alt="" class="lion" /></a> 
				</figure>

		</header>

		<article>

			
			<div id="experience">
			<h2> Mon experience </h2>

			<ul>
				<li><span class="annee">De 1999 a 2007 : </span> fondateur du <i>S</i>ite du <i>Z</i>éro : site de cours en ligne pour débutants. Animation le soir et les week end en parralléle de mes études. </li>
				<li><span class="annee1">de 2007 a 2013 : </span> création de simple IT, start-up éditrice du <i>S</i>ite du <i>Z</i>éro. Lancement d'une collection de livres. Evolution du site jusqua 2 millions de visiteurs par mois, avec 20 employés. </li>
				<li><span class="annee2">de 2014 a aujourd'hui :</span> transformation de Simple IT et du <i>S</i>ite du <i>Z</i>éro en une marque unique et globale, OpenClassrooms. Internationalisation, lancement de cours vidéo, d'une collection d'eBooks a la demande et de certficats en ligne. </li>
			</ul>
			</div>

			<div id ="competences">
			<h2> Mes competences </h2>

			<ul>
				<li> linux (<a href="https://openclassrooms.com/fr/course-certificates/5493281946" target="_blank"> certificat openclassroom </a>)</li>
				<li> comprendre le web ( <a href="https://openclassrooms.com/fr/course-certificates/8045694692" target="_blank" >  certificat openclassroom </a> ) </li>
				<li> html5 et css3/en cours ( <a href="https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3"> cours html5 & css3 </a> )   </li>
			</ul>
			</div>
			
			<div id="formation">
			<h2> Ma formation </h2>
				
			<ul>
				<li>J'apprends tous sur le site <a href="https://openclassrooms.com/fr/courses" target="_blank"> OpenClassRoom </a> </li>
			</ul>

			</div>

		</article>
		</div>
	</body>
	
</html>

@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/penSans-Regular-webfont.woff2') format('woff2'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

h1 , blockquote
{
	text-align: center;
}

.annee, .annee1, .annee2
{
	font-weight: bold;
}
body 
{
	font-family: 'open_sansregular'; 
	background-image: url("Images/informatique.jpeg");
    margin: 0;
    padding: 0 0 20px 0;
}

h2 
{
	color: #808000;
}

#flotante
{
    margin: 0;
    float: left;
}

.lion
{
	box-shadow: 6px 6px 6px black
}
header
{
    display: flex;
}
article
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#flotante
{
    float: left;
}

#experience
{
    width: 30%;
}
#competence
{
    width: 20%
}
#formation
{
    width: 30%
}

merci de votre aide :-)

Genroa

5 août 2018 à 17:30:22

Présente ton rendu avec un outil comme codepen. Peu de gens vont s'embêter à copier coller tous les bouts dans un fichier ou outil pour voir le rendu!

/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\

Lucky13

5 août 2018 à 20:48:28

Hello,

            <ul>
                <li><span class="annee">De 1999 a 2007 : </span> fondateur du <i>S</i>ite du <i>Z</i>éro : site de cours en ligne pour débutants. Animation le soir et les week end en parralléle de mes études. </li>
                <li><span class="annee1">de 2007 a 2013 : </span> création de simple IT, start-up éditrice du <i>S</i>ite du <i>Z</i>éro. Lancement d'une collection de livres. Evolution du site jusqua 2 millions de visiteurs par mois, avec 20 employés. </li>
                <li><span class="annee2">de 2014 a aujourd'hui :</span> transformation de Simple IT et du <i>S</i>ite du <i>Z</i>éro en une marque unique et globale, OpenClassrooms. Internationalisation, lancement de cours vidéo, d'une collection d'eBooks a la demande et de certficats en ligne. </li>
            </ul>

.annee, .annee1, .annee2
{
    font-weight: bold;
}

Pourquoi avoir 3 classes différentes pour le même résultat , une suffit...

Et oui créé un codepen ou jsfiddle , de plus on n'a pas ton image de liseret. Une solution (triche), une simple bordure sur la gauche de X px

ps: chouette pluie + orage ce soir

-
Edité par Lucky13 5 août 2018 à 20:52:02

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

MyTalent

5 août 2018 à 21:19:32

bonjour,je m'appelle cheikh et jveux savoir comment faire pour avoir une liste de code;"essentiel" sur le html et le css?

Genroa

5 août 2018 à 21:22:30

Crée ton propre sujet, si tu veux une réponse (si tu ne le fais pas un modérateur va finir par te le dire de toute façon)

Je n'ai pas compris ta question. Mais si tu veux une réponse, crée un nouveau sujet.

/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\

JonathanPruvost1

6 août 2018 à 0:04:11

lucky13

bien vue l'aveugle !

jsfiddle ? comment faire pour les photos ? les dossier avec les poilices d'écriture enfin tous le tralala ? je ne vois rien qui l'explique dans la doc.

genora :

je ne savais même po que ca existait mdr merci de l'info plus qua apprendre a s'en servir

Genroa

6 août 2018 à 0:09:04

jsfiddle n'autorise pas de fichier sur le coté je crois, mais codepen permet d'avoir un projet complet avec images etc il me semble.

/!\ Si je cesse de répondre c'est parce que vous êtes venus poster sans avoir suivi les cours de base sur le sujet. /!\

Mewen_bzh

6 août 2018 à 9:05:51

Bonjour,

Concernant ton code HTML je ne vois pas d'erreurs.

Je te conseille toutefois de ne pas hésiter à utiliser l'une des forces du HTML5 : la sémantique. Par exemple :

<div id ="competences">
	<h2> Mes competences </h2> 
	<ul>
		<li> linux (<a href="https://openclassrooms.com/fr/course-certificates/5493281946" target="_blank"> certificat openclassroom </a>)</li>
		<li> comprendre le web ( <a href="https://openclassrooms.com/fr/course-certificates/8045694692" target="_blank" >  certificat openclassroom </a> ) </li>
		<li> html5 et css3/en cours ( <a href="https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3"> cours html5 & css3 </a> )   </li>
	</ul>
</div>

Ici ta div #competences pourrait être une section plutôt qu'une div non sémantique.

Et ici :

<ul>
	<li>J'apprends tous sur le site <a href="https://openclassrooms.com/fr/courses" target="_blank"> OpenClassRoom </a> </li>
</ul>

Une liste qui ne contient qu'un seul élément de liste est-t-elle toujours une liste ? Ou bien cela devrait-il être un simple p ?

Fais également bien attention à l'indentation de ton code, c'est bien par endroit mais pas constant partout.

Enfin attention à l'écriture de tes attributs : par exemple dans <div id ="competences"> il ne devrait pas y avoir d'espace entre "id" et le signe "=".

En ce qui concerne le CSS :

Pas d'erreur frappante non plus. Fais attention comme cela a été dit de ne pas créer plusieurs classes pour appliquer la même propriété.

D'ailleurs tu as fait la même chose ici :

#experience
{
    width: 30%;
}

#formation
{
    width: 30%
}

Tu pourrais raccourcir cela :

#experience, #formation
{
    width: 30%;
}

Et l'idéal serait une classe commune pour les deux éléments.

Je ne réponds pas aux messages privés.