I have finished my second project “Survey Form Freecodecamp” for the certification of Responsive Web Desing and I would like to get a comment to help me improve, please note that I am just getting started, just use html and css and I still don’t handle the Responsive…
https://codepen.io/britojesusr/full/PoPxaKa
Thank you, Any comments will be highly appreciated 
:guiño:
Make q max width of 560 media query and have the form at 95%
Hola Jesus!
It’s very nice! 
I would change the yellow color, it hurts my eyes.
It is not clear what you request below in “Send Form” with input for the user to complete.
again, yellow font with green background is a big no no…
Otherwise, you did a great job!
Great survey page,
I really like that when you clicked on the radio buttons, it showed different options! very cool!
For me, I would change the yellow color as well.
also I would add “cursor: pointer;” in your #submit, as for me it shows that it is clickable when hovered over. Just makes it easier for the user.
Indeed. He could add transitions to the opening of the block of 1s to make a little animation.
Good work mate
You mean a maximum of 560 px? for what kind of medium? Actually I have to study the responsive topic more, I still have some fear of applying it.
Thank you, for commenting, I take it into account.
Hi Eze, thank you very much, I will take your suggestions into account. I have a question, if I already sent my project link, can I still edit it? you do not know ?
Thank you.
I like how you made it, and how did make the words be between the green border lines? Also to make better you could have used custom fonts, and other CSS effects. And also how did you make that effect of changing text depending on the radio button chosen without JS? Y otra vez lo gusto es interesante.
Hello, thanks for taking the time to review my work and give me your opinion, I appreciate it…
Thanks for the button suggestion, it is very necessary now that you mention it …
No worries. Anything that you add can easily be deleted.
At the end of your code on CSS, you can add your media queries; or at the beginning; doesn’t matter.
When you target a media query, you select the screen size of the device that the user is using. If you look at your form, it has some width depending on the parent element that it’s associated with; but that’s on a normal size.
If you select the media query, you can tell the form to and the parent to be wider than they really are.
@media (max-width: 560px) {
.parent-element {
width: 100%;
}
.parent-element form {
width: 90%;
}
}
You can also indicate the minimum and maximum width of the device in the same media query.
For more: look at my media queries on my pen for the same project.
Hi Dan, thanks for your appreciation.
Words on border have been automatic due to html and tags…
With several elements are grouped and with the legend it is indicated what title it will have, so to speak…
What you see with the inputs is achieved using the display none property when an input has a certain status checked, is only CSS …
You can see here how it works and leave me a comment of encouragement in my pen
https://codepen.io/britojesusr/full/zYvMGJN
perfect and nice job. Just check if your page is full responsive on phone screen. Use google dev tools simulator.
Yes you can edit in your Profile with freecodecamp.org
Hey there,
How did you line up the green border to go through the titles?
What code editor are you using?
How do you come up with your gradient colors? Just trial and error?
The ID of textarea has some properties that would be a bit foreign for someone just starting as well as the element of fieldset and not at all mentioned on FCC, what tutorial did you learn those on out of curiosity?
I would add a few comments to separate a bit better as well.
Good luck on your journey.
Hi, Dobs…
The border It comes integrated with the html fieldset tag, just change the color with CSS, you can apply CSS without any problem, to change the color, the background and more …
Everything I have applied is included in the FCC Responsive web design classes, only that I extend the definitions a little by helping me on the page “https://www.w3schools.com”
I am using the codepen.io editor also recommended by FCC https://codepen.io/
Gradient colors in the background, I learned it in this class, I just put a little imagination to use it in any possible case :
The textarea tag is used in the freecodecamp class, I only read its property in w3
https://www.w3schools.com/tags/tag_textarea.asp
Sorry for my english,
Terrific job! English is great, this work is advanced and well thought out for a beginner. Great job on the display none for the checked boxes, keep at it!
Welcome to the forums @jesusrbritol. Your form looks good. Some things to revisit;
id must be unique within the document.<br> to force line breaks or add spacing. Use CSS.Yes, you can edit it as long as you edit the same pen and the changes will be picked up. If you create/edit in a new pen then you’ll have to resubmit the link.
Hi, thanks for taking the time to give it a review, this definitely helps me improve.
Should I get an error when I copy from my personal text editor to codepen? I did not understand this …
The other reviews you have given me, I will take them into account and I will return to my project to correct them.
I’ll take a look at a w3 validator and try to use it from now on.
I don’t understand what you mean by this. Errors are never good. Are you saying that when you copy stuff (HTML or CSS) from your editor into codepen you get an error? What error?
I work within an IDE and then copy what’s in the body element and paste it into codepen without any errors. Same with copying the CSS. No errors. What error are you getting?
Sorry I had misread … “Since copy/paste from codepen you can ignore the first warning and first two errors”
Now I have it clear, I analyze my html code in w3 validator