Product Landing Page for a Mechanical Keyboard

Hey everyone, just managed to finally finish my Product Landing page project, would love to hear some feedback on what I did right and what I could improve!

I made a Landing page for the Motospeed CK104 Mechanical Keyboard, which is a product I currently own and use. Went through the full creation process, starting out with ideas written on paper, designing the layout in an image editor (GIMP) and finally coding it, overall it was a great challenge for me and I definitely learned a lot from it. Thanks in advance!

3 Likes

Where did you originally make this? The pen was made today.

Its very nice, how did you learn? inspiration? Did you have prior knowledge too FCC?

1 Like

Thanks a lot! I start all my projects locally on my PC using Visual Studio Code, once they get finished, I port them over to CodePen and change a few things here and there to pass the FCC tests.

I’ve always had interest in programming since I was young, but for the past 10 years I’ve been only focusing towards a game development career (as I’ve been gaming my whole life), until a few months ago where after a long period of lack of motivation and self-doubt, I decided I’d want to follow a different path and work with web development instead. I also work with Video and Image Manipulation for personal projects as a hobby. Well, since I already had a previous base knowledge in programming , it wasn’t hard for me to pick up on HTML, CSS and JS :sweat_smile:

2 Likes

Looks great and the design really fits with the product.

However your video is effecting the responsiveness, it’s not scaling down with the rest of the page and is breaking out. I’d suggest removing the min-width & min-height and just set width: 100% & height: auto

Also you have way too many media queries. Look into using vw units for font-sizes on mobile views, it might help you with scaling the headers down.

2 Likes

Appreciate the feeback Gwesolo! :smile:

Regarding the video, it’s supposed to be a nearly full-screen “experience”, scaling it down would make it very small and leave a lot of blank space, so I preferred to crop out the excesses and center it so the main content and purpose (which is showing off the RGB Lighting aspect of the keyboard) is still shown to the user.

Thanks for the tip! I’ll definitely keep that in mind for future projects, but I have a question, why exactly is using multiple media queries a bad thing?

1 Like

On average a site will have css for desktop, then media queries to change to tablet sizes screens and one more for mobile screens. If you have multiple ones with different breakpoints it can be very unclear which styles will be applied or finding styles that need to be updated. It makes it more difficult to maintain in the long run.

Minimising media query useage helps to better understand page responsiveness

2 Likes

The only thing you really need to focus on is the responsiveness as was already mentioned. As far as your usage of media queries, the reason it doesn’t seem to you like you’re using “too many” TO YOU right now is because you’re thinking from “big screen” to “small screen” with the way you’re applying them.

When approaching it from that angle you naturally balance and fit everything on your screen. So you don’t have to shrink it down much before things start getting cut off, so you have to stop and adjust them. Then when you shrink the window 2px smaller, another scroll bar appears. So you NEED to keep applying all those media queries to tame things smaller and smaller.

If you were to start your project out at 260px-300px wide and make your default styling for the site suit that size aesthetically with good spacing, you can just expand the page until it gets to a point where there’s too much space or everything being stacked up feels like a waste of screen. From that point you can set a min-width property instead of a max-width inside of your media query. Once you have things looking good at that size, you can expand out again and find where it doesn’t feel balanced and or wastes space and modify again. Then if one day you discover you need to go even BIGGER than wherever you stopped, it’s a lot easier to just tack on another media query that expands things.

At the end of it all even if you did have that the same amount of media queries, they would all have just a couple of things in them nearly to the point of almost being useless. Even in those instances a lot of times the responsiveness you want to achieve can indeed be done using units and properties such as vw, vh, vmin, vmax, rem, min-width/height, max-width/height, using percentages, etc. So applying those natively to your elements and changing them subtly as they reach the boundaries of their aesthetics and balance will indeed greatly reduce the number of transit points you need in your code.

2 Likes

I see where you’re coming from, and I’ll try to implement that knowledge in my future projects, thank you so much Optiq!
Do you have an example page that uses said concepts that I could take base on? There are a few things that I yet don’t comprehend such as how to handle text scaling under those situations :sweat_smile:

I actually used most of those examples on my survey form.

Do you recommend it? Should i use it over codepen?

1 Like

I liked your product landing page… Looks perfect :slight_smile:
Just make it responsive

1 Like

It’s entirely up to you, personally I like VSC because it’s a customizable workspace with support to both back and front end languages, plus you can store your projects locally (meaning you can access them even when offline).

Thank you for the feedback, means a lot to me! It is responsive to some degree but I am aware that some devices (specially smartphones) have trouble with it, will look into different methods for my next project though! :sweat_smile:

1 Like

Your site looks good. The yellow alert box needs to be adjusted. Try to bring it below the 2nd navigation menu. Also, change your hamburger menu from green to maybe white. When it is closed, it is unrecognizable. Good Job!!48%20PM

1 Like

I appreciate the feedback erron!

Though I think that what you mean by yellow box and green hamburger menu is in reality the FCC Test Suite, which unfortunately can’t be changed or moved, but it’s something that wouldn’t be included if it was in a real website :sweat_smile:

OOOPS :smile: lol I didn’t even pay attention to that.