Survey Form - feedback please! (:

Just finished survey form and still slowly practicing and playing with HTML and CSS .
Tbh, code looks like a complete mess to me, specially CSS.
Also, I think survey is not running smooth enough on mobile devices (images are compressed).
Any technical advice is welcome! And design wise, ofc.
Thanks in advance!
Survey Form - Sustainability

I agree with the CSS part it can be improved:

Not sure why the images are given a display flex since you aren’t using flexbox might as well use block.
Also I would avoid using percentages for padding/margin.

I was going to say good job on the box shadow but realized it’s the image lol.
I suggest adding alt text to images for a11y

Overall it looks pretty nice (on desktop) but it’s very messy in the code which will make it difficult to maintain.

I think that a part of coding is making your code readable and easy to understand. Simplifying styles can help with this greatly.

Also, flexbox/grid are your friends. If you learn it well you can come up with simple and robust layouts

Thanks for all the suggestions @Jimbalin !

The problem with CSS (I think) starts when I (as a beginner) try too many different things to see different results and find which one I definitely want to use.

I think that as I get lost in the process, the code gets messier and messier.

Regarding images, yes (I am a cheater): I wanted to use regular box shadow, but since I was already experimenting with different text boxes and font-sizes while creating the survey template (before even starting the code), I just used what I had previously made.

CSS can get pretty complicated but the idea is to keep it simple - this will come with practice. I know people will suggest using shortcuts like bootstrap but you won’t learn css and for front-end roles at large companies, you do need to learn css.

The way I do it is by using flexbox, you won’t have to write a bunch of margins and padding. Flexbox can do a lot out of the gate and it’s easy to read/understand what is happening. Grid is also good but harder to learn - personally I don’t know grid very well as flexbox can solve 80% of layout problems.

I also tend to avoid positional absolute as well - there are some times it is needed but usually you can avoid using it.

Thanks again for more suggestions, it really means a lot to me!
Using plain CSS the right way (as you already mentioned) and without any shortcuts is actually my goal for now, because I know I will eventually get stuck if I just jump into some extensions without proper knowledge of the basics.