--- title: BlackRockDigital évaluation tags: evaluation, html, css robots: noindex, nofollow author: Julien Noyer --- # Evaluation HTML/CSS BlackRockDigital Vous devez réaliser une page web complète au format HTML et CSS. L’intégration doit être faite par étapes, chacune d’entre elles doit bien être validée avant de passer à l’étape suivante. Ce document de présentation à pour but de vous décrire la totalité des tâches que vous devez réaliser pour mener à bien votre évaluation, prenez le temps de lire ce document avant de commencer à travailler.! ![](https://i.imgur.com/43x9Vc6.jpg) ## Etapes à suivre ### Sources du projet Avannt de commencer vous deveez télécharger les sources qui vous perrmettrons de réaliser cette évaluation via le lien suivant : [https://we.tl/t-cvUpAtr2cn](https://we.tl/t-cvUpAtr2cn) [https://we.tl/t-WY19nq023z](https://we.tl/t-WY19nq023z) ### Intégration du contenu HTML Créez votre fichier HTML est ajoutez y toutes les balises dont vous avez besoin pour la création de la page. Il vous est conseillé de n’utiliser que des balises sémantiques HTML5 mais ne perdez pas trop de temps à hésiter si vous doutez et utilisez celle qui vous conviendra. > NB : si vous pensez à vos sélecteurs en même temps, votre intégration du CSS sera plus rapide. ### Intégration du design CSS Une fois votre DOM prêt, ajoutez votre feuille de style pour créer le design de la page. Vous pouvez utiliser le mode de sélection de balises qui vous convient le mieux mais soyez très vigilant au nommage de vos class ou de vos id. --- # Intégration du contenu HTML Cette première partie de travail doit vous permettre de mettre en place toutes les balises HTML, pensez à respecter un maximum de bonnes pratiques. Pour intégrer les pictogrammes dea partie __"At Your Service"__ sont à intégrer ave [Fontawesome](https://fontawesome.com/icons?from=io), vous devez dans un premier temps ajouter la ligne suivante dans votre fichier HTML : ```html <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> ``` Une fois le CSS intégrer vous devez utiliser les code suivant pour faire apparaître les pictogrammes : * <i class="fa fa-diamond" aria-hidden="true"></i> Diamant `<i class="fa fa-diamond" aria-hidden="true"></i>` * <i class="fa fa-paper-plane" aria-hidden="true"></i> Avion `<i class="fa fa-paper-plane" aria-hidden="true"></i>` - <i class="fa fa-newspaper-o" aria-hidden="true"></i> Journal `<i class="fa fa-newspaper-o" aria-hidden="true"></i>` - <i class="fa fa-heart" aria-hidden="true"></i> Cœur `<i class="fa fa-heart" aria-hidden="true"></i>` ![](https://i.imgur.com/k2Dd5c3.jpg) --- # Intégration du design CSS Vous avez à votre disposition tous les éléments de la page, vous devez les utiliser et les intégrer correctement en vous assurant de la bonne nomenclature du dossier. Pour réaliser l'intégration du CSS vous llez devoir utiliser des polices [Google Fonnts](https://fonts.google.com), vous devez dans un premier temps ajouter la ligne suivante dans votre fichier HTML : ```html <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather|Open+Sans:400,700"> ``` L'utilisation des polices de caratères se fait ensuite de cette manière : ```css body{ font-family: 'Merriweather', serif; } h1, h2, h3 { font-family: 'Open Sans', sans-serif; font-weight: 400; } ``` ## Charte graphique * Référence pour le orange : eb5f3f * Référence pour le gris : 222222 * Talle du texte courant : 15 pixel * Talle des titres : * YOUR FAVORITE SOURCE... : 50px * We've got what you need! : 30px * At Your Service : 30px * Free Download at Start Bootstrap! : 30px * Let's Get In Touch! : 30px * Largeur des éléments : * Menu : 950px * Titre "YOUR FAVORITE SOURCE..." : 850px * Texte "Start Bootstrap can help..." : 650px * Texte Start Bootstrap has everything... : 650px * Zone "At Your Service" : 950px * Zone "Let's Get In Touch" : 650px * Image de fond ![](https://i.imgur.com/j9aJWjY.jpg) --- # Critères dévaluation Un travail bien fait sera toujours valorisé face à un travail vite fait, les critères d'évaluations sont les suivants : * __6pts__ : Indentation, commentaire, nommage des sélecteurs, nomenclature du dossier de rendu * __7pts__ : Intégration HTML, sémantique, organisation * __7pts__ : Intégration CSS, organisation, gestion des sélecteurs --- # Dossier de rendu La retitution de votre dossier de rendu doit être fait __au format .zip obligatoirement__ que vous devez ensuite envoyer via __[Wetransfer](https://wetransfer.com)__ à l'adresse suivante : * julien@dwsapp.io ### Bon courage !