Thoughts on my survey form and tribute page?

Hiya!

Just finished my first projects – any feedback would be much appreciated!

Survey form: https://codepen.io/robaish/pen/PoGVwRB

Tribute page to one of my favorite humans: https://codepen.io/robaish/pen/qBaQKrQ

Cheers,
Robert

1 Like

Welcome to the forums @robaish. Both your pages look good. Some things to revisit;
For both pages;

  • 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.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

individually;

tribute

survey

  • For responsiveness, start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design. Attaching screenshot of the survey form on my laptop at not quite full screen.

1 Like

Thanks for the feedback, very thoughtful! Will definitely be using the W3F Markup Validator.

Truth be told, I didn’t bother with all the screen sizes for this assignment :stuck_out_tongue: But I should, of course. Thanks again!

Hey there @robaish!

I looked at your pages and they look great!

Survey Form

The survey form looks amazing, and it is responsive, the screenshot that @Roma provided is a glitch from CodePen because when I reloaded the page here’s what I got:

If you take the page to GitHub pages or some other hosting service, the bug should be resolved. NOTE: I am on a Surface Pro 4 so this is the desktop view in the screenshot.

I agree with the Html coding errors that @Roma included in his assessment. Everything else looks great!

The tribute page also looks great with tests passing! It’s also responsive.

@robaish everything looks great, but I do recommend that no matter what make everything you make responsive, even if it’s a web app made for desktop make it responsive to the best of your ability because Web design is changing and increasingly of the web is being accessed by Mobile devices. It’s not a recommendation it’s a requirement.

Hope this helped!
Best,
Cy499_Studios

The R in RWD stands for Responsive

No, not a codepen glitch. I copied the code to my local machine and see the same issue.
And I did say that when I loaded the page on my laptop it wasn’t quite full screen.

@robaish, Note that vertical is not a valid value for the flex_direction property.
From line 250 of the CSS editor;

@media (max-width: 799px) {
  .flex-container {
   flex-direction: vertical; 
  }

@Roma

oops, Ok, sorry about that :grinning_face_with_smiling_eyes:

If anything, I’m not sure why that’s happening ebcuase when you reload it the page seems to work fine, if anything it might some CSS running that’s overlapping with the correct CSS to scale.

Hey thanks so much for the feedback! Very kind. Absolutely agree on the responsiveness. What I meant is that I didn’t want to sweat every pixel since this is not production quality work. But I did use the Responsive Viewer to make sure it works on most devices quite nicely :slight_smile:

You’re quite right :smiley:

I’m all in on great design and responsiveness is a must. Just couldn’t spend the extra time with media queries for this. Normally, I’d resize and add breakpoints for any screen size that is not working.

Ah, thanks! Should be column of course. Cheers.

1 Like

The easiest way to style for responsiveness is to start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.

2 Likes