Bonjour à tous.

Après avoir longuement hésité à demander de l’aide, je me lance ici.

J’ai commencé récemment la formation OpenClassRooms “Développeur Web, je suis un total débutant dans ce domaine et cela fait que 2 semaines que je “code” vraiment.

Je suis actuellement sur mon 2eme projet, qui consiste à intégrer une maquette en HTML / CSS à l’aide de quelques cours.

Est-ce qu’il serait possible d’avoir un avis sur le travail que j’ai déjà produit ?
J’essaie à ce niveau, de comprendre les média queries; Beaucoup de choses m’échappent sur le pourquoi du comment sur la réaction des éléments de ma page.

Tous les conseils sont les bienvenus, ayant l’impression d’être un peu paumé lol...
Voici mes fichiers: https://github.com/dimitriboissart/PROJET-2.git
Merci ^^

14 réponses


popotte
Réponse acceptée

Alors tes images sont dans un dossier "Images/image/..." alors que ton html pointe vers 'image/..." :p

Faudra changer ça bon j'ai fais la modif de mon coté tfaçons x)

Aloooors

Déjà la version mobile ça va être rapide c'est pas bon ^^'

Petit conseil d'intégrations: fait du mobile-first, c'est beaucoup plus simple d'adapter la version bureau que d'adapter la version mobile, en gros tu commences par la version mobile, et tu inverse les breakpoints avec des min-witdh :)

Ensuite version desktop

Alors style épuré c'est un bon choix, c'est plus simple, pour la navbar, tes deux liens ce serait bien qu'il y ait un petit effet au hover, comme un underline (pas le text decoration, utilises un border-bottom comme ça tu pourras customiser l'underline)

Ensuite il faudrait aligner le bloc hebergements à gauche, retirer le padding des images dans les cards au niveau des images, d'ailleurs retires les border-radius des cartes, ca fait plus pro quand c'est carré

Toujours d'ans l'alignement des blocs, alignes tout le corps de ta page au logo Booki a gauche et au lien Activités à droite (width en 100%, max-width en px, et margin: auto dans ta section principale)

comme pour la navbar fait un petit effet de hover sur tous tes liens

Et le bouton "Rechercher" mets un "cursor: pointer"

Dernière chose ce serait bien de mettre de créer une page dédiée pour chaque hébergements au lieux de faire un lien qui pointe vers l'image (bon la ça dépends, si tu sait faire du php fait une page dédiée, si tu ne sait pas faire de PHP laisses tomber faudrait créer une page html pour chaque hebergement c'est chiant x))

Eeet... c'est tout, après ça tout devrait être nickel :)

Hello :)

Alors pour commencer tu as oublié d'ajouter tes images dans github :p

DimB
Auteur

Hey !

Désolé de la réponse tardive, le temps de comprendre comment on fait.
Normalement c'est bon.

DimB
Auteur

Merci beaucoup pour touts tes conseils, ils sont vraiment très utiles.
Je viens de faire les modifications concernant les hovers et le cursor dans le bouton Recherche, c'est clair que çà rajoute quelques choses de plus vivant.

En ce qui concerne l'intégration, on a pour obligation de commencer par le desktop puis les versions Tablette et Mobile.
J'ai commencé hier à m'interesser donc aux média queries, et effectivement, je me suis demandé si ce n'était pas plus simple de commencer par la version Mobile ...
Du coup tu as répondu à ma question.

Par contre je n'ai pas la moindre notion en php encore :p
Demain çà fera 3 semaines que j'ai "appris", "survolé" des cours HTML / CSS pour faire ce projet.
J'ai vraiment l'impression de ne pas aller assez vite au vue du temps de cette formation;

Bref, je vais continuer de travailler.

Merci encore pour tes conseils :)

Top, et pour les animations si tu manques d'inspiration regarde un peu ce qui se fait sur internet, quand tu vois une animation cool tu pourras essayer de le reproduire (ou au moins reproduire une version simplifiée si c'est trop compliqué)

