Landing Page Project (Feedback would be cool!)

Hi everyone,

I finally finished my landing page project. It’s the first fCC project I pushed to GitHub.

I tested its responsiveness with the Firefox Dev Tools, but it would be helpful if someone else could tell me if it looks okay on their device or if my code has any issues. (The overlapping of the photos in the top section is intentional.)

My repo: GitHub - scissorsky/fcc-landing-page
Live preview: Product XY


I’m also using Unsplash for some of my own projects :laughing:.
That’s a good photo after all.

Your project looks modern, (do you have a design background?) and your approach is similiar to mine regarding hero sections: Away with old fashioned boxes and the outdated blurry fullscreen background picture.

Use a collage of single elements instead, they have the side effect to be easier to adapt in mobile and widescreen.

Was a nice discovery, I like it

Hello!

There are two things I noticed in your design.

  1. There is a horizontal overflow (at least in my monitor)
  2. Using 100vw to “stretch” a div to full-width isn’t a good idea.

So, 100vw will take the entire view width of monitor. This is good as long as your content is not vertically scrollable. If it is, a scrollbar will appear on the right of the screen and this scrollbar is going to take some space in the document. So just from those two aspects, it is very possible that the document will horizontally overflow.

How to deal with this?
The most easy way is to just set your scrollbar to “overlay” in the document instead of taking actual space. To do that, you set

body {
  overflow-y: overlay;
}

assuming that body is the element that displays the scrollbar.

You have set many width: 100vw; in your document, try to replace them with width: 100%;


1 Like

Hey, this is nice work. Just a few things to consider:

  • The email address input should have a label. If you want to hide the label visually, so be it. But it still needs to be there for people who use assistive technology (such as screen readers).
  • Your heading structure is very good, but the prices under the options are probably not headings. They can just be plain old p elements.

Great job!

1 Like

Thanks for the feedback!

Haha, I love Unsplash! The photo was one of the first that caught my attention when I was exploring the skincare tag there.

I don’t have a design background, but I know how to use Photoshop and made a mockup of my “vision” before I started coding. I guess the main reason the design turned out modern/minimalistic is because I didn’t want to include too many coding challenges for myself. :sweat_smile:

Do you mean I should nest my img elements in divs?

:open_mouth:

You have some serious design skills then, it looks pro.
Take that from someone who’s been in graphic design for a few
decades.

I see all important rules regarding, color, contrast,
typography and composition followed.

If you combine that skill with programming you have a profitable career ahead.

1 Like

Yes, that’s what I’m doing.

Take a hero section for a restaurant as an example. Make the logo, tagline and photo three elements and experiment with the composition within a div that spans the viewport.

Always start vertical/ mobile, the vast majority of users comes over mobile devices these days. When you are happy with the first draft, turn to widescreen and arrange the elements with CSS .

1 Like

Thanks for all the great advice!

I don’t remember why I used vw instead of %, I just remember that it used to have a reason. But your explanation why percent is the better unit makes sense.

And thank you for pointing out the horizontal scrollbar and how to get rid of it! It worked. :smile:

Thanks, that’s really helpful. So far I always started with the widescreen version. I’ll try it the other way around next time.

Omg, thanks again! I like to be creative and care about #aesthetics (which is why I have set my eyes on frontend development). I feel super encouraged now. :smiling_face:

You are welcome!

Here’s one more tip: to enhace your design skills, study the works of

Massimo Vignelli

and

Josef Muller-Brockmann.

Two 20th century design masters whose style is like made for todays UI design.
Vignellis teaching are free as a pdf

and you can find sources how to use Muller-Brockmann’s grid system for free online.

I hope you show us some more works in the future.

1 Like

Thank you so much for your help and the link especially! I fixed both things.

Wow, that’s so nice, thank you for the resources! Bookmarked and downloaded!