Need help with learning how to use CSS

HTML-CSS
#1

Hello everyone, I finished FCC Responsive Web Design course except projects twice. I made the Tribute Page and did the HTML part for Survey Form but as soon as I need to get to CSS to center everything, change field sizes and etc. I am completely lost.

For HTML I was able to find anything I needed online but not for CSS. When I looked for CSS people would get complex answers in forums and such, leaving me with no option but to copy the solution as it was always at least 5 lines of code for 1 element.

What is the best way to learn using CSS properly? Is it okay to copy code from forums, inspect examples of other survey forms? What would you recommend, please let me know because I feel like I learned almost nothing after completing CSS part twice and spending hours on reading MDN CSS section…

#2

Yeah, CSS is weird and a lot of developers struggle with it. But it is also very powerful and can sometimes elegantly solve complex problems.

I found the book CSS Mastery to be a good starting place. Also, the site css-tricks is a great resource - I refer to their guide on flex all the time.

1 Like
#3

My approach to using CSS properly is to flail around like an idiot until I accidentally hit my target, and then clean up any evidence of the other dumb crap I tried in order to make the button be a different shade of yellow.

5 Likes
#4

The thing with CSS is that you can drive it to insane levels (“How to build a village scenery with 100 different houses in a winter landscape including starry sky with only CSS and a single div”). The most important skills you’ll need in real life CSS though are understanding the box model, flexbox, grid, and the position property. If you feel you don’t have enough grasp on those, just make a test webpage and push divs with different background-colors around until it starts making sense.

2 Likes
#5

Drawing with CSS is my current obsession… lol. It has helped me understand the interaction between styling and HTML elements, but it is overkill for most applications. :wink:

Definitely do this. The results will look awful, but it will allow you to keep track of how the boxes on your page fit together, and show you how the different display setting behave. After a few tries, you should get a halfway decent understanding of how to get CSS to do what you want it to.

1 Like
#6

Thank you, I will try the background color approach as I like to use visuals for learning and as I could not see which element belongs to which box it made it almost impossible for me.