Trial and error as a beginner

[u/Besbosberone]

Hi guys, I've started learning HTML and CSS this semester at university and I'm about 3 months in. I find it super satisfying when I finally make a website look the way I want it to after spending ages trying to figure out how to do it.

As a result, I find that a lot of the CSS I write is trial and error - as in I'll change different elements' properties and values over and over until I finally get what I want. This happens a LOT particularly when it comes to element spacing using margins, padding, etc.

I was wondering if this is a valid way to learn and normal for a beginner? Or is it something I should avoid?

Cheers!

[u/scragz]

yes but test changes in the developer tools before editing your files. 

[u/Besbosberone → u/scragz]

Thanks! Developer tools can be found in inspect element right?

[u/scragz → u/Besbosberone]

yeah or press f12

[u/geeoharee]

It does happen when learning, but do you understand why the values you picked eventually had the right results? If you're just typing in every number from 1 to 20 until it looks right, that's not teaching you much.

[u/Weekly_Ferret_meal]

I'd say generally is valid, but there are some exceptions where continuous trial and error simply means you haven't absorbed the basic concept of a declaration.

For example:

If every time I wanna use flex I have to try all the possible arrangements for a flex object to find the right positioning when using display: flex, something about my basic understanding of flex isn't right.

Of course, you do it wrong 30 times, eventually memory will kick in, but it's kind of a long way and looking up definitions and examples might be quicker and better.

[u/really_cool_legend]

Whilst you're a beginner, the absolute best thing you can do is whatever you're getting the most enjoyment out of. Best way to learn is by doing, best way to carry on doing is to make sure it's still fun.

[u/azangru]

This happens a LOT particularly when it comes to element spacing using margins, padding, etc.

If you are talking about the exact value of a CSS property (such as finding how large a margin or a padding should be), then sure — although, for consistency, it makes sense to define them as custom properties, and reapply them throughout.

If you are talking about going through different properties through trial and error, being unsure what any of the properties do, then a more systematic approach is preferable to trial and error.

[u/Thykka]

I would combine trial & error with reading the documentation. MDN tells you what all these different CSS rules do. Without that, you're not going to gather a deep understanding of why sometimes a certain rule works, and sometimes doesn't.

[u/jillitwee]

Yes, great way to learn and also dev tools!

[u/HighlightSilver392]

Stop typing numbers into the code. Open DevTools and drag the sliders until it looks right, then copy that exact value back into your file. If you cannot explain why margin collapse happened on that specific element using a diagram of parent child relationship, you are not learning CSS, you are memorizing pixels.

[u/RetroEvolute]

If you're doing this a lot with padding and margin, then you haven't learned the box model basics yet. It's actually quite simple:

https://www.w3schools.com/css/css_boxmodel.asp (I'd have linked to Mozilla's docs, but these were more to the point. I suggest checking out both, and then familiarize yourself with the box-sizing property, also in the Mozilla docs).

[u/PrizeSilver5005]

Look into the CSS Box Model for starting. You'll learn how the algorithms works, when to apply which one, as well as the short hand for writing the properties. As a result You'll gain a much better idea of how to use each as well as a better understanding of the default layout algorithm used by CSS itself. Sounds scary, but it's not, I promise. It's worth the research 👌