Responsive Web Design Certification Complete - Feedback would be great! :)

Code Feedback
1

Hey guys!! I just finished the Responsive Web Design Certification part :slight_smile:

Would be great to get some feedback, what was done good and bad.

I think the worst part so far is to make the css to be responsive around all platforms - advises are welcome :smiley:

portfolio page below:
https://cdpn.io/guilherme-adrega/debug/eYYYjVq/ZoMBazojDXLk

2

Hi @PABCon,
The link you provide to your portfolio page is expired. Link to the full view instead.

Tribute page;

  • keep the test script (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>) when forking. You pass 7/10 user stories
  • tribute info is a little hard to read when it’s centered. Would be easier if it was aligned left.
  • Review the lesson about giving meaningful text to links

Survey Form

  • keep the test script (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>) when forking. You pass 12/17 user stories
  • make it so users can click on the labels, not just the radio button/checkbox
  • change the cursor to a pointer when hovering over the submit button
  • ideally, none of the radio buttons or checkboxes should be selected by default

Product Landing page

  • only passes 6/16 user stories
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • some things you can clean up in HTML

Tech Doc page

  • passes 8/16 user stories
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • you have a duplicate in CSS that affects how your page displays
    • in HTML you have an element used incorrectly and two instances of an obsolete element
  • on smaller screens the font is kind of small

Personal Portfolio

  • passes 4/12 user stories
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • things to clean up in HTML
  • the ‘Show All’ link does not link to your dashboard. Clicking it shows me mine.
1 Like
3

Hi @Roma, thank you for taking the time to look into all my pages.

I will be sure to fix the elements you mention on the next days!

Much appreciated.

4

Hi @Roma issues on Tribute page and Form Page have been addressed. max points on all.

Tribute:
https://codepen.io/guilherme-adrega/pen/rNBQBmr

Form:
https://codepen.io/guilherme-adrega/pen/NWKEjMg

I don’t agree with you though on the text being at the center in the Tribute page, i think it looks better there, but added some extra padding to make it clearer.

Will work tomorrow on the remaining pages.

5

Hi @Roma!!

I have fixed the rest of the websites. There are still few items i cannot figure out.

If you have the time to advise would be great, but i would say all scores are very close to top and i fixed some stuff that wasnt done very properly.

Portfolio linked to all the rest.
https://codepen.io/guilherme-adrega/full/eYYYjVq

6

Hi @PABCon,

I’m starting with your portfolio page since I see it first.
Personal Portfolio

  • codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to the <head> click on the ‘Settings’ button and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • I only mention the above because codepen is very forgiving. In your HTML, the <nav> and <footer> should be within the <body>, not outside of it.
  • clean up your CSS. You have the following;
ul > a:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

li {
  color: white;
}

but nowhere in your HTML are you using an unordered list or any list elements

  • in your welcome-section you may want to rethink your color choice. White text on a white background is a little hard for anyone to read

Survey Form

  • you have an opening <section> element and then an opening <form> element but you close them out of order.
    • you did the same thing with your <fieldset> and <div> elements
  • try and not use the <br> element. There are other ways to group your radio buttons and checkboxes

Tech Doc page

  • passes 14/16 user stories. You can click on the red button after running the tests and it will tell you where it’s failing and what it’s expecting
  • <xmp> has been deprecated since HTML3.2 and completely removed from HTML5. Read up on using the <pre> element.

Product page

  • passes 15/16 user stories
  • <footer> belongs inside the <body> element
  • there are stray closing anchor elements (</a>). For instance, on line 52. There are others, just pointing out one
1 Like
7

Hey @Roma , once again really thank you for the time you spent on this! It really means something to me.

I have done all the fixes and i believe now it should be on spot.

Any positive comments though?

8

Hi @PABCon, I’ll take a look at your pages later. I just wanted to say that you’ve done a really good job on all your pages. My intent with the code review was not to tear you down, it was to help you make good pages a little better. And you’ve been doing that. My apologies for not saying right off that you had good looking pages.

9

Hi @Roma,

Don’t worry :slight_smile: just messing with you. I know what your purpose was and I learnt with my mistakes, that’s how feedback works.

Thank you for the kind words and hope to work with you in some other things if possible.

Ps: see if you can reply to the private message I sent you.

Cheers