Topic de la programmation web (HTML / CSS / JS...)

Sujet dans 'Hi-tech - Gadgets' lancé par Nastja, le 30 octobre 2015.

  1. Nastja

    Nastja
    Expand Collapse
    What would Joan Holloway do?

    Hello

    J'ouvre ce sujet pour qu'il devienne un lieu pour poser ses questions autour du CSS/HTML/JS de manière générale.

    Mais j'ai aussi une question: j'aimerais savoir en combien de temps on peut maitriser suffisamment bien le html/css/js pour créer des pages web sympa.
    J'ai fini les deux cours pour HTML et CSS de Codecademy (celui d'openclassrooms m'attire moins même si j'ai essayé) et pourtant j'ai beaucoup de mal à créer une simple page web.

    J'ai l'impression de ne pas avoir compris les concepts de base (notamment en CSS).

    Je ne comprends pas trop le positionnement des blocs et leur traduction en CSS, je ne comprends pas comment fonctionne le float ni son intérêt, les margin/padding sont casse tête (dois-je mettre un padding à mon <h1> ou au <div> qui l'entoure?).
    Et les background-image? Et comment connait-on la largeur exacte d'un écran pour pouvoir mettre une valeur à width (autre que 100%? - d'ailleurs il vaut mieux entrer une valeur en % ou en px?)
    Pourquoi le texte ne se centre pas?
    Quelle est la différence entre inline et inline-block?
    Pourquoi ma police Google font n'apparait pas alors que j'ai mis la balise <style> au bon endroit avec le lien href?

    Bref j'ai l'impression de tout faire à tâtons en rechargeant constamment la page de prévisualisation (ça veut dire que je ne maitrise pas mon code si je dois faire ça pour savoir ce qui a bougé ou non...).
    Je me sens bête et ça me déprime. :sad:

    Je n'ose même pas attaquer le javascript. Je galère déjà à créer des boutons...

    Combien de temps vous avez mis pour bien assimiler? (auto-didactes ou non).
     
    Deraio et Sassegra ont BigUpé.
  2. Cirrannai

    Cirrannai
    Expand Collapse
    Je suis salade

    Le meilleur moyen de bien appréhender le CSS, à mon avis, c'est d’expérimenter. Tu as le site W3School (en anglais) qui présente les différents tag et leur fonctions. Sur la plupart des page, tu peux expérimenter pour comprendre que que cela fait.

    En plus, tu peux voir le css d'un site et tenter des modifications directement dans ton navigateur.
    - Si tu utilise Google Chrome, un simple clic droit -> Inspecter l’élément (ou Ctrl+Maj+i) tu permets de voir et d'agir sur un code source de façon extrêmement simple.
    - Si tu utilises Firefox, tu as une extension qui fat la même chose. Mais je ne me souviens plus du nom :shifty:

    Pour tes questions plus précises :

    - Float :
    Le float sert principalement à placer des éléments dans leur conteneur, sans trop se soucier des autres éléments. Sur cet exemple interactif tu as deux elements qui peuvent d'inliner et un troisieme element non inlinable, entre ces deux là. Dès qu'il a un float:right ou un float:left, c'est comme sil n'est plus entre les deux elements, mais vraiment dans un placement à part. (Je sais pas si c'est très clair, mais c'est dur d'expliquer, en fait)

    - Margin et Padding :
    Le margin est la marge externe (entre les bord de ton élément et les autres éléments), le padding la marge interne (entre les bords de ton élément et le contenu. Imaginons que tu aies un background de couleur, la couleur ira jusqu'aux bords de ton élément, c'est à dire qu'il englobera le padding, mais pas le margin (qui est transparent - c'est à dire que la couleur dépend de la couleur du parent).
    On peut résumer avec cette image :
    [​IMG]
    En plus concret, si tu as un <h1> dans un <div>, que tu mettes un margin de 10 pixels au <h1> revient, dans un cas simple, au même qu'un padding de 10 pixel au <div>. Je dis "dans un cas simple" car si tu met un background à ton <h1> ou si tu as d'autres éléments dans ton <div>, tu noteras une différence.

    Pour tes autres questions, je n'arrive pas à voir ce que tu veux dire, un bout de code m'aiderait à y voir plus clair.
     
    Deraio et Sassegra ont BigUpé.
  3. hackergirl

    hackergirl
    Expand Collapse
    Singing in the rain

    Pour Firefox, ça fait un moment qu'il n'y a plus besoin d'extension particulière pour faire ça :)
    Pareil que sur chrome, clic droit, inspecter l'élément.
    Tu peux ensuite changer les propriétés de n'importe quel élément directement dans cet outil qui apparait alors (pour tester), et ensuite copier ça dans ton fichier .css

    Par exemple, si je fait un clic droit sur le bouton répondre (1) pendant que je compose ma réponse, voila ce qui apparait:
    screenshot1.jpg
    2 - voici le HTML qui représente le bouton dans le code de la page
    3 - toutes les classes qui s'appliquent à cet élément sont là, par exemple "button", "primary". Ici on peut voir où est définie la couleur violette du bouton dans le css.
    4 - ici tu peux tester toutes les propriétés css que tu veux, par exemple, je vais changer le padding sur ce bouton:
    screenshot2.jpg
    et voilà ce que ça donne! :)
     
    Rin`, Nastja, Deraio et 2 autres ont BigUpé ce message.
  4. Cirrannai

    Cirrannai
    Expand Collapse
    Je suis salade

    Ah ah ! Je crois que je suis beaucoup trop vieille et plus dans le coup :vieux:
     
    Sassegra a BigUpé ce message
  5. Nastja

    Nastja
    Expand Collapse
    What would Joan Holloway do?

    Merci les filles!

    J'ai tenté le clic droit inspecter l'élément sur Firefox... Le code est hyper dur! Genre y'a plein de trucs en plus :sad:
    Je me demande même si ya pas tout mélangé dessus (Js, Css).

    Pour le float j'arrive pas à comprendre pourquoi on voudrait un machin qui ignore les autres éléments. A quel moment on choisi entre le float ou le div placé en fixe?
    Même si je mets mon image à gauche et que je souhaite du texte à droite... Pourquoi mon image ne pourrait-elle pas être à 10px du bord de gauche et le texte à 120 pixels de la gauche? Un peu comme si je plaçais des formes sous Illustrator (genre les coordonnées des éléments).

    Pour le padding je sais que c'est une sorte de "marge interne". Un h1 avec du padding aura de "l'espace autour" de lui. Par contre un h1 dans un div avec padding ça fait pareil non? Je veux dire ça a le même rendu?

    Pour w3schools j'accroche pas trop à leurs cours.
    Seul codecademy me plaît bien mais au moment de faire ma page web je galère beaucoup trop. :sad:
     
    Sassegra a BigUpé ce message
  6. Sassegra

    Sassegra
    Expand Collapse

    Yeah nouveau topic de programmation :frotte:Le front c'est pas trop mon domaine, mais je jubile !
     
    Nastja a BigUpé ce message
  7. Nastja

    Nastja
    Expand Collapse
    What would Joan Holloway do?

    @Sassegra Ah mais j'aimerais bien attaquer Python (j'ai un super livre et tout) mais je vais trop galérer si j'attaque tout en même temps :sad: Et j'avais promis à deux personnes de leur créer leur site web.
     
    Sassegra a BigUpé ce message
  8. Sassegra

    Sassegra
    Expand Collapse

  9. BoxxyBabee

    BoxxyBabee
    Expand Collapse
    Qu'est-ce que je pourrais bien dire ?

    Ce sujet m’intéresse aussi. Les langages qui m’intéressent et dans lesquels je pourrais sans doute aider sont: Python/HTML/CSS/PHP et bientôt C. Après dites vous bien que je fais ça en complément de mes études (ne soyez pas violentes quand vous verrez mon code source :) ).
     
  10. Nastja

    Nastja
    Expand Collapse
    What would Joan Holloway do?

    Je déterre ce topic que j'avais crée ^^

    Alors déjà je voudrais partager un super tuto ulra basique (c'est pour les enfants) qui explique pas par pas comment créer un site web. Le tuto est en anglais par contre mais je l'ai trouvé très bien fait et j'ai mieux compris qu'avec CodeCademy ou Openclassrooms. Après c'est moins poussé, c'est peut-être comme ça.

    Dès qu'on a terminé une leçon, il faut remonter et cliquer sur le lien avec les deux >> ou revenir sur la page "sommaire".

    Voici le lien du tuto:
    http://webdesign.tutsplus.com/series/web-design-for-kids--cms-823

    Sinon, j'ai une autre question. J'ai terminé le tuto basique pour créer la page web pour enfant (le résultat final donne ça -- > http://tutsplus.github.io/web-design-for-kids/lesson-6/index.html )

    Mais il y a plein de trucs que je ne maîtrise pas du tout. Déjà, comment j'aurais dû écrire le code pour que les petits menus ronds soient alignés?

    Voici le CSS pour la <section class="store-section"> qui contient les menus (ils sont tous classé dans des <div> différents, sauf les <img> qui sont entre <section> et <div>.
    Code:
    .store-section {
        display: flex;
        display: -webkit-flex; /* This is a vendor prefix! */
        margin: 50px auto;
        width: 450px;
    }
    Sauf que le tuto nous a fait utiliser un display: flex mais ils n'ont pas poussé l'explication, c'est un tuto pour les enfants. J'ai même pas compris à 100% le principe de la flexbox...

    Pour mettre les menus à l'horizontale j'aurais dû modifier quoi et comment?


    Bon j'ai 36 000 questions mais je vais me calmer.

    Une fois qu'on a les grosses bases d'HTML/CSS on va où? Je ne sais pas quel tuto suivre après ça (il était vraiment super celui-là).
    J'ai remarqué que les tutos d'OpenClassrooms par exemple expliquaient encore comment créer des tableaux tout ça alors qu'on ne s'en sert plus vraiment, si?
    Et est-ce qu'on utilise encore les balises HTML <aside> <article> <block> tout ça? Ou on peut s'en sortir avec <section> <main> et <div>?


    Sinon j'attaque le Javascript? Comment créer une fenêtre de connexion? Des menus déroulants?
    Je sais pas trop où aller et j'ai vraiment peur de m'embrouiller (j'avais déjà tenté le HTML et j'avais un peu baissé les bras en voyant que je n'arrivais à rien).

    Merci :)
     
  11. Nastja

    Nastja
    Expand Collapse
    What would Joan Holloway do?

  12. hackergirl

    hackergirl
    Expand Collapse
    Singing in the rain

    Coucou @Nastja !

    Alors, pleins de questions, effectivement !
    ------
    Pour flexbox, c'est un peu compliqué en effet. Un bon guide (complet) est là: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ mais c'est complexe de toute façon.
    Ce qu'il faut retenir, c'est:
    - L'élément parent (dans ton cas le <main class="primary-main">) dois avoir la propriété `display: flex;`
    Ensuite, tu peux ajuster vertical ou horizontal en ajoutant `flex-direction: column;` ou `flex-direction: row;` (mais le défaut c'est horizontal de toute façon)
    - Les éléments enfants (dans ton cas les <section class="store-section">) peuvent avoir la propriété `flex: 1;` si tu veux qu'ils s'équilibrent en prenant tout l'espace nécessaire.
    ------
    Pour les prochaines étapes, Je ne sais pas trop quoi te conseiller, à part d'utiliser les dev tools (inspecter l'élément) de ton navigateur et jouer avec les propriétés.
    ------
    Pour la question: Et est-ce qu'on utilise encore les balises HTML <aside> <article> <block> tout ça? Ou on peut s'en sortir avec <section> <main> et<div>?
    C'est marrant parce que quand j'ai commencé <aside> <article> <block> étaient vraiment tout neuf.
    Mais effectivement, tu peut t'en sortir très bien avec juste des sections. Ou même des <div>. C'est pas super important en vrai. Toutes ces balises sont équivalentes à des <div> à part qu'elles sont "sémantiques" (elles ont du sens, elle décrivent le contenu). Le web sémantique c'était le grand truc il y a 3 ans, mais ça retombe un peu. Après, tu fais bien ce que tu veux.. De toute façon ça continuera à marcher.
    -----
    Sinon j'attaque le Javascript? Comment créer une fenêtre de connexion? Des menus déroulants?
    > Le javascript est effectivement super utile, mais tu n'en a peut être pas besoin tout de suite. Ça dépend un peu ce que tu veux faire.
    Et en fait, c'est mon prochain conseil : trouve toi un projets et ensuite bosse là dessus, et apprend les trucs dont tu as besoin pour le faire. Parce que si tu apprends juste pour apprendre, tu va être moins motivée et tu vas oublier ensuite.
    Un truc simple c'est de te faire un CV en ligne. C'est surtout du texte, donc tu as déjà le contenu. Ensuite tu pourras essayer de rajouter des effets, un sommaire, etc.. :)

    Bonne chance en tout cas !!
     
    Rin` a BigUpé ce message
Chargement...