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

[Nastja]

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.

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).

 

[Cirrannai]

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

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 :

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.

 

[hackergirl]

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:

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:

et voilà ce que ça donne!

 

[Cirrannai]

Pour Firefox, ça fait un moment qu'il n'y a plus besoin d'extension particulière pour faire ça

Ah ah ! Je crois que je suis beaucoup trop vieille et plus dans le coup

 

[BoxxyBabee]

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 ).

 

[hackergirl]

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 !!

 

[Cirrannai]

Les attributs style à l'intérieur du HTML ne sont pas périmés, dans le sens où ils sont encore reconnus (et seront a priori reconnus par les versions ultérieures) par tous les navigateurs. On peut encore les utiliser, mais c'est considéré comme une bonne pratique de tout faire dans le cas.
Les bonnes pratiques passent souvent pour de gentilles suggestions, surtout si elles sont difficiles à mettre en place par manque de temps ou par manque de moyens.

Ensuite, pour ce qui est de l'usage de l'anglais, c'est aussi une des bonnes pratiques en informatique, principalement dans le milieu professionnel. C'est pour rendre le code plus accessible à une personne qui arrive dans l'équipe informatique, même si son français n'est pas parfait.

Ensuite, pour ce qui est des sites peu compliqués à te conseiller, j'en ai pas en tête pour le moment... Peut être que si tu cherches dans des pages perso de gens, plutôt que sur des gros sites, ce sera plus simple...

 

[hackergirl]

Sous firefox, pas (plus) besoin d'utiliser firebug, les dev tools inclus avec le navigateurs sont très bien (et plus clairs à mon avis).
Pour le style à l'intérieur des balises, c'est très utilisé.. Mais souvent ce n'est pas parce que les développeurs l'ont ajouté à la main. Il ont peut être du javascript qui ajoute certains styles dans certaines conditions, etc.. Ce que tu vois dans les dev tools est le résultat, mais ça ne correspond pas exactement à ce que le développeur a écrit. Ça a pu être changé parc du code ailleurs..

 

[Aqua]

@Nastja Un site avec un DOM bien fait http://html5doctor.com/ En plus tu as plein d'infos utiles dessus

Sinon dans la catégorie extension sympa, j'ai pesticide sur chrome : Quand je dois débuger un truc, généralement c'est ce que j'active en premier ça permet de mettre le doigt sur les gros problème de structure ou de whitespace. (l'histoire de ma vie).

Si tu débutes, je te conseille de te renseigner sur la propriété box-sizing et d'utiliser border-box : Ca élimine pas mal de petits problèmes.