Feedback required - Product Landing Page

Feedback required - Product Landing Page
0

#1

Hello Guys !
I just finished the project “Product Landing Page” and receiving your feedback and reviews would be great.
I worked with Gitlab, all the code is hosted there, just need to launch with your browser.
Access to the code: https://gitlab.com/fabianstarke/product-landing-page
Access to the website: http://flash-bruxellois.surge.sh/

By the way, I didn’t realize how I could easity fix my header, when I add {position; fixed, top:0;} everything gets messed up. Help would be appreciated :smile:
Thanks so much !


#2

I love the UI! Good job with the color scheme.
About the code, the reason it gets messed up with position: fixed is that the navbar is now out of the normal flow of the page, and the next section starts underneath it. Basically, just do margin-top: (height of ) navbar on the next section.
Also, I would put i some smooth scrolling with jQuery. Kevin Powell has a great Youtube tutorial.
Good job!


#3

Hey there, thanks so much for your feedback and the review.
In fact I could also add the position: fixed; on the topnav class and it wouldn’t need me to add sompe margin (but maybe doing that on the header is better). The other thing is that when I do that, the wolf logo won’t display on the right on smaller screens and the cart button won’t stay on the right, how could I do to improve this ?
Thanks so much for your help !!

image


#4

Hi. C’est tres bon! :sparkles::+1:
The only thing I notice is that when I fill the screen on my large monitor, the background seems to have a join.
It is a minor thing but should be easy to fix.


#5

So, I don’t have that problem when I do margin-top: 50px on #homepage and position: fixed on topnav. But you could maybe use justify-content: space-between with flex.
Also, I hadn’t looked at the mobile view. I think people expect the menu bars on the right. Just what I think. Maybe not. :grin:


#6

Hi, thanks for the feedback, I noticed that, will fix that :slight_smile:


#7

In fact it changed on the mobile view, was still messing up !
Yes you are right I want the menu on the right side, but got messed up with this position thing.
Today I could fix the issue, I also followed your advice on the smooth scroll !
I have some minor fix to do tomorrow and will share the end result here :slight_smile:


#8

@b3u @JohnnyBizzel
I just pushed my chnages if you want to have a look :slight_smile:
Still have a fix to do on menu button on mobile device, any clue ?
Cheers !


#9

Looks fine for me! The only thing I see on mobile is that there’s no transition/animation for the menu, and some people would make the icon bigger. Looks good.


#10

Yes I know, but I have no clue for the moment how to solve the menu issue, Did you click on the icon and see than it gets messed up and the header doesn’t stay fixed anymore ?


#11

Looks better. The background problem is fixed.

The menu I am not sure you need to change the colours. I would keep the colour consistent - either black background or red background but not switching between the 2.


#12
  • I would center the Nav bar.

  • I would make the check-marks brighter to stand out against the background.

  • the pictures need to be farther apart horizontally. Try making them equidistant on a 1200px width website.

  • I would make the video link bigger so that it matches the top and bottom of the text in that area.

  • I think you should delete the “Wolf Starke” and move it to the top so that it says, “About the Author, Wolfe Starke”.

  • I would make the footer a little bigger. There is not enough space between the top and the top text, and between the SM icons and the actual bottom.

Hope this helps!


#13

Thanks for the Feedback :grinning: any idea how to fix the menu issue on mobile ?


#14

You could tweak the code and learn as you go, but I think there is a faster way. You should get REAL familiar with Bootstrap. It has responsiveness built right into it. There is a really fast method for creating websites and be a full developer.

  1. Create or get a Design Comp. This will be a Photoshop (PSD) or Sketch file.

  2. Take that design comp and make it an html website with Bootstrap.

  3. You can then take that Bootstrap site and transition it into WordPress.

The point is that Bootstrap will give you a functional and responsive static website for your clients very quickly. You can learn more about responsiveness later. Plus, you can take a Bootstrap site and move it into Drupal, Joomla, React, or NodeJS. You have a lot of options.

The main downside to Bootstrap is code bloat which increases load time. I haven’t found it too much of an issue unless your main goal is to get the load time to the fastest you can. Again, this can be learned later.

Does this answer your question?


#15

Thanks for that !
I need to find out an easy solution right now only for this menu icon that would display the menu on small device without bugging like I have now.

I started with React before html and css, so i find it helpfull trying to build everything with only html and css, thats why i wanted to take that exercice.
I currently am working on the portfolio page using react, i know its not necessary but it trains me !!

I will have a deeper look into bootstrap for sure :slight_smile:


#16

You’re going to learn to get REAL friendly with google throughout your career. Just google what you are trying to do, like “make main Nav responsive”.

Learning Angular, React or NodeJS before being fluent in Vanilla JavaScript is a total mistake that I almost made too.

Definitely Bootstrap. It will allow you to make prototype sites in a fraction of the time it takes with anything else. Then you can pop the site on you host and let your client’s play around with it and give feedback for next revision. It’s what the majority of freelancers use.


#17

This is very nice dude. The email input text is way too small, same with the button. I would also suggest changing it from ‘I subscribe’ to ‘Subscribe’ on the navigation bar.


#18

Many thanks for your feedback, I will change the input text and the button.
Yhe only thing with I subscribe in the original language which is french only putting subscribe is not nice. I have to check how other sites write this.


#19

Or you could do subscription


#20

Totally right :slight_smile: thanks