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.)
I’m also using Unsplash for some of my own projects .
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.
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%;
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.
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.
Do you mean I should nest my img elements in divs?
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 .
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.
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.