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
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
Welcome to the forums @robaish. Both your pages look good. Some things to revisit;
For both pages;
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
)
<br>
element to force line breaks or spacing. That’s what CSS is for.individually;
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 But I should, of course. Thanks again!
Hey there @robaish!
I looked at your pages and they look great!
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;
}
oops, Ok, sorry about that
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
You’re quite right
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.
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.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.