Responsive Web Design Second Project

Code Feedback
1

This is my project, I didn’t really want to copy the example, like I did with the first one :slight_smile:. I could add some more things, but this is it:


I want to ask for some help if I’m here, so how can I make the optional inputs(not required), like age for example, green when they are completed corectly (I have min, max for age), I tried and wasn’t succesful. Any other suggestions are welcomed. Thanks!
2

Welcome to the forums @ClaudiuGheorghe. Can’t see your form full screen. Some things to revisit;

  • Verify your email addr with codepen so we can see your page in the full screen view
  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 9/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
  • User’s should be able to click on the label to select, not just the radio button / checkbox.
  • Change the cursor to a pointer when hovering over the submit button
  • Your page needs to be responsive.
3

Thanks for the observations @Roma, I totally forgot about the tests, I fixed the radio label to be clickable, added the script, fixed the errors (very cool W3C validator, didn’t know about it), removed the <br>'s and modified the pointer to change while hovering over the submit button.
I couldn’t make my page responsive, don’t really know what to do about that.

4

Nice job cleaning things up @ClaudiuGheorghe.

Since the R in RWD stands for Responsive guess we need to work on that.
Looking at your styling we can see that you’re using absolute pixel values for body and .container widths. If the device accessing your page is less than those values your page is not responsive. Why not use a percentage value instead? That would make your page responsive without having to use a media query. Btw, same with the padding in the body, use a percentage value.

5

Sorry for late response. So, I tried to add percentage to both body and .container and it kind of worked, but my container will become very small when resizeing the browser so I changed some things. I kept the pixels for .container and added a min-weight property.

6

@ClaudiuGheorghe, no worries on response time. A hint, if you click the ‘Reply’ to the post the author will get notified. If you click the general Reply button at the bottom, they don’t. You can also include their username like I did yours.

So, there’s something else you can do. If you notice your page has a horizontal scrollbar no matter what the screensize is. You can get rid of that by adding the following to the universal reset;

margin: 0;
padding: 0;
7

Done that and what I’ve noticed is that my title and description got modified a little, I guess it should be a good way to add the universal reset at the beginning to make sure that it doesn’t mess around with other things when the project is larger.