Codekit
Projet académique – Développement front-end
Ux – Code – Github
Contexte & problématique
Le projet codekit est une maîtrise des bases du développement front-end et de compréhension des principes d’interaction.
La problématique centrale reposait sur la création de composants à la fois fonctionnels, clairs et respectueux des bonnes pratiques UX et de code. Le projet interroge la capacité à produire un code propre, compréhensible et modulable.
Objectif du projet
- Développer en HTML, CSS, JavaScript
- Respecter les standards UX
- Mettre en place des interactions claires
- Publier le projet sur GitHub
Etapes du projet
Méthode BEM
Pour ce nouveau projet nous avons vu une nouvelle méthode pour écrire de l’html avec des classes pour le css. La méthode BEM permet de faire block__element—modifier. Ça nous permet d’éviter de répéter des classes ou de nommer trop de fois une classe comme ça juste avec l’élément à modifier on peut rassembler pleins d'éléments qui vont avoir la même chose à être modifier.Au début c’est dur de savoir comment bien écrire la méthode mais avec l’habitude ça rentre tout seul dans notre tête et ça s’écrit tout seul.
Suivre les cours
Pour réussir ce cour’ c’était très simple il fallait juste venir au cours, suivre le cours, écouter le cours et réécrire les lignes de codes. C’était simple de faire les lignes de code car on avait l’aide du professeur au cas où on avait des questions. Ce sont des bouts de codes faciles à utiliser et à améliorer pour nos projets personnels. Donc c’est un plus pour nous d’avoir eu ce cours.
Burger menu
Pour commencer le burger menu c’est ce qu’on retrouve sur tous les sites ou applications en ce moment. Avant ça ressemblait à un burger mais maintenant il peut ressembler à n’importe quoi. On le retrouve principalement sur les versions mobile et c’est possible aussi de le retrouver sur tablette et ordinateur. Sur l’image d’âpre j’illustre ce burger menu mais je doute pas que vous connaissiez pas le menu burger.
Slider
Un slider c’est par exemple trois projets et qu’on veut en voir qu’un à la fois. Alors on fait une mise en page et on ajoute des flèches pour passer de l’un à l’autre, ça permet de faire une belle mise en page pour présenter des projets. Et en format téléphone on fait souvent un slide avec le doigt, on évite de mettre des boutons parce que c’est trop petit pour mettre un bouton.
Tabs
Les tabs sont un composants d’interface (des onglets) qui permet de regrouper plusieurs contenus dans un même espace. Chaque onglet correspond à une section différente. Son contenu est affiché lorsqu’on le sélectionne. Cela permet une meilleure navigation sur le site web pour l’utilisateur et ça évite aussi de surcharger la page avec trop d'informations à la suite.
Github
Github c’est une plate-forme qui nous permet de poster nos bouts de code, ou alors de chercher des bouts de code. Ça nous permet aussi de faire des travaux de groupe ou chacun peut bosser sur sa partie et mettre tout en commun après sans avoir de conflit normalement. Au début de l’utilisation de Github c’est pas facile à comprendre comment poster nos bouts de code mais une fois qu’on a l’habitude c’est facile à faire.
