Avis sur mon code HTML5 et CSS3

**KinderConcept** · 30/06/2014, 16h41

Bonjour .
Je suis un nouveau membre de développez.com.
J'aimerais que vous me donniez vos avis sur le code html5 et css3 de mon site web que voici , je suis encore un grand débutant pourriez vous me donnez quelques conseils et une note sur 20 ? Merci d'avance !
Voici mes codes
index.html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Up Your Account</title>
	<link rel="stylesheet" href="css.css" type="text/css" />
</head>
<body>
	<header>
	</header>
	<div class="rouge"><h2 class="rapide">Rapide</h2><p class="p1"> Notre service vous permet de bla bla bla bla</p></div>
	<div class="bleu"><h2 class="fiable">Fiable</h2><p class="p2"> Notre service vous permet de bla bla bla bla</p></div>
	<footer>
		<span class="bleuban"></span>
		<span class="jauneban"></span>
		<span class="vertban"></span>
		<span class="rougeban"></span>
		<nav>
			<ul>
				<li class="support"><a href="mailto:maildusupport.com">● Un problème , une question ?</a></li>
				<li class="achat"><a href="Achat/index.html">● Achat</a></li>
				<li class="info"><a href="info/info.html">● Informations complémentaires</a></li>
			</ul>
		</nav>
	</footer>
</body>
</html>

css.css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
@media all and (max-width: 620px) {
	body{
		background-image:url(../ressources/images/backgroundmobile.jpg);
	}
}
 
@media all and (min-width: 621px) and (max-width:1000px){
	body{
		background-image:url(../ressources/images/backgroundtablette.jpg);
	}
}
 
@media all and (min-width:1001px) and (max-width:1280px){
	body{
		background-image:url(../ressources/images/background.jpg);
		background-repeat:no-repeat;
	}
}
 
@media all and (min-width:1281px){
	body{
		background-image:url(../ressources/images/grandbackground.jpg);
		background-repeat:no-repeat;
	}
}
 
@media all and (max-width:740px){
	.info{
		display:none;
	}
}
 
header{
	height:150px;
	background-image:url(../ressources/images/logo.png);
	background-repeat:no-repeat;
	background-position:center;
	background-color:rgb(251,253,252);
	border-bottom:3px black solid;
	position:absolute;
	top:0;
	left:0;
	right:0;
}
 
.rouge{
	margin-top:190px;
	height:150px;
	width:150px;
	border-top-left-radius:72px;
	border-bottom-right-radius:72px;
	background-color:#c1574c;
 
}
 
.bleu{
	float:right;
	margin-top:-150px;
	height:150px;
	width:150px;
	border-bottom-left-radius:72px;
	border-top-right-radius:72px;
	background-color:#637e9f;
	margin-bottom:450px;
}
 
div h2{
	color:white;
	font-size:1.5em;
}
 
.rapide{
	margin-left:50px;
}
 
.fiable{
	margin-top:-1px;
	margin-left:25px;
}
 
.p1{
	margin-left:10px;
}
 
.p2{
	margin-left:15px;
}
 
footer{
	clear:both;
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	height:50px;
	background-color:black;
}
 
 
/* Les span qui se trouvent dans le footer */
footer span{ 
	float:left;
	width:25%;
    height:5px;
}
 
.bleuban{
    background-color:#637e9f;
}
 
.jauneban{
	background-color:#e28913;
}
 
.vertban {
    background-color:#2e9e6d
}
 
.rougeban {
    background-color:#c1574c
}
 
li{
	color:white;
	display:inline-block;
}
 
.support{
	float:left;
}
 
.achat{
	width:4em;
	margin-left:32%;
}
 
.info{
	float:right;
	margin-right:15px;
}

**Muchos** · 01/07/2014, 20h54

une note sur 20 ? Pourquoi pas un bon point !

Je dirai juste que la balise NAV n'est pas utile ici, et que les caractères spéciaux décoratifs devraient être placés en CSS (avec ::before par exemple).

En outre, le nom des classes pourrait se concentrer sur la fonction des éléments plutôt que sur leur contenu (que voudra dire ROUGE quand se sera bleu, ou FIABLE quand le texte sera "efficace"…).

Enfin, pourquoi n'afficher le lien "Informations complémentaires" qu'à partir de 740px?

**KinderConcept** · 02/07/2014, 03h13

Un bon point ?
1/20 ?

Pourquoi la balise nav n'est pas utile ? Je suis donc encore sûrement un " noob ". Les caractéres spéciaux décoratifs , comment les placés en css ?
Et je vais modifier le nom des balises pour les rendre plus facilement indentifiables
Et enfin je n'affiche Informations complémentaires qu'a partir de 740 px , car sous cette width le message devient illisible ( trop rétrécit )

**Muchos** · 02/07/2014, 18h52

sous cette width le message devient illisible ( trop rétrécit )

Un tel contenu ne devrait pas disparaître pour une histoire de résolution. La taille des caractères est fixe (ex: px, pt)? En taille relative, ça ne devrait pas changer. Et si oui, les navigateurs ont des zooms.

Les caractéres spéciaux décoratifs , comment les placés en css

Ex:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
ul { list-style-type: "#"; }
/* Les puces deviennent des dièses */
h1::before { content: "#"; }
/* Les titres sont précédés d'un dièse */

Pourquoi la balise nav n'est pas utile ?

NAV sert à un menu de navigation général, ou à une table des matières. C'est inutile pour une poignée de liens d'information, comme dans le deuxième exemple.

PS: Stop avec les notes! On n'est pas à l'école

Avis sur mon code HTML5 et CSS3

HTML

Discussions similaires

Partager

Partager