Project feedback before moving on the Personal Portfolio Webpage

Hi guys,

I would like some feedback on my FCC challenges so far.

So here they are:
Tribute Page:
https://codepen.io/checkyogirl/pen/vYNMRyx

Survey:
https://codepen.io/checkyogirl/pen/wvKbvbY

Thanks, guys. Truly appreciated it.

1 Like

Here is the Landing Page Challenge:
https://codepen.io/checkyogirl/pen/xxwNJWb

Nice work on creating so many pages so quickly. I particularly like your backgrounds on your survey and landing page.

  1. Tribute Page
  • it’s cool. The background makes some of the text hard to read, but that’s a style thing. You can ignore that.
  • have you thought about making the YouTube video responsive?
  • you have some repeated id elements and id’s should be unique
  1. Survey
  • Nice page – simple and clean
  • You also have some repeated id’s in your HTML on this page as well.
  1. Landing Page
  • Clean layout
  • same note re: the Erykah Badu page with respect to the YouTube video
  • Have you tried to style the page without using breaks in the HTML file?
  • the reservation and takeaway sections fade into the background and it’s difficult to see. If you want to still show the background have you thought about adding a color and playing around with the opacity?

Very good job overall. Keep up the good work.

Some things to revisit @Check_ya_girl;
tribute page

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • Don’t use <br> to force spacing or line breaks. That’s what CSS is for.
    • If you want seven paragraphs then use seven paragraph elements
  • The page needs to be responsive

survey form

  • Run your HTML code through the [W3C validator]
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • Don’t use <br> to force line breaks or add 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
  • Placeholder text is used to show the format of what is to be entered in the input. It should not mirror what the label says.
  • Change the cursor to a pointer when hovering over the submit button

prod landing

  • Run your HTML code through the [W3C validator]
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • Don’t use <br> to force line breaks or add spacing. That’s what CSS is for.
  • Some of the text blends in with the background and makes it hard to impossible to read. Maybe consider a container for those sections and add some opacity for contrast.
  • The page needs to be responsive

Tribute page:

  1. I would find a background pattern that works when repeated or use a non-repeating full-size background image.

  2. The image caption font size is too small, it’s almost unreadable.

  3. I’d use target="_blank" on the image link so people are not unknowingly taken away from the page they are on. Personally I’d expect the image to open up in a new tab when clicking it and not to be taken to a different site. I think using an image as an outbound link to a different site is questionable UX.

  4. To make the text legible you can add a background color to the text containers and also limit the line length using a max-width (center it with margin auto).

  5. Instead of asking people to blindly follow “this link”, tell them where the link will take them.

Form page:

  1. You are using SCSS but the preprocessor is not set under the settings. On the CSS code box click the cog and then from the preprocessor dropdown select SCSS.

  2. Add some padding to the select elements so they fit the height of the other elements.

  3. Add resize: vertical to the textarea element.

  4. I might give a tiny bit of transparency to the form to let the background image peek through just a little. As it is now the form is blocking a non-abstract image which (at least to me) feels like it is in the way of something I should be seeing.

  5. Remove the repeat on the background image and set it’s size to cover.

  6. Lower the padding on main and the font size of the h1 at small screen sizes. Maybe make the form full width at some point (like below 460px).

Product page:

  1. The text is not legible at all. Something needs to be done to the background image or the text to make it legible.

  2. Why not use the nice form you have from the form project and just adapt it to this page?

  3. Don’t use repeating background images unless they work as a repeating pattern. It just doesn’t look good.

@lasjorg @Roma
Thanks, guys. I will review all your comments and work on it.

@JohnJohn
Thanks, guys. I will review all your comments and work on it.