Partage

Mon premier site web

5 mars 2018 à 19:54:49

Hello tout le monde !

Juste un petit message pour remercier Openclassrooms pour leurs cours en ligne et ses membres pour leurs conseils très précieux !

Voilà, grâce à eux, j'ai créé et mis en ligne mon premier site web pour une amie qui se lance dans l'enseignement du yoga.

http://manayoga-fanny.fr

Ce site est bien évidemment perfectible et me servira de "cobaye" pour appliquer les prochains cours (PHP que je viens de débiter par exemple :D)

N'hésitez pas à y faire un tour !

-
Edité par MorganeMallet1 5 mars 2018 à 19:57:01

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
6 mars 2018 à 19:10:09

Salut,

j'ai regardé ton site c'est très bien. C'est du statique ?

Si je devais avoir un truc à redire pour chipoter, essai de partir sur des id&class en anglais et aussi d'utiliser méthodologie de nommage pour le css genre BEM ou autre ou créé ta propre méthodologie pour être très ordonné en CSS car ça part vite dans tous les sens.

Sur la page d'accueil une sur-utilisation des id (c'est personnel) . Perso je n'utilise jamais les id pour la mise en page car priorité trop forte, je les réserves pour les ancres et le js.

Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité
7 mars 2018 à 18:32:41

Merci pour ton retour !

Oui pour le moment, c'est du statique.

Je commence le cours PHP/MySQL pour gérer les articles (affichage d'un certain nombre d'articles par page et archivage des plus anciens).

Je vais tenir compte de ta remarque sur les id ;)

7 mars 2018 à 19:11:07

MorganeMallet1 a écrit:

Merci pour ton retour !

Oui pour le moment, c'est du statique.

Je commence le cours PHP/MySQL pour gérer les articles (affichage d'un certain nombre d'articles par page et archivage des plus anciens).

Je vais tenir compte de ta remarque sur les id ;)


Après c'est surtout de bonnes habitude à prendre. Bon courage pour le PHP n'hésite pas à revenir montrer tes progrès ou a poser des questions si tu as des soucis !
Vous ne pouvez pas comprendre la récursivité sans avoir d’abord compris la récursivité
8 mars 2018 à 12:04:11

Un bon petit début pour un premier site web . 

Je vois que pour le lien facebook tu as utilisé une image je t'invite à regarder un site comme : https://fontawesome.com/.

Il te permettra de trouvé des petit icone pour les réseau sociaux et autre. 

8 mars 2018 à 22:00:58

Pour un seul logo de quelques octets c'est un peu overkill de charger fontawesome.

Retrouvez-moi aussi sur Zeste de SavoirTutoriel WAMP • Nouvelle F.A.Q. PHP
9 mars 2018 à 11:21:53

Bonjour,

Tout d'abord félicitation, c'est plutot pas mal pour un premier site. Je vais me permettre comme mes confrères de faire quelques remarques :D

Niveau design & visuel :

C'est plutot très beau et harmonieux, les couleurs se mari assez bien et donne une impression de site bien personnel, et non un truc fait en chaine a base de bootstrap qui ressemble a tous les autres.Quelques petits truc néamoins.

  • Cela me concerne peut-être tout seul, mais l'écriture de type fine que tu adopte en gris sur une couleur rose comme ça, demande un travail de la vue, et au bout d'un moment ça peut fatigué l'oeil. Peut etre une autre police ou un poil plus foncé ?
  • Dans ta liste d'article, tu as mis un border pour séparé chacun de tes articles, je suppose que c'est un border bottom. Cependant, a ton dernier articles qui est la vidéo, tu as un border et rien en dessous ^^ Peut etre regarder les pseudo-class last-child^^
  • Niveau responsive design, c'est super propre, avec la version mobile du menu, tout se tient bien en place. De ce coté la rien a redire mais je voulais féliciter le travail dessus^^
  • Le footer fait un tout petit peu perdu, en bas, souvent coller a ta div de corps, un peu décentré, et seul ^^

Niveau code :