Euh c'est une obligation explicite de commencer par le design desktop? Parce que la Openclassrooms est en train de t'imposer une mauvaise pratique de dev :/

J'ai fais mon cursus chez OPC aussi, il y a quelques années il y avait bien le sujet segmenté en disant Partie 1: faire la maquette, Partie 2: le rendre responsive mobile, mais comme il n'y avait aucune interdiction de commencer par le desktop, sutout que pendant la validation tu présentera le produit final :/

Ah okay xD Bah tempis pour la page dédiée, ce sera chiant a faire en pur html (faudra créer une page par cartes)

Le php ça sera très utile pour placer des variables, et faire un page dynamique, en gros tu fais une seule page dédiée, et pour récupérer le titre le texte l'image etc tu passes par des variables ^^

DimB
Auteur

Dit comme ça, ça à l'air cool mais super compliqué ^^

Voici dans l'énoncé ce qui est précisé:
● Il faut d’abord réaliser l’intégration pour les ordinateurs (autrement
dit, en desktop first), puis les tablettes et enfin les téléphones

● Aucun framework CSS (type BootStrap ou Tailwind CSS) ou
préprocesseur CSS (type Sass ou Less) ne doit être utilisé.

Je ne sais pas à quoi sert encore un framework encore mais le peu que j'ai compris c'est que ça m'aurait été utile :-)

Okay c'est nouveau ça, aucun framework CSS ça je l'avais aussi, par contre les preprocesseurs c'est nouveau et c'est idiot ça reste full custom, tu parlera a ton mentor du fait que ce soit bizarre que OpenClassrooms impose une mauvaise pratique de dev avec son desktop first :p

Ahh Openclassrooms ils sont droles quand même xD alors un framework comme Bootstrap ça sert a utiliser uniquement des classes pour avoir un style propre avant de customiser, et encore ça c'est la façon de faire de la grnade majorité des utilisateurs de Bootstrap, en vrai tu peux faire un site entièrement personnalisé uniquement avec les classes Bootstrap en modifiant les variables (c'est expliqué ici: https://getbootstrap.com/docs/5.0/customize/overview/ )

Bon du coup faudra faire attention de ne pas avoir un design cassable, ensuite si tu as un grand écran utilises le rendu responsive et travailles sur le design sur une fenetre de 1200px (c'est le plus petit format desktop) ça réduira le risque de casse en desk

Après tu peux tricher en faisant un approche mobile-fisrt dans des catégories desktop-first:

En gros tu définit trois grand breakpoints: desktop, tablet et mobile

Pour ces medias tu fera du desktop first, cad media (max-width: ...)

Ensuite tu auras des breakpoints mobile-small, mobile-medium, mobile-large définit en mobile first cad media (min-width: ...) pareil pour tablet-small, tablet-medium et tablet-large

En gros voila l'idée:


// Desktop
CSS

// Desktop-Large (pour les très gros écrans)
@media (min-width: 1900px) {}

// Tablet
@media (max-width: 850px) {}

// Mobile
@media (max-width: 500px) {}

// Tablet-Small
@media (min-width: 501px) {}

// Tablet-Medium
@media (max-width: 850px) and (min-width: 650px) {}

// Tablet-Large
@media (max-width: 850px) and  (min-width: 750px) {}

// Mobile-Medium
@media (max-width: 500px) and (min-width: 400px)

// Mobile-Small
@media (max-width: 500px) and (min-width: 450px)

Tu fait les grands breakpoints en desktop-first, et ensuite quand tu passes par la version tablet tu fait ton code pour la version la plus petite des tablettes, et arrange le responsive de plus en plus haut avec tablet small medium et large, et tu pass par le mobile, tu démarres par exemple a 350px dans le media Mobile, puis tu arranges du plus petit au plus grand avec Mobile-Small Mobile Medium et Mobile Large

Comme ça tu fais du mobile-first tout en respectant l'obligation de commencer par le desktop :p

Pour les valeurs en px que je t'ai donné je l'ai fait au hasard, et tu n'a pas besoin de mettre en place tous les breakpoints, par exemple tu met dans le breakpoints mobile le CSS pour 350px environ (devrait pas y'avoir d'écran plus petits) et tu étires ta page, si tu arrives à la largeur Tablet sans que ça casse baaah tu n'as pas besoin d'ajouter les breakpoints Mobile-Small Medium et Large, si ça casse par exemple à 450px la tu peux rajouter un breakpoint Mobile-Large qui aura un max-width de 500px (media Mobile) et un min-width de 479px (la largeur où ça a cassé - 1px pour la marge)

Bon par contre demandes à ton mentor si ça passe comme triche pour profiter de l'avantage du mobile first qui est que tu aura pas besoin de faire 500 breakpoints tout en faisant desktop en premier puis tablette en second et mobile en dernier (car les 3 breaks principaux c'est en desktopfirst)

DimB
Auteur

Du coup j'adore ta technique.
J'ai déjà travaillé dessus aujourd'hui mais cette reflexion sur le sujet, je n'y avais pas pensé.

J'ai rdv demain après-midi avec mon mentor, je vais voir ce qu'il va me dire.

Mais du coup, tu en penses quoi d'OpenClassRooms ? Tu as avais déjà de l'expérience avant ? tu as pû trouver du travail grâce au dîplome par la suite ?
Désolé je pose beaucoup de questions ^^

C'est le principe du dev, toujours ajuster les choses à son avantage, tu me dira l'avis de ton mentor sur les impositions d'OPC et de ma petite technique pour profiter des avantages du mobile-first sans faire de mobile-first :p

Ahah t'inquiètes poses tes questions :p

Alors Openclassrooms on va dire que c'est simpas pour se faire la main, perso j'avais déjà une expérience autodidacte, j'ai appris tout seul les bases

Par contre la formation développeur web c'est pas fou comme formation, tu devrait passer par la formation Développeur d'application web - Front End en alternance, déjà la formation est un peu plus poussée, ensuite tu aura une alternance, et franchement tu apprendra beaucoup plus en entreprise :p

Perso j'ai commencé en autodidacte, je connaissais HTML, CSS, PHP et JS quand j'ai démarré la formation développeur web, j'ai fais ma formation jusqu'au 3eme ou 4eme projet, un projet Javascript avec localstorage, je n'ai pas finit cette formation j'ai basculé directement sur la formation Développeur d'application web front end (et au final je suis un développeur back end xD mais bon au moins j'ai des notions front très pratiques ^^)

Alors perso j'i trouvé mon alternance pour ma formation OPC, et ensuite je n'ai jamais utilisé ce diplome, par contre j'ai gardé des contacts dans l'entreprise où j'étais en alternance, je suis passé directement freelance et c'est mon ancien lead dev qui m'a mit en contact avec mon premier client (alors ne fait surtout pas comme moi, après ton alternance restes au moins 2-3 ans en entreprise avant de passer freelance si c'est ton projet)

En dev le diplome ne sert a rien, c'est ce que tu sait faire qui compte, par contre les projets que tu aura réalisé chez openclassrooms tu devra les conserver, ce sera ton book pour les entretients d'embauche en plus de tes projets persos, d'ailleurs à la fin de ta formation tu gagnera en expérience donc n'hésites pas a repasser sur tes premiers projet pour les améliorer ;)

DimB
Auteur

Salut ! Du coup, je lui ai demandé et il m'a fait comprendre que lui, effectivement, il commence toujours par le mobile first mais qu'ici on se doit de suivre ce qui est demandé.
Et d'ailleurs, les deux projets suivants, on intègre une maquette mobile first.

Depuis que j'ai commencé début Février cette formation, je me suis rendu compte de pas mal de choses et je me fais une idée plus précise du domaine du dev web et de OpenClassRooms. Du coup je lui en ai parlé un peu.

