Toughest challenge so far - Product Landing Page

Toughest challenge so far - Product Landing Page
0

#1

Hello campers! I would love to have your valuable feedback on my landing page project. I’ve made it for a local non-profit for animals. I almost gave up on coding when I started creating this project! Especially the desired navbar was almost impossible for me to get. I struggled like hell, but finally managed to get everything together. And I’m so happy that I didn’t give up. Feeling proud on the final product. All kinds of suggestions are welcome. Thanks a ton in advance. :slight_smile:

My product landing page


#2

That’s very good I like it


#3

Hey thanks! :slight_smile:


#4

Great work! Simple yet elegant. Suggest you do to add a bit of box shadow for one or two of the boxes. Would look more good.


#5

Thank you so much! Yes I guess you are right, I didn’t think of using the box shadow property. Nice suggestion. :+1:


#6

Well done! I would have put more space around the perimeter of the page, and scaled down the images and text.


#7

Hey thanks for the suggestions!


#8

Looking good! Coding can get hard at times, but sticking with it and getting past the tough parts are extremely rewarding!
Only real suggestion would be with the nav-bar. When clicking the links like ‘About us’, the scrolling goes down a bit too much, so the part of the page showing its the about us section is covered by the nav-bar itself.


#9

Thanks Eric. You are right, that’s why I’m glad that I didn’t give up on it when I was totally clueless and stuck :slight_smile:
And ya I’ve also noticed the issue you are pointing out, but I still don’t know how to fix that :slightly_frowning_face: I’ll be really grateful if you could suggest me a way to do so.


#10

I think you can improve some things related to design. How do you think if you can add a “back-to-top” button or search area. Then, I see that, the color is important, but you can find about color combination. Because of the simple website, why you don’t show it in a short page by give a layout that you can refer some by google. Anyway, that’s a real practice to develop our coding, so make it better in next day. I a newbie in the web development and the English well, but I wanna try hard to improve my bad things when I can.


#11

Hey, nice work.

If you want some humble advice, I would give the design more space to let the elements breathe, have a button to expand the menu on mobile instead of showing the block elements one above another as they take too much vertical space in my opinion, and I wouldn’t recomend you not to play with so many different colors; choose 2 or 3 max and stick to your guns.

However, I don’t think it’s recommended to invest much more time on this project. As you mentioned, you almost burnt out while doing it, so if I were you I would keep focus on the next project so you can learn new things and, if you feel like investing some more time in the future, then do it.

Again, good job! You project fulfills the user stories and it looks good, so congratulations!!

Happy coding.


#12

Yes I too thought about adding a ‘back-to-top’ button, but I was already too exhausted completing this project, have spent way too much time on it. Also, the fixed navbar seemed sufficient for now, so I didn’t add that.


#13

I haven’t looked at your actual code bc I’m on my phone, but you can try random things like adding a padding to the top of your body the size of the navbar to see if it makes up for having the bar.
you can also Google! Try basic searches like ‘nav bar covers when scroll’. You’d be surprised how many people have the same problems and don’t know the proper terminology. Happy coding! :slight_smile:


#14

Hey thank you so much for the appreciation and suggestions :slight_smile: I know that there is a lot of scope of improvement there, but as you said - I can spend more time on it later. Also I’m offering this website to the non-profit for free, so I will have to make a lot of changes as per their requirements, and that will ultimately take a lot more of my time. Thanks again for writing a long review. I really appreciate it if someone gives more time on giving me a feedback, because usually people become lazy when it comes to writing such stuff (like me :stuck_out_tongue:) .


#15

If you need a help, you can do anything by searching on the google and view anything showed in source code. As me said that “Make it better in the next time”, you can collect some useful things from w3c, codepen or any other website by view source code.

For example, when I can’t understand how I can create a back-to-top button, I will find a website and read related things such as css, html, js… Even I can’t understand all of them, but when I learned it, I tried to created it again step by step, anh search anything I don’t know.

I recommend you learn some practices on w3c, try to make it again and get any idea from it. After that, you can practice with some web template as me now. You can run so far when you start with real things. Happy coding.


#16

Yes I’m definitely gonna try it after some days. Thanks a lot for giving me these useful advices. :slight_smile: :+1:


#17

That’s a very helpful advice. I’m gonna keep it in mind from now on. Thank you :slight_smile: :+1:


#18

I really like this page and feel of it. I would left justify the content. I am on iPhone. Most apps I have researched are left justified.


#19

Here’s my thoughts.

  • your Dastak Foundation for Animals has the same rectangle as you buttons and is non-clickable. That’s a no no. also, center that in your header because you can’t see the menu very well.

  • the menu should be a different shade of orange, not green. It doesn’t flow.

  • your pic and quote are blurry. Find a pic that is the right side and clean up the text blurriness.

  • your “Join us today and be a part of our incredible community:” should be at the very bottom.

  • the green in the About Us doesn’t work at all. Get a color from one of the pics.

  • get rid of the border on the cow pic. You shouldn’t have a border and a shadow. Use a regular shadow instead of orange.

  • About Us should go under Our Mission.

  • your text in general are all different colors and you should have the headings one color and the text one color. 2 max. I would also get a different Google Font. The one you have looks unprofessional. You should also never center text. That has become a no no.

  • with the cat pic, same thing as with the cow pic.

  • Donate Now should be above Get in Touch. The contact info should be in a footer along with the ““Join us today and be a part of our incredible community:” section.

Hope this helps!


#20

Thanks Sls! Nice suggestion. :slight_smile: :+1: