Bonjour,
Dans le cadre d'un projet web en formation, j'ai pour mission de créer mon premier site internet statique.
J'ai fini la plus grosse partie visuel du site internet. Si vous avez deux minutes, quoi que.. Vous avez deux minutes vu que vous avez cliqué.. :P
Pouvez vous faire un tour sur mon site, me donner votre avis, m'apporter un retour d'éventuel bug, problème d'affichage, etc.. Ça serait super.
Le concept du site : faciliter l'utilisateur dans le choix des skis pour l'hiver. J'ai ajouté des parties comme la partie "photos" afin de rentrer dans la charte de l'évaluation.
De préférence, utiliser Google chrome pour une navigation "smooth".
Le site à été d'abord pensé pour une navigation via un ordinateur, puis pour mobile. De ce fait, diverses animations ne sont pas optimisé pour mobile, donc de préférence utiliser un PC pour ckeker le site.
La partie "inscription" n'est pas fonctionnelle étant donné que c'est un site statique (Pas d'utilisation de langage back end (SQL, PHP .. ))
Voili voilou, ahh.. Le lien du site :
https://bsteven-srv7.formations-web.alsace/index.html
PS: J'ai fait une faute d'orthographe en créant le logo.. Ça va être corrigé ^^.
PS2:Seuls les langages HTML et CSS sont autorisés pour ce premier projet, et les framework sont interdis. Le but du projet étant de montrer ce qu'on a appris à faire avec ces langages. J'ai tout de même utilisé pour certaines parties la grilles bootstrap.
De plus, quand tu fais un site, tu dois le developper dans l idée qu il doit être fonctionnel sur le maximum de navigateur et sur mobile, te limiter à chrome ce n est pas suffisant
De plus, pour faire ça, je suppose que tu as utilisé un framework qui normalement doit prendre en charge tout ça
Comme le dit zekk, la page d'acceuil est inutilement longue, tu as tes sections "Blog", "Skies", Photos" et "Contact qui ne servent à rien sauf rediriger à un certain point de "l'Accueil". Idem pour "Fais ton Choix", cela te redirige quelques centimètres plus bas, du coup l'interaction est içi aussi inutile.
Le site paraît en revanche fonctionnel, je veux dire par là que l'interaction se fais partout, même si cela manque structure. Voilà donc mon avis sur la chose, si cela peut te guider, réfléchir à comment remanier tout ça pour en faire quelque chose de structurer, tu as le contenu, maintenant il faut passer à l'étape suivante ; une section présentation serait pas de refus d'ailleurs, même si tu n'as pas le contenu qui va avec.
"De plus, quand tu fais un site, tu dois le développer dans l'idée qu il doit être fonctionnel sur le maximum de navigateur et sur mobile, te limiter à chrome ce n est pas suffisant"
-> aucun framework à été utilisé, c'était interdit, de même pour l'utilisation d'autres langages style JS. Tout de même, le site est responsible tout support (j'ai utilisé les medias queries + du CSS type float, flex).
-> Il est compatible tout navigateur, cependant, la fonctionnalité "smooth" est compatible uniquement sur chrome pour l'instant. Étant donné que l'utilisation d'autres langages est interdite pour ce premier projet, il m'était impossible de faire cette effet "smooth" différemment.
Je remarque un petit manque de finitions, mais rien de bien méchant. Globalement je trouve que certains éléments prennent trop de place, d'autres pas assez. Par exemple ta première section avec la montage en fond pourrait prendre toute la hauteur de l'écran (ou 80%), alors que certains sections suivantes mériteraient d'être réduites en hauteur. Il faut énormément scroller alors qu'il n'y a pas tellement de contenu au final. Bref, il y a des aligements à revoir, les espacements, la taille des éléments etc.
Mais pour ça il faut que tu testes d'avantage, et nottamment sur d'autres navigateurs. Au minimum les dernières versions de Chrome / FireFox / Safari / Edge. Pour Internet Explorer, on commence doucement à s'en foutre... ça dépend des clients. Dans l'idée c'est quand même bien de tester IE 9/10/11. Tu as de la chance, tu ne devras à priori jamais te soucier des IE 8/7/6, c'était un enfer
Niveau responsive tu as encore un peu de boulot aussi... Je ne sais pas sur quels appareils tu testes, mais par exemple les skis me semblent prendre bien trop d'espace en hauteur sur mobile (là testé vite fait sur un iPhone 4,7" avec une résolution utile de 375x667).
Pour le footer aussi, peut être le revoir sur 3 colonnes plutôt que 4... là en l'état la colonne avec les derniers articles est très écrasée. Il manque aussi du padding dans ton textarea, les input text en ont bien eux. Et peut être du padding au dessus du copyright.
Après aussi je vois que tu as l'air de t'être bien amusé à mettre des effets hover sur certains boutons, mais ce qui est dommage c'est que d'autres éléments paraissent moins travaillés. Aussi, multiplier les effets n'est pas forcément une bonne chose. C'est bien de garder une certaine cohérence dans tes choix.
J'ai essayé d'incorporer chaque effet que j'ai appris au dépit d'une cohérence
Merci encore !
Pourtant tu utilises bootstrap. On est bien loin d'un simple HTML et CSS. En plus il y a une page pour se log, même si elle est simplement décorative.
Quand je parle de la section "Blog" je l'englobe aux autres, même si j'devrais pas, puisque qu'elle à l'air de redirigé vers une page différente.
Hésite pas à faire de courtes pause pour détailler le regard que tu as sur ce que tu développes dessus
Si mes souvenirs sont bons avec Bootstrap c'est le "navbar toggler" et je ne l'ai pas vu dans ton code, apparemment tu es partie sur un pop d'icone. Après je t'avoue que j'ai regardé en diagonal. Ne faisant plus de bootstrap depuis un moment, je ne suis plus du tout à jour.
Si tu commences tout juste le Web, les frameworks c'est super, mais je serais toi, je partirais sur le début du début, l'HTML et le CSS de base, c'est moins marrant mais tu évolueras bien plus vite par la suite. Car la tu utilises du Jquery qui est déjà avancé pour quelqu'un qui commence et ensuite qui tu y mettras du PhP et surement de l'Ajax tu vas être pommé car ça va aller beaucoup trop vite.
-> comme mentionné dans mon PS2 j'ai utilisé la grille et uniquement la grille bootstrap pour quelques éléments, notamment les 3 icônes de sélection des skis et le footer.
-> Bien vu pour le bug du menu burger, je l'ai fait en css + une ligne de code en js pour show/hide.
Victornewman mon fils
Alchemist Merci !
Aros je prends note, merci !
Au niveau des couleurs aussi, les gris complètement déssaturés c'est un peu tristoune (laisse une légère teinte dedans), mais de manière plus global ça manque vraiment de couleur je trouve. (en en mettant juste un peu plus dans tes boutons, titres, pastilles,...etc....) Et fait gaffe de toujours garder une couleur de texte bien dégagée de sa couleur de fond (le hover sur tes boutons "plus d'info" par exemple, tu peux passer le texte en blanc)
Mais en tout cas pour une première franchement c'est plutôt pas mal!
Gauffreman Je prends note, merci ton retour, c'est motivant !