Cette formation dure 6 mois, on voit à travers les projets donc du HTML / CSS _ SASS puis du Javascript et ensuite en fin de parcours du back-end. Elle est sensée nous diriger vers un profil FullStack... et cette formation s'adresse à absolument TOUTS profils.
Mais au final, c'est iréaliste qu'un débutant du dev puisse prétendre à un poste fullStack ?! Quand bien-même avec un diplôme.

Etant un total débutant, je ne me rendais pas compte avant de commencer, de ce qu'elle représentais vraiment.
Je me dis qu'elle permets juste de mettre le pied à l'étrier, de se faire une idée à travers touts ces projets de la voie qu'on souhaiterais suivre ensuite.
6 mois est vraiment peu, d'autant que j'avais demandé à mi-temps à cause d'un contexte personnel un peu particulier et surtout sans rémunération actuellement.

En vrai il y aurait beaucoup de choses à dire je pense sur OCR ahah.

En écoutant beaucoup de développeur qui partagent leur expérience, tous disent qu'il est important de choisir sa voie ( front ou back ) et sa techno, ce qui me parait logique au final et je suis entièrement d'accord, quelques soit le domaine d'ailleurs.

J'aurais aimé faire une alternance comme tu me le conseilles, mais je vais essayé d'aller au bout de cette formation. Je devrais peu-être bosser à côter mdr donc on verra ce que ça donne. J'espère juste ne pas perdre mon temps, surtout quand je regarde les profils que les recruteurs recherchent.
Mais bon, c'est important d'apprendre, comprendre, savoir où on va, créer de son côté et ensuite savoir se vendre, comme tu me l'as dit.

La formation Développeur d'application web - Front End n'existe plus au faite ^^

Hello, alors oui c'est pas du tout suffisant cette formation, c'est juste pour avoir quelques notions de bases, et la suite de cette formation c'est de faire une alternance

En gros tu commences par cette formation, et ensuite tu fait une autre formation mais en alternance ^^

Alors la formation developpeur d'application front end a du changer d'intitulé, par exemple la formation que tu faisait à mon époque ça s'apellait "développeur web junior"

Cherches dans OPC la formation qui donne un diplome niveau bac +3/4 :p

DimB
Auteur

Le chemin va être long ahah.

En gros les formations qu'ils restent permettent de se spécialiser, à l'exeption de la mienne.

Développeur d'application _ PHP / Symfony (Bac+3/4) Plein temps : 12 mois
Développeur d'application iOS (Bac+3/4) Plein temps : 12 mois
*Développeur d'application
Android (Bac+3/4) Plein temps : 12 mois

Développeur d'application _ Java (Bac+3/4) Plein temps : 12 mois
Développeur d'application Javascript React (Bac+3/4) Plein temps : 12 mois
*Développeur d'application
Python (Bac+3/4) Plein temps : 12 mois

Développeur Salesforce (Bac+3/4) Plein temps : 12 mois
Architexte Logiciel (Bac+5) Plein temps : 15 mois

Et donc la mienne;
*Développeur Web (Bac+2) Plein temps : 6 mois

6 mois à 4000€ pour se lancer, heureusement que ça ne vient pas de ma poche :-)

Ah voila!

Développeur d'application Javascript React (Bac+3/4) Plein temps : 12 mois

C'est cette formation qui a remplacée la mienne :p

Si ça n'a pas changé tu peux l'avoir sur 2ans :p

Et oui il faut quand même que ce soit financé sinon ça couterait cher xD

Le plus important à choisir ce sera l'entreprise, il te faut une entreprise qui t'apporte beaucoup, en gros évites les agences web spé wordpress, cherche du coté du digital marketing, c'est plus intéressant que les agences web :)

DimB
Auteur

J'ai déjà regardé hehe

Mais dans ma zone j'ai l'impression que ca va être un peu compliqué, beaucoup on l'air d'utiliser wordpress.

Cette agence pas très loin de chez moi avait l'air interessante en tout cas
https://adekoi.com/realisations/creation-site-internet-rde-24/

En tout cas je garde ce conseil dans ma tête le jour où j'ai besoin :-)