Product Landing Page wdelanoy

Good evening everyone! I hope you all are having a fantastic holiday weekend. I just started with the FCC curriculum about 10 days ago. Started from the beginning, having never coded before, save for 1 semester of C++ back in high school, which was almost 20 years ago.

[https://codepen.io/wdelanoy/pen/qBErwGG]

Was hoping to get some feedback on my product landing page. I completed the tribute and the survey as well, but started delving into a little more CSS with this landing page.

A little about me. I have been in the hospitality field my entire career after going to school for music. I just couldn’t do it any more, and decided I wanted to change industries. I had always enjoyed computers, so I thought that the IT field might be a good change. I am finding the challenge of coding to be very enjoyable, like putting together a big puzzle.

Cheers to all!

1 Like

Hi @wdelanoy! Good choice with the career change so far. I really like your product page. I like the general design of the page (icon choices, color palette, fonts). I also like how you apply the shading efect on the boxes with the past choices and subscription plans (that’s something I want to use in my future projects too), looks really good. Here are some minor suggestions for your page:

  • Make the logo from the left part of your navbar as so when you click it, its taking you to the top of the page
  • Add scroll-behavior: smooth, to the html { } element from your CSS file. It will scroll smoothly when you click the navbar links instead of teleporting
  • Add some animation to the certain parts of the page. I’ve added transform: translateY() on :hover to my equivalent of your smaller divs.

There is a :+1: you deserve. Keep up the good work :wink:
P.S.: I’ve also posted my product landing page yesterday, and haven’t received any feedback by now. See if you can check it out and tell me what you think about it.

1 Like

@Wallachian - Thanks for the feedback!

I like all the elements you’ve added to your page! The way things float upwards when you hover over them is so cool!

Here are a couple suggestions for you:

  • add background-attachment: fixed; so that your background stays stationary while your elements scroll up and down
  • try and get the main elements to move up close to your navbar on top. There is a lot of empty space between the navbar and the elements that come next
  • get rid of the border radius on the video element, and maybe increase the size of the video display

How long have you been coding? Are you new to this as well? Why are you going through the FCC curriculum?

Let’s keep in touch!

In the meantime. I finished the next project. I have added some more CSS elements to improve user interaction. I’m pretty happy with the finished product.

Check it out: [https://codepen.io/wdelanoy/pen/povPeGW]

1 Like

Thank you for the suggestions @wdelanoy! I will take them into consideration.

  • for the background I’m planning to do a parralax effect later on (after finishing the responsive design challenges)
  • I have the big logo in there, but I’m also thinking about doing some animation with it… again, sometime later.
  • I really like the border radius idea of the video, but I know the design its kinda’ broken… I will search for a better solution asap

I have some background in coding. Bachelors degree in CS and worked for about 6 months as a junior java developer. Java got boring for me, and I’ve decided to make a career change so I’ve started web-development and I love it. I have started web development for almost two months. I bought a udemy course and then discovered FCC. I like their tutorials more + the idea with projects that get reviewed the community from the forums its definitely my kind of learning. The forum is brilliant with lots and lots of helpful resources, tips&trick and advises.

  • Sure buddy :grin:. I am active several times a day here :wink:

I’ll have a look once I get home a bit later :wink:. Remind me through a personal message if I forget.