De même, avec la vérification du code source, on voit apparaitre un code propre et bien indenté. Ici aussi quelques remarque.

  • J'ai pu voir a pas mal d'endroit que tu utilises la balise <div>pour encapsuler du texte, et surement faire le saut de ligne d'ou l'enchainement de plusieurs div ainsi :
     <div >ANANDA SANA : 1 rue du Four Banal 57100 THIONVILLE</div>
                                <div>ATTENTION : les tarifs et inscriptions sont fixés et gérés par le centre Ananda Sana.</div>
    Profitant donc du comportant type "Block" de ce dernier. Néanmoins, tu perds un peu de sémantique. La balise div est un élément sans valeur sémantique, il serait donc plus approprié d'écrire dans des balises <p> qui ont le meme comportement type block, et qui sont faites pour ça :)
  • Sur la page de planning, j'ai eu l'occasion de voir ceci :
    <ul>
                                        <li>La première séance est gratuite.</li>
                                        <li>Forfait séances découverte (1 forfait / personne) : 30 € ; valable pour 2 séances dans la même semaine. </li>
                                        <li>Tarif pour une séance : 22 €</li>
                                        <div>Modalités d'adhésion :</div> <!-- ICI -->
                                        <li>Carte adhérent à l'année : 40 €</li>
                                        <div>Elle vous offre de nombreux avantages : tarifs préférentiels pour les ateliers du centre et accès aux carnets.</div> <!-- ICI AUSSI -->
                                        <li>Carnet 5 séances : 95 €</li>
                                        <li>Carnet 10 séances : 180 €</li>
                                        <li>Carnet 20 séances : 350 €</li>
    </ul>     

    Attention ! Un <ul> n'encapsule que des <li> et rien que ça, c'est au sein d'un <li> que tu peux mettre d'autre balise dedans. Mais pas entre !
  • Le coté responsive de ton menu est très bien niveau rendu. Mais il est assez spécial niveau code. Et un petit soucis je pense c'est le CSS associé a la checkbox :
    input[type="checkbox"] {
        display: none;
    }
    Ici tu spécifie que toutes les input de type checkbox sont pas afficher. Mais si un jour on fait un formulaire avec des checkbox, qu'est-ce qui se passera? On ne les verra pas^^ Peut etre associé cette effet qu'a la checkbox d'id ^^ 

Voila, quelques petits points déjà en plus de ce qui a été dis précédemment :)

Mais malgré tout, Toutes mes félicitation encore !

-
Edité par Hsuissia 9 mars 2018 à 11:22:28

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !
10 mars 2018 à 2:35:37

Pas mal ton site :) J'aime bien le design car c'est sobre, ce n'est pas surchargé en éléments graphiques et puis au niveau des couleurs tu as fait un camaïeu, c'est harmonieux.

-
Edité par FEARLESS_ 10 mars 2018 à 2:42:12

10 mars 2018 à 19:08:51

super beau le site sur le Yoga, même s'il est statique, j'adore, bravo !
10 mars 2018 à 19:49:52

Merci à tous pour vos retours carrément encourageants !!:)

Pour ce qui est des choix de couleurs et de police, je n'y suis pas pour grand-chose ; c'est l'amie pour laquelle j'ai fait le site qui souhaitait ce rendu :)

Pour le moment, oui le site est statique, mais il sera sûrement amener à évoluer au gré des cours que je vais continuer à suivre sur OpenClassrooms ;) et des envies de mon amie.

Petit message à Hsuissia : un grand merci d'avoir pris le temps d'étudier les coulisses du site :)

Je vais suivre tes conseils de très près !!

10 mars 2018 à 22:31:53

Bonsoir MorganeMallet1,

Même si ton amie insiste, elle ne se rend peut-être pas compte que c'est assez illisible, mais bon peut-être Arriveras-tu à la convaincre. La lisibilité peut-être réfractaire pour un visiteur-se :) 

Tu peux  modifier les couleurs depuis l'inspecteur d'éléments pour trouver un équilibre, exemple rapide :

Bonne continuation.

-
Edité par pipelette13 10 mars 2018 à 22:42:31

12 mars 2018 à 10:38:22

Ce n'est rien :) Ca fait plaisir d'aider.

