Premières lignes de code

Mes premières lignes de code en HTML et CSS

Vous pouvez retrouver cet article en anglais sur le site de dev.to et mes projets d'apprentissage sur Code Pen ou cet article.

En tant que web designer, il est souvent frustrant de ne pas concrétiser ses projets et de dépendre d'un tiers pour que nos designs prennent vie. Afin d'y remédier, le meilleur moyen était d'apprendre à coder! C'est ainsi que j'ai découvert la joie de la syntaxe, de passer des heures à comprendre pourquoi ça ne marche pas et me rendre compte que le coupable était une faute de frappe!

Plus sérieusement, comme tout développeur débutant, j'ai commencé par apprivoiser le html et css. J'ai trouvé le html assez simple à prendre en main Les lignes de code, si impressionnantes pour un néophyte deviennent assez vite familières, une fois la syntaxe acquise. A mon sens, le plus gros challenge lorsqu'on écrit du html est de regrouper les différents éléments entre eux, non seulement pour obtenir l'organisation de page qu'on avait voulue, mais aussi pour que ces regroupements apportent un sens et optimisent notre code, notamment en vue du css.

Selon les besoins, on utilisera <div> pour regrouper des éléments spatialement, <section> pour du contenu partageant la même thématique, <article> pour du contenu autonome, <nav> pour la barre de navigation, etc. On choisira ensuite d'attribuer à ces balises un "id" si elles sont uniques, une "class" si elles sont récurentes.

Si le html paraît assez abordable, il peut parfois devenir un peu redondant et il ne permet d'afficher qu'un contenu brut, sans mise en page. On a alors hâte, surtout en tant que designer, de pouvoir s'amuser un peu avec CSS et de rendre tout ça un peu joli et là, c'est le douche froide!

Certains aspects de css vont de soi. Je veux changer ma police: font-family, ma couleur de fond: background-color, centrer mon texte: text-align et ainsi de suite. Mais les difficultés ont commencé avec flexbox. Sur le papier, ça parait assez simple, mais en vrai, comme le positionnement d'un enfant dépend aussi de celui de son parent, j'ai passé pas mal de temps à positionner mes différents éléments (et j'ai eu des gros maux de tête aussi!). Je me suis bagarrée avec des z-index et des positions "absolute". Et il a fallu que tout ce petit monde continue de bien se comporter selon les différentes tailles d'écran. Pour mon projet de landing page, je n'ai pas voulu lâcher le morceau et m'en tenir à mon design, j'étais assez fière quand j'y suis arrivée!

Et finalement, on en revient au nerf de la guerre, comment se transmettre les informations, documents entre designers et développeurs pour que les designs soient respectés et que les développeurs ne perdent pas de temps? J'avais l'habitude d'annoter mes écrans avec des pixels et des rem pour défnir les espaces et de fournir la liste des tyopgraphies, couleurs. Je suis contente d'avoir maintenant les bases pour me rendre compte du travail que nécessite mon design et je pense plus utiliser des termes de code et utiliser des règles bien définies. Par exemple, indiquer que ce titre est un h1, qu'il doit être centré et avoir une marge de x rem en haut et en bas.

C'est toujours un peu fastidieux pour moi de mettre à plat mes designs et de les structurer rigoureusement, mais c'est vraiment essentiel pour que la collaboration se passe bien et qu'il n'y ait pas de frustration de chaque côté.

J’ai aussi découvert le monde du développement web et je trouve que c’est un environnement très stimulant : il y a un nombre incroyables de ressources, d’articles, de forums, de réseaux. C’est vraiment une chance d’évoluer dans un milieu si dynamique !

Et maintenant, en route vers le Java Script!