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.
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.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.