Je tiens a appuyer le propos de pipelette13, dans ce monde, c'est toi le dev-designer. Il faut prendre en compte les demandes du client, mais tu es "maitre" de ta production, et toi même tu peux te rendre compte du manque de lisibilté. C'est alors a toi de convaincre ce client pour apporter une touche qui sera plus agréable.

Surtout que je te propose pas de passé du rose au jaune pastel, mais juste d'assombrir un peu l'écriture, afin que la lecture soit plus simple. Le but d'un site etant qu'il soit visiter, si la personne vient et a du mal a lire, ou force trop sur ses yeux pour, il quittera.

Proverbe Indien : " Fait du bien a ton corps pour que ton âme ait envie d'y rester "

Proverbe Hsuissia : " Fait du bien a mes yeux pour avoir l'envie de visiter " :D (  Bon petit troll de ma part ;) )

-
Edité par Hsuissia 12 mars 2018 à 10:40:49

Voir une araignée c'est rien ... Le pire c'est quand tu ne la vois plus !
12 mars 2018 à 15:40:33

Je lui ai soumis la proposition du fond plus clair ;)

Effectivement, c'est beaucoup plus lisible !

Merci encore pour le conseil !

Hsuissia a écrit:

Proverbe Indien : " Fait du bien a ton corps pour que ton âme ait envie d'y rester "

Proverbe Hsuissia : " Fait du bien a mes yeux pour avoir l'envie de visiter " :D (  Bon petit troll de ma part ;) )

-

Pas mal  !!! :lol:







-
Edité par MorganeMallet1 12 mars 2018 à 15:42:12

12 mars 2018 à 16:22:15

Et communique avec autrui pour ne pas être transparent-e, ça marche aussi  ^^ ?
12 mars 2018 à 20:06:34

pipelette13 a écrit:

Bonsoir MorganeMallet1,

Même si ton amie insiste, elle ne se rend peut-être pas compte que c'est assez illisible, mais bon peut-être Arriveras-tu à la convaincre. La lisibilité peut-être réfractaire pour un visiteur-se :) 

Tu peux  modifier les couleurs depuis l'inspecteur d'éléments pour trouver un équilibre, exemple rapide :

Bonne continuation.

-
Edité par pipelette13 10 mars 2018 à 22:42:31

HS: Quand tu parles de lisibilité et que tu utilises l'écriture inclusive :lol:



-
Edité par FEARLESS_ 12 mars 2018 à 20:20:48

12 mars 2018 à 21:39:37

On est encore loin de l' écriture inclusive , la loi voulait bien plus loin, même trop loin pour ma part ;)  

Si ça continu ils vont utiliser des Regex : 'visit' + $(-)+(eurs|euses)

Oui je sais ma Regex est pourri ... :D

Mais bon moi même je rédige ainsi depuis déjà pas mal de temps...

-
Edité par Lucky13 12 mars 2018 à 21:49:00

12 mars 2018 à 22:01:10

Lucky13 a écrit:

On est encore loin de l' écriture inclusive , la loi voulait bien plus loin, même trop loin pour ma part ;)  

Si ça continu ils vont utiliser des Regex : 'visit' + $(-)+(eurs|euses)

Oui je sais ma Regex est pourri ... :D

Mais bon moi même je rédige ainsi depuis déjà pas mal de temps...

-
Edité par Lucky13 il y a 10 minutes

:lol: Bien joué la métaphore avec les Regex x) C'est du French++

-
Edité par FEARLESS_ 12 mars 2018 à 22:01:42

13 mars 2018 à 9:24:29

je rejoins pipelette13 et les derniers commentaires dans son sens. 

Faut pas non plus tomber dans le cliché et suivre à la lettre les demandes de ta cliente !

en effet, tu restes maître de la production et surtout tu es un conseiller à part entière !

Le rose, la lisibilité ...etc. 

le web des années 1990/2000 est fini. Tu n'as pas besoin de faire un site en noir pour être classe, en rose quand tu parles d'un domaine féminin et rouge quand tu fais un site de fast-food !

N'hésites pas à t'intéresser à la communication digitale. utilise le visuel pour retranscrire le message de ta cliente, son univers, ses prestations. Par son domaine !

Mon premier site web

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown