Bonjour,

Voilà j'ai pour projet de monter mon site web pour proposé un service d'assemblage PC.

Etant debutant j'aimerais avoir vos critiques sur mon code et enventuellement des pistes d'ameliorations.

Je vous joins et vous joindrez l'évolution de mon code au fur et à mesure.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="test.css" />
        <title>GrN - Montage PC</title>  <!-- Titre qui apparaît sur l'onglet et la recherche Google -->
    </head>

    <body>
        <div id="bloc_page">
            <header>
                <div id="titre_principal">
                    <div id='logo'>
                        <img src="MINIICONE.PNG" alt="Logo de GrN">
                        <h1>N </h1>
                    </div>
                </div>

                <nav>
                    <ul>
                        <li class="service"> <a href="#">MON SERVICE</a></li>
                        <li class="realisation"> <a href="#">REALISATION</a></li>
                        <li class="contact"> <a href="">CONTACT</a></li>
                    </ul>
                </nav>
            </header>

            <section>

                <article>
                    <h1><img src="imageservice.png" alt="Catégorie mon service" class="ico_service">Service proposé</h1>
                    <p>Je vous propose de vous accompagner dans l'élaboration de votre PC.</p>
                    <p>Pour cela il vous suffit de remplir le formulaire ci-dessous.</p>
                </article>  

                <aside>
                    <img src="billet.png" alt="Tarif" class="ico_tarif">
                    <p>100€</p>
                </aside>
            </section>

            <footer>
                <div id="reseau">
                     <a href="https://www.twitch.tv/grnstream" target="_blank"><img src="minitwitch.png" class="ImageTwitch" title="GrNstream"> </a><!-- icône Twitch qui renvoi sur ma chaîne avec ouverture forcé -->
                </div>
            </footer>
        </div>
    </body>
</html>
/* Definition des polices personnalisées */

@font-face 
{
    font-family: 'Muthiara';
    src: url('police/Muthiara.otf');
    font-weight: normal;
    font-style: normal;
}

@font-face 
{
    font-family: 'edosz';
    src: url('police/edosz.ttf');
    font-weight: normal;
    font-style: normal;
}

/* Elements principaux de la page */

Body
{
    margin: 0;
    font-family: Trebuchet MS, sans-serif;
    color: lightgrey;
    background-image: url("fond page2.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

#bloc_page
{
    width: 100%;
}

nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
}

article h1
{
    font-family: 'edosz', sans-serif;
    font-weight: normal;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: underline;
}

/* Header */

header
{
    background-color: black;
    display: flex;
}

#titre_principal
{
    display: flex;
    flex-direction: column;
}

#logo
{
    margin-block-start: 0.5em;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin-left: 50px;

}

header h1
{
    font-family: 'Muthiara', sans-serif;
    font-size: 1em;
    color: rgb(36, 255, 0);
}

/* Navigation */

nav
{
    margin-left: auto;
    margin-right: auto;
}

nav ul
{
    list-style-type: none;
    display: flex;
}

nav li
{
    margin-right: 30px;
}

nav a
{
    font-size: 1.5em;
    color: whitesmoke;
    text-decoration: none;
}

nav a:hover
{
    color: rgb(255, 192, 0);
    border-bottom: 3px solid rgb(105, 164, 217);
}

/* Corps */

section
{
    display: flex;
    margin-bottom: 20px;
    font-family: 'edosz', sans-serif;
}

article, aside
{
    text-align: justify;
}

article
{
    padding-left: 100px;
    font-size: 1.3em;
    margin-right: 2.5%;
}

.ico_service
{
    margin-right: 10px;
}

article p
{
    font-size: 0.8em;
}

aside
{
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px; /* Arrondi les angles */
    color: darkgrey;
    font-size: 1em;
    text-align: center;
    margin-block-start: 1em;
    margin-block-end: 1em;
}

/* Footer */

footer
{
    background-image: url("footer.jpg");
    background-size: cover;
    position:absolute;
    bottom: 0;
    width:100%;
}

#reseau
{
    vertical-align: middle;
    margin-left: 2.5%;
}

Avez vous des premières critiques et pistes d'améliorations ?

Merci
GrN

1 réponse


Salut, comme j'ai remarqué que tu n'avais toujours pas de réponses, je me permets.

C'est pas mal dans l'ensemble, il y a quand même des petits points d'amélioration dans ton code.

Premièrement, je te conseille d'ajouter ça dans ton head :

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="La description de mon site. elle s'affiche en dessous du <title> quand on fait une 
recherche google">

plus d'information sur ces balises :

Deuxièmement, nomme tes identifiants et classes en anglais, c'est une bonne pratique.

Troisièmement, c'est personnel mais je préfère mettre les accolades comme ça :


#header-container {
    // code css
}

Pour moi c'est plus lisible et ça prends moins de lignes (encore une fois c'est comme tu veux).

Si tu débutes, je te conseille de regarder cet article qui parle des sélecteurs css.

Les sélecteurs CSS avancés indispensables

Bonne après midi.