Product landing page-feedback needed

Code Feedback
1

hello guy’s i just finished my product landing page
you can viewed it live here:

https://codepen.io/HIC/full/VdVyLY/

any feedback and advice needed

2

Is this the page? https://codepen.io/HIC/pen/bMYELe
or this one? https://codepen.io/HIC/pen/pVaJeW

3

None of them the page is: https://codepen.io/HIC/full/VdVyLY/

4

Now its open correctly

5

Your site passes all the tests, so I hope you don’t mind if I focus on appearance rather than the code (a lot of the appearance problems are code-related, anyway).

While at mobile viewscreens it looks fine to me, there are a number of issues with its appearance on a full-size screen. To start from the top down:

  1. Your navbar has an obvious margin on the left but continues off the screen on the right. Either is ok but not both. Also, the text in the navbar could use some formatting. It’s pretty basic, and the fact that it’s black doesn’t match the text on the rest of the page. It’s ok to use various styles on the same page, but it needs something to tie it in to the rest of your texts.

  2. You have an interesting logo! The problem with the size of it is two-fold. First, your margin between the top of the page and the logo is so big that upon opening, all we get is a big chunk of white space and half the logo. If we scroll down so we get the full logo, it takes up an entire height of the screen, even though the image isn’t optimized for that size. It comes across as fuzzy and indistinct. We can see that you shopped a C or a G or maybe a Q to make a stylized E. Your photoshop efforts shouldn’t be so obvious (the logo is the representation of the business; it should look as professional as possible). Also, since all we get is the logo on the screen, the viewer has no idea what he’s looking at or why he should want to scroll down. There needs to be an element in there that provides context for the site.

  3. Am I safe in assuming that English is not your first language? I ask this because there are quite a few grammar mistakes throughout your page. Perhaps you might ask others you trust to proof-read it for you.

  4. The page has way too much empty space! It’s throwing off the flow of the page. These should all be tightened up, especially when it comes to margins between each section.

  5. Your embedded video needs to be properly sized for the full screen. It stretches the width of the page, but it’s only 1/3 the height. That means when it plays, you have a small screen flanked by black boxes of the same size. You could increase the height of the screen so it fits the full height of the screen or you could decrease the width it fills so you have less black space on either side.

  6. Your food pics look really good. But you need to balance the amount of text as well as its placement. To handle the amount of text, why not use Lorem ipsum to create a short paragraph? For its placement, The name of the dish, the price and the description needs to be aligned so they all fall evenly under each other.

(Also, even though I said that it looks good on smaller, viewscreens, you’ll get a better effect if at smaller screens, the text falls under the pic of the dish and shrinks according to width, just as the pic does.)

  1. Finally, in your footer, try center-aligning each line of text. Also, be aware of how people with visual impairment would see your footer. Light grey on dark grey isn’t easy to see, so you’re preventing a lot of people from seeing your address (and thus finding your cafe).

I hope that all helps.

1 Like
6

hello @RDStemmler
my project have a lot of mistakes 'cause i made it in only one hour
but thank’s for superb advice

7

check it again please