Product Landing Page - Feedback Welcome (and Encouraged!), also some thoughts from my doing the exercise

Code Feedback
1

Hi Everyone

After a long long time and some blood, sweat and tears I’ve built a Product Landing Page that I’m happy with and I’d like to know your thoughts, any feedback is welcome!

Debug Mode: https://s.codepen.io/Ian3/debug/YOPVWR/NQAzYqopOXGr
CodePen Editor Mode: https://codepen.io/Ian3/pen/YOPVWR?editors=1100

In the end it took 4 attempts for me to settle on something I was satisfied with. Some thoughts from doing the exercise;
• I found having to include a video incredibly restrictive, whatever I did with the video felt a bit clunky and tacky to me. In the end I settled on a big full page video when viewed on anything bigger than a phone that I feel looked a bit more professional than a smaller embedded video.
• I tried using background images to add a bit of color to the page and to separate the different sections/topics, I found that a full page image was far too large and always ended up a bit disappointing when automatically adjusted to smaller devices. Therefore I downloaded images I wanted for backgrounds and cropped them using the free Photos program on windows 10 so that they were both wide and short for tablets and large screens. I then created a separate image that was shaped like a phone in portrait mode for background images on smaller screens. I don’t know how well I’ve explained reshaping these photos but I think you will understand what I mean when you see how the background images look on the page. When doing a bit of inspiration hunting on other sites I noticed the Jack Daniels website also did a similar thing with its short and wide backgrounds.
• Speaking of images, I used dropbox and then imgur as a place online for storing images for codepen to access however these sites would struggle to allow some images to be accessed by codepen. I eventually tried https://imgbb.com/ which was relatively easy to use and has (yet) to cause any difficulties as a place to store images.
• A big learn from me on this project was how much of a game changer PNG image file types are. WOW!!! The bottles of Jim Beam on the site are PNG files, having a cut out of an image provides so much flexibility in positioning an image and help make it look that little bit more professional.
• I cheated on one requirement - FreeCodeCamp criteria is for the navigation menu to be stuck at the top of the page when scrolling down, I didn’t like this at all so gave myself some artistic license and added the fixed top navigation menu to screens with a maximum pixel of 1 on a mediaquery in order to pass the test.

Thanks for reading, thought I would share my thoughts in case anyone would potentially benefit from anything above (you never know).
Once again, thoughts and feedback are welcome. I’m glad to move beyond this project, I don’t get much free time for FreeCodeCamp (about 3 to 5 hours a week) and creating 4 pages for this project has caused it to take a frustrating amount of weeks.

Thank you

1 Like
2

Great work, your page is perfectly responsive and your effort definitely shows. One thing I would change is put the video below the product list and reduce its width. Also, thank you for the method to cheat fcc criteria, they tend to be really restrictive at times. All in all great work.

1 Like
3

Well done. It works well on phones as well as big screens.

Just a couple of things to improve it:

  1. The form is not working as expected. It does nothing for me. I can click send and it works even if I didn’t enter an email (no validation). And all I get is a blank screen.

  2. On small screens, the first link in your nav won’t work because you’re showing the actual #welcome div (the video) only on big screens. So clicking on welcome does nothing on a phone.

  3. I would set more padding on the history text as well as each section’s heading. It needs to breath a little.

Still, well done!

4

Oh, and just one tip.

You ended up with 789 lines of CSS code for this project. I think this is mostly because of duplicated code.

For example, you have this:

#head_menu {
  width: 80vw;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

And few lines below, this:

#head_menu {
  width: 60vw;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Same code with only one property changed.

Hope it helps.

1 Like
5

Wasn’t aware of the issue with the form or the nav link, thanks for letting me know!

1 Like
6

Have fixed the issue with the nav links - well spotted!

Thanks again

1 Like
7

Nice job on the layout. Everything is responsive as well.

1 Like
8

Only just saw this, sorry for not replying sooner. Thank you!!!