Chocolate Teapot - Product Landing Page - Feedback much appreciated!

Code Feedback
1

Hi there,

I’ve just completed one of FCC’s new challenges, the product landing page. Decided that my project was going to be a chocolate teapot page but hadn’t realised the trouble I’d have trying to find chocolate teapot images there are free to use!

If you have any feedback on anything, that would be much appreciated! Here it is!

Thanks

Emma

2

Looks good, you can improve on Products and footer sections.

  1. Make the product boxes of equal height and
  2. Style the subscribe form to blend with surround elements.
1 Like
3

Your project looks really quite nice.

In your html code, everything in the head would be better in the html settings page of your codepen as you can end up with errors when using codepen like this. Just go to settings and fill in the ‘stuff for head’ box. The fontawsome link is best in the css section of the settings and the jquery in the javascript settings.

Everything in the head is fine, and it just because you are using codepen that it is best to do this. If you want to speed up load times then you could use the minified (.min) jquery code. (This is automatic if you use the quick add jquery option.)

I tried my usual sources for images of chocolate teapot and nothing, which is quite supprising :cry:.

Hope this helps and congratulations on finishing the project :slight_smile:

1 Like
4

Thank you for your feedback Randore! I’ll get to work on both of those pointers.

5

Hi Oliver,

Thank you for your suggestions! I’ll have a fiddle around with the codepen settings and put all the head stuff in there. Cheers for the tip on the min version.

I know! I was a bit gutted I couldn’t find any pictures for it!

Cheers
Emma

6

Looks really impressive! The color scheme you used are kind of retro and luxury! yes!

This is well responsive! very good!

And just some small issues! First the absolute units like pixel you used, but not all of them since some are in relative, very good.

Product boxes, they have 1 pixel of solid border. As pixel is absolute unit, in very high density screens(like phones for example) 1 pixel is kind of very very narrow, and almost nothing. I note they might convert 1 pixel to 1 point, but this is recommended you go with relative units.

And last minor issue is about the email textbox and the button next to it. They are a little small! having bigger text box, with larger font size are much better. Also add some padding for textbox and the button. Also make sure they are in same height.

Overall, very very good! I really liked it.

keep going on great work, happy programming.

7

Hi NULL_dev,

Thank you very much for your feedback and your kind words about my page. Very new to development so it’s given me a boost!

I will get to work on fixing those issues with the borders and the email input and submit.

Cheers

Emma