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.