My first lines of code in html and css

As a web designer, it is often frustrating not to build your projects and depend on a third party to bring your designs to life. The best way to remedy this was to learn how to code!

That's how I discovered the joy of syntax, spending hours trying to figure out why it doesn't work and realizing that the culprit was a typo !

More seriously, like any beginner developer, I started by learning html and css.

I found html quite simple to learn The lines of code, so impressive for a neophyte, become familiar quickly enough, once the syntax is acquired. In my opinion, the biggest challenge when writing html is to group the different elements together, not only to get the page organization we wanted, but also to ensure these groupings make sense and optimize our code, especially for css.

Depending on the needs, <div> will be used to group elements spatially, <section> for content sharing the same theme, <article> for standalone content, <nav> for the navigation bar, etc. We will then choose to assign these tags an "id" if they are unique, a "class" if they are recurrent.

If html seems quite understandable, it can sometimes become a bit redundant and it only allows to display raw content, without layout. So we can't wait, especially as a designer, to have fun with CSS and make it all look nice and it's a cold shower!

Some aspects of css are quite obvious. I want to change my font: font-family, my background color: background-color, center my text: text-align and so on. But the difficulties started with flexbox.

In theory, it looks pretty simple, but in real life, since a child's positioning also depends on his parent's, I spent a lot of time positioning my different elements (and I had big headaches too!). I got into fights with z-indexes and "absolute" positions. And all this little world had to keep on behaving well with the different screen sizes. For my landing page project, I didn't want to give up and stick to my design, I was pretty proud when I got there!

And finally, one of the most important, how to transmit information and documents between designers and developers so that designs are respected and developers don't waste time? I used to annotate my screens with pixels and rem to define the spaces and provide the list of typos and colors.
I'm glad I now have the basis to realize how much work my design requires and I'm thinking about using more code terms. For example, indicate that this title is an h1, that it must be centered and have a margin of x rem at the top and bottom.

It's not the fun part for me to rigorously organize my designs, but it's really essential for the collaboration to go well and there's no frustration on either side.

I also discovered the world of web development and I find it a very stimulating environment: there is an incredible number of resources, articles, forums, networks. It's really a chance to evolve in such a dynamic environment!

And now, let's go to Javascript!

P.S: You can see my work here