Salut !
 
Bon je me suis motivé pour la création d'un site pour la promotion de mon activité professionnelle. J'ai quelques notions de HTML/CSS, je sais utiliser les fonctions basiques de softs tels que Photoshop ou Illustrator, et pour plus tard je me replongerai dans la doc Php/MySQL pour essayer de dynamiser un peu tout ça.
J'ai commencé par me replonger dans les docs HTML/CSS pour me remémorer les bases syntaxiques. Et aux détours de mes lectures, je suis tombé sur "KNACSS" : http://knacss.com/
Ca m'avait l'air pas mal, donc je suis parti dans l'idée d'utiliser cet outil pour me faciliter (ou pas?) la vie.  
 
Déjà est-ce que c'est une bonne idée ?  
 
Bien entendu, je suis encore au stade de l'expérimentation sur à peu près tout ce qui est proposé par KNACSS.
Du coup le site dans sa version actuelle n'est qu'une sandbox sans aucune prétention.
 
http://juliengilles-ski.com/
 
La raison qui m'a poussé à poster est un problème sur lequel je bloque depuis hier. Ca concerne l'alignement vertical de la grille de photo située à droite de la page. Et donc plus généralement le centrage vertical d'une grille créée par KNACCS au sein d'une autre grille.
J'ai en effet sur cette page une grille de deux colonnes au format 2-1 (2/3 - 1/3). Colonne de gauche pour le contenu et dans la colonne de droite une nouvelle grille de deux colonnes pour afficher les photos en mosaïque.
En gros si je ne m'abuse, je dois trouver le moyen de centrer le bloc <ul> (conteneur des enfants formant ma seconde grille) verticalement au sein du conteneur <aside>.
 

 
J'ai beau chercher des méthodes et les essayer un peu toutes, rien jusqu'ici n'a fonctionné. Je suspecte fortement que la méthode de mise en page que j'utilise Flexbox + Grid via KNACSS donc, ne soit pas non plus la plus traditionnelle; d'ou peut-être quelques problèmes inattendus...
 
Je trouverai sans doute une solution, puis si ça tombe cette grille va gicler d'ici 2h, mais j'essaye de me cultiver un peu !
 
Quid de l'utilisation du module "Flexbox" ? Je n'ai utilisé que ça dans cette page test, c'est plutôt pratique mais déconseillé pour des raisons de compatiblité si j'ai bien suivi ?

Ca ne concerne pas ta question, mais j'ai quelques remarques que je fais souvent aux débutant en HTML pour les sensibiliser aux bonnes pratiques , notamment en rendant accessible (niveaux A, AA et AAA) le site aux personnes handicapées visuellement (entre autre). Par ailleurs, les règles pour rendre un site accessible sont souvent proches de celles pour faire en sorte que son site soit bien référencé dans les moteurs de recherche. Ben oui, finalement, un moteur de recherche est "aveugle".
 
1) sur tous tes liens, mettre l'attribut "title" pour indiquer où on va quand on clique dessus
2) mettre les attributs "title" et "alt" sur des <img /> : title pour décrire l'image, alt, pour afficher un texte de remplacement si l'image n'est pas affichée (parce que l'url donnée n'existe pas ou que l'utilisateur a un navigateur configuré pour ne pas afficher les images.
3) http://www.alsacreations.com/artic [...] aside.html -> les <h1> sont dans les <article> et non à l'extérieur
4) t'as pleins de <!-- --> qui trainent avec rien dedans semble t-il. Pas propre
5) Moniteur de Ski et Snowboard<br>Adultes et Enfants -> évite les <br />. Tu peux faire 2 <p> à la place en réduisant les marges entre. Ca pourrait même être des <h2> sur le plan sémantique.
6) puisqu'on en parle, justement, toujours utiliser les balises pour leur "aspect" sémantique et non pour leur aspect visuel Normalement, un site bien fait, c'est un site où on est capable de repérer les titres, menus, contenus... en l'affichant sans son CSS (fonction du navigateur). Si ce n'est pas le cas, alors il faut reprendre le html.
7) autant que possible, limiter les balises. On utilise une balise html pour structurer le document (les infos de la page) et non parce qu'on en a besoin pour le CSS.
 
Sinon, pour faire un site, a fortiori quand on débute, mieux vaut passer par un CMS type Wordpress, Joomla, Drupal... T'as toujours la charte graphique à t'occuper (éventuellement en partant d'un thème gratuit trouvé sur le web) mais toute la gestion du backoffice et frontoffice est faite (en php/Mysql). par ailleurs, ce genre d'outil dispose d'une grosse communauté pour aider et y'a pleins de plugins pour étendre les fonctions de base.

Salut !  
 
Tout d'abord merci pour ta réponse. Je prends note et effectue les corrections sur les points justement relevés :
 
1) Corrigé, je vais prendre le réflexe de le faire tout de suite.
2) Idem
3) Corrigé, voilà encore de la lecture à faire dirait-on.
4) C'est une astuce que j'ai trouvé en ligne qui permettait d'enlever les espaces horizontaux entre les boutons du menu. Je l'avais fait sur fond blanc au départ, et esthétiquement c'était mieux. C'est corrigé.
5) Corrigé, passé en h2 avec adaptation des marges.
6) Pourrais-tu illustrer un cas précis ? utiliser <header> avec des classes par exemple cay mal ?
7) Ok donc il faut essayer de minimiser le nombre de conteneur ? Mais pour la mise en page il faut quand même parfois imbriquer des éléments non ?  
 
