Giter Club home page Giter Club logo

yellow-sass's Introduction

Yellow-sass

L'agence Yellow fait appel à votre équipe de création et développement web. Le département créa' a définit les besoins avec le client et une maquette de la page d'accueil a été produite. Votre rôle aujourd'hui en tant que lead intégrateur, est de configurer et mettre en place le projet d'intégration. Vous devrez choisir vos propres outils d'intégration (framework) tout en respectant les recommandations du lead développeur. Le projet devra être intégré au plus prêt de la maquette fournie mais aussi devra adopter une arborscence de fichiers structurée et rangée par type et rôle de fichiers, le département dev-back ne devra pas faire ce travail à votre place !


Consignes

1- Téléchargez/Clonez le projet et ses ressources.

2- Structurez votre projet, créez les fichiers et regroupez les dans leurs dossiers adéquats. Le seul fichier à la racine du projet doit être index.html !

3- Utilisez un framework d'intégration de type Bootstrap, Materialize ou autre (au choix). Vous utiliserez les fichiers sources Sass/Scss du framework choisi. N'utilisez pas le CDN !

4- Examinez la maquette fournie gabarit.png, repérez les différentes sections et élements de la page (boutons, cards, slider, compteur, etc.), les intéractions utilisateurs induites et récupérez les codes hexadécimaux des couleurs primaires et secondaires. Ce seront vos première variables !

5- Intégrez la page d'accueil dans un fichier index.html créé, vous devrez respecter au maximum la maquette fournie. N'oubliez pas de rendre le tout responsive !

!important

  • Vous devez paramétrer votre projet afin de compiler automatiquement vos fichiers Scss sous le nom styles.css dans le dossier css.
  • Votre projet doit être bien struturé, vos fichiers bien rangés dans les bons dossiers, soignez votre arborescence !
  • Votre code doit être bien structuré et lisible, donc soignez votre indentation, et utilisez des fichiers partiels
  • Vous respecterez la méthodologie du framework choisi (BEM, OOCSS ou autre), cela se reflètera dans la création de votre DOM et de vos définitions de styles.

Ressources

Les fonts

Vous avez la possibilité d'utiliser 2 fonts que vous pouvez retrouver sur Google Fonts :

Les icônes

Vous devez utiliser la police d'icônes FontAwesome.

Les images

Toutes les images dont vous avez besoin se trouvent dans le dossier images

yellow-sass's People

Contributors

pedroidmkr avatar jeremy-deurvillier avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.