Feedback for my survey form page

Code Feedback
1

Hi, I’m very new to HTML and CSS and this is one on my first projects. I know it’s not responsive but for the moment I’m not focusing on mobile devices browsers(I will do it later). Can you give me some advices to improve my code? The language of the text is in Italian but if it’s necessary I’ll translate it in English.

Project link : https://codepen.io/lool4231/pen/LYPOLEV

Thank you for your time ! :slight_smile:

1 Like
2

Hi Stefano,

Can you give me some advices to improve my code?

Actually a really good thing to improve the code would be to start with the mobile version and do the tablet/desktop sizes later with min-width media queries.

these guys:
@media screen and (min-width: xxxxx) { }

I started exactly like you. I also thought I would do the desktop first and then go down to the smaller ones. And actually most of the internet was done this way around at first. But mobile devices exploded and after a lot of painful trial and error people came to the general consensus that doing the mobile version first is generally easier. Hence the term “mobile first” (besides optimizing for mobile in other ways than layout). I had to learn it the hard way myself.

Now I would say the reason why mobile first is easier, is because the mobile layout tends to be simpler. Often elements can simply be made bigger and you are fine on the bigger screen. Also in the mobile version there is usually only one big tall column. Content tends to be just stacked on top of each other, because there isn’t much space or choice anyway. It’s easier to make that content into more columns than simplifying a more complex desktop layout.

You can start with a narrow window in codepen or in the mobile view in the dev tools of your browser. 320px wide is about the smallest phones in use. Once that version is good to go, make the window wider until you find a point where the layout becomes ugly. There you add a media query and adapt they layout. Then you make the window again wider until something becomes ugly, fix it etc. working your way up until the desktop.

These are my two cents.
All the best.

1 Like