AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Avis sur Un Codage ||

    Partagez
    avatar
    Fuyu
    FémininAge : 27Messages : 11

    le Lun 17 Avr 2017 - 16:54

    Bijour :3
    Je me suis mis depuis peu au codage et grâce à vos "cours",
    J'ai réussi à faire un codage plutôt correcte :)
    Je voulais vous demandez votre avis afin de savoir ce qu'il faut que j'améliore ou ce qui est juste. Merci d'Avance :cow:




    LE TITRE

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper. Curabitur varius euismod scelerisque. In hac habitasse platea dictumst. Aenean nec ornare mi, in mattis felis. Sed imperdiet eros eget nulla sodales rhoncus rhoncus in magna. Aliquam fringilla diam vitae condimentum rhoncus. Morbi condimentum, est ut pharetra imperdiet, eros risus aliquet metus, nec sodales sapien leo sit amet elit. Curabitur eu fringilla nisi.

    Nulla eget aliquam sapien, non porta est. Donec cursus placerat augue. Nunc lacinia bibendum diam sit amet semper. Duis sodales massa nibh, id venenatis tortor aliquet sed. Nulla placerat egestas erat sed pharetra. Nullam quis tincidunt mi. Donec vel condimentum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Curabitur ac ultrices tellus. Vestibulum ultricies quam vel hendrerit scelerisque. Praesent molestie, velit hendrerit egestas porta, sapien turpis hendrerit erat, quis facilisis dui libero id nulla. Aliquam bibendum purus sit amet diam consequat, a mollis elit egestas. Vestibulum tincidunt justo vitae risus blandit dignissim. Nulla facilisi. Suspendisse porttitor consequat purus, eget adipiscing ligula pulvinar vel. Phasellus pellentesque lectus id odio semper, non porta elit sagittis. Vestibulum nec ante orci. Donec at lobortis risus, vitae hendrerit massa. Ut sed semper ante, in semper leo. Maecenas et sodales orci. Vivamus sit amet tempus quam. Pellentesque vitae metus viverra, consequat ipsum id, viverra augue. Phasellus tempor ante quis nisl elementum, ac vestibulum leo porttitor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper. Curabitur varius euismod scelerisque. In hac habitasse platea dictumst. Aenean nec ornare mi, in mattis felis. Sed imperdiet eros eget nulla sodales rhoncus rhoncus in magna. Aliquam fringilla diam vitae condimentum rhoncus. Morbi condimentum, est ut pharetra imperdiet, eros risus aliquet metus, nec sodales sapien leo sit amet elit. Curabitur eu fringilla nisi.

    Nulla eget aliquam sapien, non porta est. Donec cursus placerat augue. Nunc lacinia bibendum diam sit amet semper. Duis sodales massa nibh, id venenatis tortor aliquet sed. Nulla placerat egestas erat sed pharetra. Nullam quis tincidunt mi. Donec vel condimentum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Curabitur ac ultrices tellus. Vestibulum ultricies quam vel hendrerit scelerisque. Praesent molestie, velit hendrerit egestas porta, sapien turpis hendrerit erat, quis facilisis dui libero id nulla. Aliquam bibendum purus sit amet diam consequat, a mollis elit egestas. Vestibulum tincidunt justo vitae risus blandit dignissim. Nulla facilisi. Suspendisse porttitor consequat purus, eget adipiscing ligula pulvinar vel. Phasellus pellentesque lectus id odio semper, non porta elit sagittis. Vestibulum nec ante orci. Donec at lobortis risus, vitae hendrerit massa. Ut sed semper ante, in semper leo. Maecenas et sodales orci. Vivamus sit amet tempus quam. Pellentesque vitae metus viverra, consequat ipsum id, viverra augue. Phasellus tempor ante quis nisl elementum, ac vestibulum leo porttitor.
    © Codage LDD by Fuyu.


    Le Petit Code :3

    Code:

    <div style="margin: auto; width: 553px; background-color: white; padding: 4px;"><div style="border: solid 2px white; margin-right:10px; min-width: 550px: max-width: 550px;"><img src="http://www.zupimages.net/up/17/15/fr9i.jpg"/></div><div style="background-color: black;"><link href="https://fonts.googleapis.com/css?family=Graduate" rel="stylesheet"><div style="font-family: 'Graduate', cursive;"><span style="display: block; font-size: 30px; color: white; border-bottom: double 2px white; margin: auto; padding: 20px; text-align: center;"><br> LE TITRE </div></span><link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet"><div style="font-family: 'Karla', sans-serif;"><span style="display: block; text-align: justify; color: grey; padding: 10px; width: 500px; margin: auto;"></br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper. Curabitur varius euismod scelerisque. In hac habitasse platea dictumst. Aenean nec ornare mi, in mattis felis. Sed imperdiet eros eget nulla sodales rhoncus rhoncus in magna. Aliquam fringilla diam vitae condimentum rhoncus. Morbi condimentum, est ut pharetra imperdiet, eros risus aliquet metus, nec sodales sapien leo sit amet elit. Curabitur eu fringilla nisi.

    Nulla eget aliquam sapien, non porta est. Donec cursus placerat augue. Nunc lacinia bibendum diam sit amet semper. Duis sodales massa nibh, id venenatis tortor aliquet sed. Nulla placerat egestas erat sed pharetra. Nullam quis tincidunt mi. Donec vel condimentum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Curabitur ac ultrices tellus. Vestibulum ultricies quam vel hendrerit scelerisque. Praesent molestie, velit hendrerit egestas porta, sapien turpis hendrerit erat, quis facilisis dui libero id nulla. Aliquam bibendum purus sit amet diam consequat, a mollis elit egestas. Vestibulum tincidunt justo vitae risus blandit dignissim. Nulla facilisi. Suspendisse porttitor consequat purus, eget adipiscing ligula pulvinar vel. Phasellus pellentesque lectus id odio semper, non porta elit sagittis. Vestibulum nec ante orci. Donec at lobortis risus, vitae hendrerit massa. Ut sed semper ante, in semper leo. Maecenas et sodales orci. Vivamus sit amet tempus quam. Pellentesque vitae metus viverra, consequat ipsum id, viverra augue. Phasellus tempor ante quis nisl elementum, ac vestibulum leo porttitor.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec dolor lacus. Donec at mollis lectus. Pellentesque vulputate magna vel lectus tristique, sit amet laoreet ante commodo. Sed eu nibh ut ligula blandit rutrum. Maecenas quis dignissim metus, sit amet eleifend lorem. Curabitur fermentum massa quis sapien posuere, et dignissim libero vulputate. Ut posuere feugiat ullamcorper. Curabitur varius euismod scelerisque. In hac habitasse platea dictumst. Aenean nec ornare mi, in mattis felis. Sed imperdiet eros eget nulla sodales rhoncus rhoncus in magna. Aliquam fringilla diam vitae condimentum rhoncus. Morbi condimentum, est ut pharetra imperdiet, eros risus aliquet metus, nec sodales sapien leo sit amet elit. Curabitur eu fringilla nisi.

    Nulla eget aliquam sapien, non porta est. Donec cursus placerat augue. Nunc lacinia bibendum diam sit amet semper. Duis sodales massa nibh, id venenatis tortor aliquet sed. Nulla placerat egestas erat sed pharetra. Nullam quis tincidunt mi. Donec vel condimentum nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Curabitur ac ultrices tellus. Vestibulum ultricies quam vel hendrerit scelerisque. Praesent molestie, velit hendrerit egestas porta, sapien turpis hendrerit erat, quis facilisis dui libero id nulla. Aliquam bibendum purus sit amet diam consequat, a mollis elit egestas. Vestibulum tincidunt justo vitae risus blandit dignissim. Nulla facilisi. Suspendisse porttitor consequat purus, eget adipiscing ligula pulvinar vel. Phasellus pellentesque lectus id odio semper, non porta elit sagittis. Vestibulum nec ante orci. Donec at lobortis risus, vitae hendrerit massa. Ut sed semper ante, in semper leo. Maecenas et sodales orci. Vivamus sit amet tempus quam. Pellentesque vitae metus viverra, consequat ipsum id, viverra augue. Phasellus tempor ante quis nisl elementum, ac vestibulum leo porttitor.</div><div style="text-align: center; color: white; font-size: 10px;">© Codage LDD by Fuyu.</div></div></span></div></div>
    avatar
    Shaneliae
    FémininAge : 20Messages : 790

    le Lun 17 Avr 2017 - 17:44

    Comme promis voici un petit avis !

    Vu que tu débutes, je vais être indulgente sur ton code et te donner quelques petits conseils pour t'améliorer. Je ne vais pas te dire tout ce qu'il y a à corriger, tu verras tes erreurs en apprenant mais je vais déjà t'en signaler quelques unes qui sont "grosses" et t'expliquer comment corriger et pourquoi il faut éviter de faire comme ça ! (oui, j'aimerais devenir critique de code /OUT/)

    • Le rendu global :
    J'aime beaucoup le rendu global de ton code, ta fiche est simple mais agréable à regarder ! Et j'aime beaucoup cette photo de chat :3
    Personnellement, j'ai tendance à préférer les images d'en-tête étant un peu plus large que haute et les fiches plus larges (environ 750px de large) mais c'est plus un avis personnel de ce côté. La fiche reste belle et agréable !
    Le titre est sympa, je l'aime bien avec une typo qui se lit bien, seul petit bémol, l'espace en haut et en bas de ton titre n'est pas le même par rapport aux traits l'encadrant. Cela est dû à ton "br" placé dans ton titre qui fait un saut de ligne. Esthétiquement ce détail peut attirer l’œil et rendre désagréable même si ce n'est pas grand chose.
    Au niveau du choix des couleurs, c'est pas mal je trouve, tu es assez limite au niveau contraste pour ton texte en gris mais ça passe quand même. L'idéal pour avoir un contraste qui se lira bien par tout le monde et qui ne fasse pas mal aux yeux est un gris foncé pas totalement noir et un blanc un peu cassé. C'est un petit truc qu'on nous apprend à l'école Wink Si à l'avenir tu veux vérifier ton contraste pour tes fiches,je te conseille ce petit outil : http://leaverou.github.io
    Autre petit détail qu'on nous apprend pour rendre un texte plus lisible : bannir le texte justifié ! Esthétiquement un long texte justifié est agréable à voir, c'est vrai, mais un texte justifié sur un écran est plus difficile à lire qu'un texte non justifié ce qui entraîne une fatigue oculaire plus rapide. C'est certes un détail, mais le savoir est toujours bon quand on veut qu'une fiche soit avant tout lisible facilement Wink

    • Le code :
    Le code est globalement correct pour ton niveau je vais juste signaler quelques petites choses.
    - Le lien de Google font : On évite d'en mettre plusieurs dans son code, ça entraîne le chargement à plusieurs reprises vers google font alors qu'un seul gros lien ne fait le chargement qu'une fois. A l'avenir sélectionne donc toutes tes typos sur Google Font pour ne faire qu'un lien, et met ce lien au tout début de ton code, les typos seront ainsi chargées directement et tu pourras les utiliser sans soucis. Cela évite aussi de mettre les liens dans ton code ce qui le rend complexe. Pour s'y retrouver et ne pas avoir mal à la tête : rendre son code clair et lisible !
    - L'utilisation de styles et class : je sais que tu débutes, mais c'est une chose que je conseille rapidement à des débutants en code, c'est l'utilisation de class et id afin de séparer le CSS du HTML, toujours dans l'optique de faciliter le code. Au début cela va être difficile parce que tu préfère avoir ta petite balise style pour savoir à quel élément s'applique ton style, mais à force de coder, tu apprécieras ce principe Wink
    Pour t'aider je te conseille ces liens du cursus : http://www.never-utopia.com/t49955-partie-2-etape-1b-annexe-differencier-id-et-class et http://www.never-utopia.com/t53559-partie-2-etape-1-fonctionnement-de-la-feuille-de-style-css
    - Je vois que tu as utilisé beaucoup de balises dans ton code, et c'est normal quand on débute ^^ Je ne vais pas trop m'attarder là dessus parce qu'il faudrait analyser point par point ton code et te dire pourquoi faire ça ou pas ça, et je ne sais pas si tu c'est ce que tu veux x)
    Je vais plutôt donner un conseil : quand tu réfléchis à ta fiche, avant de coder fais toi un petit dessin sur une feuille de ce que tu veux faire comme ça tu réfléchis à la structure de ton code. Tu fais d'abord ton HTML sans CSS afin de bien avoir ta structure et de vérifier qu'elle est correcte, et ensuite tu ajoutes ton CSS tout doucement, élément par élément. C'est une façon de faire que j'apprécie ça permet de ne pas se perdre dans son code Wink

    Bravo pour cette première fiche en tous cas, je l'apprécie beaucoup ! Very Happy




      La date/heure actuelle est Lun 29 Mai 2017 - 17:17