Hi there)
I completed my Survey Form. It might look decent (to me), but I want to know others’ opinion. I am certain there should be some changes to make the page/code better.
https://codepen.io/jerrythequad-the-encoder/pen/PoWExJw
Thank you in advance, have a great day)
Looks good, but could you please translate to English ? Also, When I run the tests, The result comes as 16/17. Please fulfill that one too.
I’d make the input boxes slightly taller. Also, I’d center them on big screens.
Thank you for giving my survey form a thumbs up) I changed the last user story, so it’s ok now. Have a great day
Thank you for your reply) I did what you said, hope it looks better now on big screens. Also, I’m going to start the Technical Documentation Page today or tomorrow. Still can’t forget yours: it looks awesome, especially the night mode switch.
It does indeed looks better. There are a couple of improvements you can make but you will learn as you practice.
Can you tell me about those? Or are they ‘on another level’ for someone with my skills?
It just the way the HTML is built. The are a lot of single elements. For instance, the tags and their correspondent input should be within a container.
For instance, this your code:
<label id="name-label" for="name">Имя</label>
<p><input type="text" id="name" placeholder="Введите своё имя" required></p>
Instead of having them both separated like that, you should put them in a single container like this:
<div class="Имя">
<label id="name-label" for="name">Имя</label>
<p><input type="text" id="name" placeholder="Введите своё имя" required></p>
</div>
You may be wondering why?
This allows you to position the elements better. You might have noticed that when you set the flex-direction of the survey form to column, all the items got centered. Even though this is what you want, you do not want every single element to be centered like that.
Therefore, by grouping the elements you will be centering the container of the elements and not the elements themselves. This allows you to better position the elements within the container.
I changed your HTML only:
In this case, I only changed the HTML code for the first input. I put the input and tag elements within a single container (a section element). And it is being centered but now the tag is in the position that it usually will be.
Another tip is to not style general elements like div, meaning that if you are gonna style a div, give it a class or an ID and style the ID or the class but not the DIV tag. That’s why I had to use a section element instead of a DIV element because you gave the div tag a style that will apply to every other div you create.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
