Hello everyone, I just finished Responsive Web Design and need some feedback for me! It’s a Tribute page and Survey Form. All constructive feedback is welcomed!
@solness.stf Your page looks excellent and awesome but few things to revisit:
- Analyze your HTML and CSS, like this:
- Run your HTML code through the W3C validator . There are HTML coding errors you should be aware of. Since copy/paste from codepen, you can ignore the first warning and first two errors.
Keep it up!
Happy Coding!
1 Like
Welcome to the forums @solness.stf. Your pages look good. Some things to revisit;
tribute page
- The test script, with all tests passing, should be included when you submit your projects.
Your page passes 7/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand. - Codepen provides the boilerplate for you. It only expects the code you’d put within the
bodyelement in the HTML editor. (No need to include thebodytags). 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.
For instance, links to fonts go in the box labeled ‘Stuff for <head>’
Review this for an understanding of the HTML boilerplate tags. - Run your HTML code through the W3C validator.
There are HTML syntax/coding errors you should be aware of and address. - Do not use the
<br>element to force line breaks or spacing. That’s what CSS is for.
Reference MDN Docs
If you want multiple paragraphs then use multiple paragraph elements
survey form
- Keep the test script when forking the pen (
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
The test script, with all tests passing, should be included when you submit your projects.
Your page passes 15/17 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand. - Codepen provides the boilerplate for you. It only expects the code you’d put within the
bodyelement in the HTML editor. (No need to include thebodytags). 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. - Run your HTML code through the W3C validator.
There are HTML syntax/coding errors you should be aware of and address. - Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upxper right of each section and then click on the respective ‘Analyze’ link.
The one for CSS is good. Use it and address the issue(s).
(The one for HTML misses things which is why I recommend W3C) - Do not use the
<br>element to force line breaks or spacing. That’s what CSS is for.
Reference MDN Docs - User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
- Change the cursor to a pointer when hovering over the submit button
1 Like
Thank you for your advice! I will revise and fix my code.
1 Like
Thank you for your advice! I will revise what you point out.
I have fixed my code using Analyze function of Codepen and used W3C validator! Many errors found! Thank you again for your advice!
1 Like
Add the link in the script tag as an external script in Settings > Js in codepen.
it should be there by default. Alternatively use the green button to check tests and READ the full error carefully and spend some time working on it . Good luck !
1 Like
Thank you Exotic, all the questions resolved with your advice! My codepen pages were lacking script tag that should be there as you point out. Now I’m fixing them.
Roma thank you again for your comment! As you said my codepen was lacking “test code” to check. Other advices were useful as well, and many errors found.
Good job cleaning things up @solness.stf. Just a couple of things you may want to revisit;
tribute page
Run codepen’s CSS validator. (click on the chevron in the upper right of the CSS editor and select “analyze CSS”)
Be wary of having duplicate selectors. It can make maintenance much harder.
survey form
Run codepen’s CSS validator. (You can also use the W3C CSS validator)
Just so you’re aware, you have additional whitespace in from of two of the properties. You’ll want to remove that.
Roma, thank you again & again for your comment. Yes my css code has strange whitespace and duplicate selector that I fixed.
My finding: Validation services is essential for coding. I will keep up studying.
1 Like
We’ve all been there. You’re doing great.
Happy coding.
1 Like
Hello solness, I’ve visited your tribute page and I saw that you haven’t used a figure tag for your images. Although this is not mandatory for the project, I would suggest that you add one so there’s more semantics in the structure. I would suggest changing your code like this:
From this code:
<div id="img-div">
<img src="https://dl.dropbox.com/s/89xyvsefgtoz807/publicdomainq-0010810jbb.jpeg?dl=0" alt="Hokusai Picture" id="image">
<p id="img-caption">Painting by Hokusai "The Great Wave off Kanagawa"</p>
</div>
To this code:
<figure id="img-div">
<img src="https://dl.dropbox.com/s/89xyvsefgtoz807/publicdomainq-0010810jbb.jpeg?dl=0" alt="" id="image" >
<figcaption id="img-caption">Painting by Hokusai "The Great Wave off Kanagawa"</figcaption>
</figure>
Also note that when an image is inside a figure tag with figcaption, you don’t need an alt description (actually it would repeat infomation, which can be unconfortable for screen readers).
Hope this helps 
1 Like
Thank you germankousal!
Could you tell me what is the point of using figure tag? Under what circumstances should I use it? I checked on internet but this point still does not clear for me.
I’m glad I was of help!
I’m not an expert, but I think that you should always use <figure> instead of a <div> for wraping up content related to figures or images in a more semantic way (actually not, see edit below), so screen readers and other computers can understand better what that section is about.
The whole point of semantic tags in HTML5 was to replace generic tags like div in several particular use cases that they where being used. By doing so your html code can be better understood by software (which can infer what’s a <figure> section meaning, while a generic <div> won’t tell anything about the content), and also be more accessible by beeing more accurately parsed by screen readers.
You may want to revisit the lection about <figure> in FCC:
Edit:
Well, I found some more information about when to use <figure>, and maybe when you are inserting a company’s logo into a webpage you shouldn’t wrap it around a figure tag, like discussed on this link:
1 Like
Oh I completely forgot this lesson… I reviewed it and fixed my code. Thank you very much anyway I will keep on!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.