iLuvFruit product landing page review request

Code Feedback
1

Hi all!

I’m not sure this post will make it (my last couple weren’t posted - have to wait for a moderator to review them for some reason), but if you’re seeing this, great, thanks for reading!

After much struggles with CSS, I’m finally ready to debut my product landing page (“iLuvFruit Platters”). Apart from the common struggles of trying to get grids and alignment to work, I also struggled with a style for this page. I tried and discarded many! I can’t seem to get the look of a polished page going, and I’m not sure why. Not that I think I could ever do the job a real web-designer does (I’m more middle-tier type person than front-end), but if you have some tips on how to get a better looking page, pls. let me know.

thanks for your support!
./H.B.

ps. Forgot the link! (2nd Edit: Updated link with an updated version to take into account some feedback)

2

Please provide a link.

1 Like
3

whoops! Was so worried the post wouldn’t be posted I forgot to paste it in!

Thanks @kevinSmith for pointing out the discrepancy!

4

It looks pretty good. The colors are a little on the gaudy side (for my Puritan tastes anyway), but that kind of fits the subject matter.

One thing is that the menu is in a different order than the page - I would put the “contact” section at the end.

In the contact section, I would space it better - everything is pulled to the left. I would either make it two columns or make the width of that section narrower.

I would probably center the menu items.

But still, pretty good.

1 Like
5

I have to agree with you on all points (I had just finished fixing the menu order just moments before reading your comment). Figuring out a less gaudy (but still colorful) series of colors is quite a challenge (and this after many tries at editing myself!). I think I’d rather figure out the spacing for the contact page! Hard as that is.

thanks for taking the time to review!

6

With the “gaudy” thing, again, part of that is that I tend to be picky and like subtle color schemes, and like I said, the colors kind of fit the subject matter so it might be a great choice in this case.

7

Thanks Kevin. But I think the color issues are contributing to the ‘home-made’ feel of the page. I’m not sure it looks polished enough. But, one thing at a time! thanks again.

8

Yeah, I wouldn’t worry about it. Move on to the next project.

1 Like
9

Pretty nice page. I would only add some js to change the header background gradient into a solid color when scrolling down and change it back to gradient when scrolled up to the top of page.

1 Like
10

Thanks! I haven’t learned how to use JS for CSS manipulation yet so once I do, there will be a whole of fun in store for me!

11

It’s a good start, i would suggest learning wireframing first, lay them out on a piece of paper, draw them and most importantly align them on the grid… for Wireframing you can try photoshop, sketch, invision etc. or the open source pencil - give it a try once you know how to design wireframes it’ll be easy for you to convert them to code.

1 Like
12

I like it! The color scheme fits the product perfectly.

I would move the Menu cards to be more of “pull-center” on the larger screen, instead of listing left.

I was confused with Home and About, as they seem to be the same in this case.

As for a polished look, it really depends on what “polished” means to you.

Your page has a homemade feel, which goes with the subject. The video looks great, which many sites don’t have. - And, It’s Fun.

2 Likes
13

Thanks for the review @KoniKodes. The about link was broken (fixed it now) as it is was supposed to scroll to the video. The menu is definitely not centered, but that’s because it is a grid with not enough menu items to fill it. Probably a flex setup would be better.
Thanks for the kind comments. Its nice to show off homemade stuff (in this case the fruit plates) but I hope in future I will produce better designs. (Or I may just leave the design work for the designers and focus on the backend)

14

It looks good. Love the video. You have a couple of other projects that I enjoyed.

I think you should play with your designs and have fun until someone comes along asks you for something different.

My portfolio has a Tropical Theme, but sometimes I have others want something different. My product page is actually based on the website I created for my husband. He goes a slightly different direction.

Anyway, Have Fun! I think that’s how we learn best.

1 Like
15

Did you use CSS Grid to build the Product Landing Page? That’s cool. I haven’t learned how to use that technique yet to build a web page.

Also, your video is awesome! I didn’t realize you produced it yourself.

16

Thanks very much @s_coder! I used some grids and some flex (depending on which one I figured out would work). There is an introduction to both on here (FCC) and online in many sites.
Appreciate the kind comment on the video too. It was the only pictures I had that were related to each other and I didn’t want to use copyrighted stuff.

1 Like
17

Since most people provided insightful design feedback, I’ll provide some nitpicky (yet actionable) technical feedback… :sweat_smile:

It looks like:

  • All img elements are missing the required alt attribute used as fallback in case the image doesn’t load.

  • The name attribute should not be used on anchor elements <a>. They’re designed to be used inside <form> elements like <input>, <button> and <select> and so on.

  • Some classes like nav-link are not used to style anything (this is one is not really a biggie)

  • When you write HTML in CodePen just start by writing the HTML that goes inside the body, There’s no <head> or <!doctype html> to worry about since CodePen includes this for you. Tip: If you need to specify CSS or JS Libraries (Like FCC’s Testing Bundle) then add them via CodePen’s “Settings”.

  • I would not put “Under Construction” for your project. Projects should be a done deal. That said, it’s always healthy to add enhancements or fixes later on. This practice of iterating, finding bugs or fixing the UI helps you become a better developer.

1 Like
18

Thanks! Good point about the alt tags, I usually ignore these but I’ve added them in now for this project at least.

I can’t really change anything further because:

  • nav-link is required by the test bucket from FCC , so i had to add it.
  • codepen html structure i used is also a requirement from FCC (I had to include the script as given by the FCC test template)
  • Under Construction is just to remind me that there are still things that I don’t like about this page. I may come back and fix it. (I had another version which I used initially when I completed the project so when I forked this one out I renamed it so I could tell the difference)

thanks so much for taking the time to review, I really appreciate it!