Please review my product landing page: DevBox

Hi everyone,
I’ve just completed a first draft of the third project: Product Landing Page.

Here it is: Product landing page: DevBox

I’ll appreciate any feedback you could share, because I’m excited about improving this project. Your feedback has been extremely useful in previous projects (1, 2), so please don’t hesitate share your thoughts and suggestions.

Thanks, and happy coding! :slight_smile:

2 Likes

I think it’s cool! I am assuming the order section that overlaps its siblings on top and bottom isn’t done yet? Try adding a smooth scroll when you click on the navigation links so that it won’t jump to the target section. You can achieve it using pure css only or with javascript. Also the navigation links, you intended it to have minimal padding on the bottom? it’s almost sitting on the baseline of the header. if you declared its parent as flex or grid you can center them vertically using align-items: center :slight_smile:

1 Like

It looks very nice and clean. I like it. The layout is good, even if I would make some adjustments.

When viewed on a desktop, the sections are all over each other and it looks a little bit off. Also it would be nice to have some more padding between the elements :slight_smile:

1 Like

Looks good!
I agree with the others who commented about the padding, I think more white space would be nice.
I also expected to see/feel something when I hovering (:hover) over the buttons, but it may be just my personal taste :smile:

Good luck with the upcoming projects.

p.s
What’s the deal with the RESET in your CSS? Codepen have some build in values that i should reset?

1 Like

Thank you so much for your valuable feedback, @mav1283!

As you guessed, I tried creating this with CSS and HTML, but now that you mentioned scrolling - I’ve added it. I checked pure CSS scrolling, and from what I saw, it limits the users ability to scroll up, so I decided to go with vanilla JS scrolling instead. You’re right, it makes such and difference! :slight_smile:

I’ve also added some padding to the nav bar, and I really appreciate your tips.

If you have any other suggestions please don’t hesitate to share :slight_smile: I’m excited to keep working on this, since it’s the first relatively big project I’m working on. It’s really satisfying to get it right.

Thanks again, and have a great weekend!

Thanks for the feedback and tips, @Alessio95 !

I’m more than happy if you could share the adjustments you had in mind. I know it’s sometimes subjective, but as a newcomer to this field - I’m really eager to try new things, and improve my project. Please don’t hesitate to share :slight_smile: I’m happy to try it since the forking option makes it really no hassle at all!

I think the elements overlapping was caused by using relative height size (vh), so hopefully I’ve fixed it, but if you’re still seeing it - please let me know. Feel free to share screenshots - I’m eager to get this working right, since I think with some more work, it’s the first “portfolio worthy” project I’ve done.

I’ve also added some padding.

Thanks again for all your valuable suggestions, feel free to share other suggestions or comments - I appreciate it!

Enjoy your weekend, and happy coding! :slight_smile:

1 Like

Thanks for taking the time to review my project, @srnt !

I think I’ve improved the padding issue, and I’m not sure where you meant to add the white space - but with the new adjustments - I think it’s less crowded now (please feel free to share where exactly you feel you’re missing space - I’m happy to try additional padding - I’m assuming mobile display?).

I’ve also added some hover and active to the navbar. Let me know what you think!

P.S, the reset part, as far as I understand it, is there to prevent differences in display between different browsers. I think it removes any defaults different browsers add to the design, which makes a more consistent display between browsers. However, I might be wrong :slight_smile: I’m still learning as well!

Enjoy your weekend, and happy coding! :slight_smile:

Yes you are right @zurda, the issue with the white space is mostly mobile wise.



And thanks for your answer about the reset thing.
I’ll have to check it more deeply.

Happy coding to you too :slight_smile:

1 Like

By adjustments I was referring mainly to the overlapping of the sections :slightly_smiling_face:

I’m by no means an expert, but this is what I see from my browser:

I think the section title is too far away from the top of the grey area. I don’t know if you can see it too from your computer.

And here is still somehow overlapping with the footer section:

I think it looks very good overall, even if I personally would have used another font for the headers. But this is just my personal taste.

Keep up the good work and happy coding! :slight_smile:

1 Like

Thanks again, @Alessio95 and @SRNT - your screenshots really helped me isolate these issues, and do my best to fix them. I appreciate your help so much!

If you (or anyone else, of course :slight_smile: ) have other suggestions and notes - I’d love to hear it!

My pleasure @zurda. I know the importance of the true when its needed and in our case, its very important, so again… my pleasure :slight_smile:

1 Like

Looks great! Love the layout and icons you used for the whole thing. Good job!

1 Like

Does that Developer’s Emergency Kit come with infinity coffee? :sunglasses:

I say well done, very good. Indeed wonderful progress in all of your works, superb.

Keep going on great work, happy programming.

1 Like

Thanks @steve.clements24! My next project is building a portfolio, so it’s fun to realise I might have a portfolio ready project :slight_smile: The icons are from a website called “Noun Project” which I highly recommend.

@NULL_dev, wow, I can’t tell you how much this comment made my morning :slight_smile: I finally feel ready for the portfolio challenge. Your feedback in previous threads was extremely helpful in helping me improve, so I already owe you a lifetime supply of coffee, lol.

Any other suggestions or notes are more than welcome! Happy coding everyone!