Merci pour tes conseils concernant les CMS, c'est vrai que c'est sans doute mieux pour quelqu'un comme moi (pas vraiment le temps de m'investir la dedans sur du long terme) mais j'aime l'idée d'apprendre à manier ces langages; donc j'expérimente.
De plus comme c'est une petite page perso, je n'ai pas vraiment besoin de fonctions avancées de màj. Je vais sans doute essayer de rendre le contenu de la page (sous le menu donc) dynamique via des includes histoire d'éviter les redondances; je crois que ça sera suffisant. Il n'y aura pas plus de 3 ou 4 pages en fait...
 
Merci encore pour tes conseils.

La sémantique des balises, c'est leur signification fonctionnelle. Donc, employer <header> plutôt que <div id="header"> ou <div class="header"> est très bien.
Pour une info importante, il faut utiliser <strong> plutôt que <b> ou <span class="bold">. De même, quand on fait un menu (principal ou contextuel), il faut utiliser <ul> et des <li> puisqu'on propose une liste d'items.
 
Autre exemple : tu veux afficher 4 blocs d'infos en "carré" (2x2 blocs). Il faut utiliser 4 <p> avec le css qui va bien plutôt qu'un <table> de 2 <tr> avec 2 <td> chacun ou même 4 <div>. Pour rappel, <div> (balise de type bloc) et son équivalent inline <span> n'ont aucune valeur sémantique. Avant le HTML5 et l'introduction, entre autres, des nouvelles balises sémantiques <nav>, <article>..., <div> jouait ce rôle d'encapsuleur, de conteneur d'autres balises. Aujourd'hui, je pense qu'il va être de moins en moins nécessaire.
 
Et oui, dans tous les cas, on peut encapsuler (ie imbriquer) des balises les unes dans les autres à partir du moment où, là encore, ça a un sens (sémantique et fonctionnel).

Ok merci pour ces conseils.
Les nombreuses docs et autres tutoriaux que l'on trouve en ligne sont très complets; mais il manque parfois cet aspect "terrain" qu'une personne peut t'expliquer en live...
 
Quand je fais des recherches sur des questions précises, je trouve généralement tout et son contraire. La dernière en date concerne une "bonne" méthode pour faire des boutons stylés via CSS.
 
Certains disent qu'il faut utiliser des balises <a> avec un classe "button" définie dans le CSS
D'autres disent qu'il faut utiliser la balise <button> avec du JS pour dirigier vers la cible lors de l'évènement onlick.
Puis là je viens de voir une autre solution qui consiste en encapsuler le menu dans une balise <form> afin d'utiliser l'attribut "formaction".
 
Quand je lis tout ça j'ai quand même l'impression que c'est assez Freestyle en générale non ?  
 
J'ai finalement opté pour une liste avec <ul> et <li> et chaque bouton en repris dans une balise <a class="menubutton">
Ca me semble propre...  
 
Tu dis que plutôt de faire une grille via la fonction "grid" de KNACSS pour ces photos, je peux avoir un résultat similaire avec 6 ou 8 <p> disposés via le CSS donc, je vais essayer ça. Ca m'a l'air d'être un bon exercice !

KNACSS m'a l'air d'être une usine à gaz Je vois pas trop l'intérêt pour du CSS.
 
Pour un bouton qui redirige l'utilisateur sur une nouvelle page, c'est <a> (car notion de navigation et lien entre les pages).  
Pour un bouton permettant de poser un formulaire : <input type=submit" />
Pour un bouton effectuant une action (autre que soumettre ou reset) au sains d'un formulaire : <button>
 
Donc, non, c'est aps freestyle quand tu connais la sémantique et contexte d'utilisation de chaque balise. Mais il est vrai que beaucoup prennent des libertés et nombreux sont ceux à avoir "appris" sur le tas, parfois, voire souvent via des tutos remplis de "n'importe quoi"
 
Le site d'Alsacreation est un très bon site, son auteur, Raphaël Goëtter a écrit des livres sur le CSS 2.1 et 3.0 vraiment excellents !
 
Pour ce qui est de l'accessibilité des sites web aux personnes handicapées, alors là, c'est tellement peu mis en avant que j'en désespère Au passage, une bonne pratique : mettre un lien "skip" (<a>, non visible à l'écran via un margin-left négatif, surtout pas "hidden" ) pour permettre à un aveugle de sauter direct au contenu de la page et pas se retaper la lecture écran du menu principal et contextuel
 
Je recommande d'installer le lecteur d'écran NVDA. C'est gratuit et ça te donnera une très bonne idée du confort d'utilisation de ton site par une personne handicapée visuellement. Ferme les yeux et essaye de surfer sur ton site juste avec ce que te lit NVDA. Teste aussi les grands sites français : tu vas pleurer et comprendre ce que vivent ces personnes là...

 
Ok j'y vois plus clair au niveau des boutons, merci.
 
C'est justement sur Alsacreation que je suis tombé sur KNACSS. Ainsi que sur [urlhttp://schnaps.it/]Shnapsit[/url] un générateur de template HTML5.
Comme le site avait l'air sérieux, je me suis dit que j'allais utiliser les outils qu'ils vantaient.
J'ai installée la version simple de KNACSS et j'ai créé un template minimaliste avec un menu pour me lancer sur une bonne base.
 
En tout cas je note ce que tu me dis sur l'accessibilité, c'est bon à savoir.