Projets

Print It! P8- Premiers pas sur le langage JavaScript Scénario Je débute comme développeur front-end en freelance, et viens de décrocher une offre pour dynamiser le site internet statique d’une petite imprimerie familiale nommée Print it. Il faut remplacer la bannière actuelle pas un slider d’images. Il doit comporter 2 flèches de chaque côté afin de pouvoir naviguer entre les différentes images et ceci à l’infini. Il faut également que l’on puisse ajouter ou supprimer des images du slider facilement . La partie CSS du projet à déjà été intégré je n’aurai qu’a modifier le fichier HTML et intégré le fichier JavaScript.Enfin j’ai crée un repository de ce projet sur GitHub. Mission: Mettre à jour le code HTML  Ajouter des eventListener sur les flèches  Ajouter des bullets points au Slider  Modifier le slide au clic sur le bouton Mettre en place de défilement infini du carrousel  Process: J’ai tout d’abord créé une bibliothèque contenant la liste des données (image et texte affiché). Cela va permettre d’ajouter ou supprimer facilement les données d’une image. J’ai ensuite remplacé la bannière statique par un carrousel contenant les données de la bibliothèque .J’ai crée la pagination des images avec les flèche de navigation pour qu’au clic l’image change. J’ai ensuite ajouter les bullets points , le nombre correspondant aux nombres d’images présentes. Lien vers le repository GitHub:https://github.com/kant95270/Print-It

Riding Cities P2 – Premiers pas sur le langage HTML Scénario J’ai rejoint  l’agence Webonzaï pour un stage en tant que développeur junior. Romain, mon maître de stage et CTO, est en déplacement professionnel la semaine de mon arrivée. Pour me permettre d’avancer sans lui, il me confie par e-mail ma première mission : mettre à jour la page Internet de Riding Cities, une association sportive qui promeut le skate en région. Ma mission Créer une nouvelle section, “Les membres fondateurs”, avec les noms et photos des créateurs de l’association. Modifier la section comprenant le bouton “Télécharger le planning de cours” pour ajouter un titre et deux boutons permettant de télécharger deux plannings de cours différents (un pour les enfants et un pour les adultes). La maquette est disponible sur Figma et on nous fourni les nouveaux éléments qui seront à ajouter (photo et pdf). Process Après étude de la maquette Figma , puis l’étude du code déjà existant , j’ai pu repérer ou j’allais intégrer les nouveaux éléments. J’ai donc créé la nouvelle section des membres fondateurs , en intégrant leurs photos ainsi que leur prénom et spécialité . Puis j’ai intégré la section. permettant le téléchargement des différents planning .Et enfin , le CSS ayant déjà été intégré , j’ai attribué aux différentes section les classes correspondantes afin que la page soit la plus fidèle possible à la maquette . Langages utilisés HTML CSS Lien vers le repository GitHub:https://github.com/kant95270/Riging-cities

Booki P3 – Créez la page d’accueil d’une agence de voyage avec HTML & CSS Scénario Scénario: Je débute mon alternance en tant que développeur web au sein de la start-up Booki.L’entreprise souhaite développer un site Internet qui permette aux usagers de trouver des hébergements et des activités dans la ville de leur choix. Je suis chargée d’intégrer l’interface du site avec du code HTML et CSS. Pour cela, je travaille en étroite collaboration avec Sarah, la CTO, et Loïc, l’UI designer.  Sarah  m’envoie un e-mail pour me présenter l’avancée du projet.Pour m’aider à démarrer, Sarah m’a préparé la structure de fichiers du site ainsi qu’une base de code : un fichier “index.html” contenant une première base du code HTML que tu devras compléter ; un dossier “css” contenant un ou plusieurs fichiers “style.css” avec une première ébauche du code CSS et que tu devras compléter également ; un dossier “images” contenant l’ensemble des images utilisées sur le site. La maquette disponible sur Figma   Mission: Installé mon environnement Découper la maquette Intégrer le header du projet  Ajouter le formulaire  Ajouter la partie des filtres  Réaliser la card hébergements Gérer l’affichage des cards Intégrer le conteneur Implémenter le footer Vérifier la qualité du code  Process: J’ai du mettre en place toute l’architecture du site en HTML et créer le CSS afin de respecter au mieux la maquette Figma. Dans un premier temps j’ai étudié la maquette Figma et est effectué une découpe précise de chaque parties , afin de pouvoir déterminer comment j’allais agencer mes intégrations et qu’elles balises HTML j’allais intégrer.Après avoir intégré la partie HTML , je me suis intéressée au CSS afin de respecter au mieux ce qui était demandé sur la maquette . J’ai du reprendre plusieurs fois mon code afin qu’il soit bien structuré et je l’ai passé au validateur ce qui permet de garantir que mes pages Web sont affichées correctement sur différents navigateurs et appareils, et qu’elles sont accessibles et conviviales pour le référencement. Lien vers le repository GitHub:https://github.com/kant95270/Booki