Hey! Product landing page feedback please :)

Code Feedback
1

Hey there!

I’m looking for some feedback on my Product Landing Page. I’d like to know your thoughts on the code, layout, design, responsiveness & general comments on where I could improve.

Please note I have designed the code to be viewed on either a desktop or a very small device (iPhone X in particular) so it may not be as smooth on other devices - from what I’ve seen it all looks ok (other than tablets - few issues).

Check it out here on codepen

Thanks a bunch

2 Likes
2

Hey @Hangbar. I love your product landing page. The design is very good. Yet, there can be a few things improved:

  • You did not include the test suite in your project. It’s important when you submit the project and should be always kept in your project.
  • The images in your project are taking so much time to load. This is because the image has so much file size. Consider resizing your images using reduceimages.com or tinypng.com to reduce the file size.
  • You don’t need to specify body tags in CodePen
  • Add a breakpoint for tablets so that it will be responsive to every device. Check this link for knowing what media queries you need to add for tablets: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
  • Overuse of the primary color (orange) as the background makes your project hard to observe. Consider using any other secondary colors
  • Add html { scroll-behavior: smooth } to your CSS code so that when anyone clicks on the anchor links, it will have a nice smooth scrolling effect
  • The text “Step Three” is out of its background. You may need to fix it.
  • Add transition: 0.3s linear to the img classes so that when someone hovers over the images, instead of scaling suddenly, the images will have a transition effect. Also, try changing the 0.3s to any seconds you like to increase/decrease the speed of the transition.

You may only check the above suggestions only if you think it will make your project better. After all, your project is always yours, right?

Anyway, the overall quality of the project is good. I wish you good luck on your journey ahead. Happy Coding!

2 Likes
3

Thanks so much for the feedback - it’s exactly what I was looking for!

I’m not sure what you mean by not including the test suite in my project - could you elaborate please?

I built this in VSC, and lazily copy & pasted the code into codepen. Hence the body tag - whoops!

The images were saved in my local files and wouldn’t work in codepen unless I used a link for them. I tried to keep them in the highest quality. Not sure if this had an affect - but will definitely take note of the load times.

Will absolutely work on breakpoints and media queries to suit all devices.

I can see the orange is excessive - it’s great to have an outside opinion - ta!

I took note of your scrolling and transition suggestion and oh my, what a change. I love it.

Many thanks for your feedback. It’s well needed and much appreciated!

1 Like
4

Hello @Hangbar.

What I mean by that is to include the test suite FCC provides to validate your projects. When you read the instructions before starting off a project, don’t you remember reading something like this?:

You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

Once you’re done, submit the URL to your working project with all its tests passing.

That means you need to add a script that links to https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js. After adding the test suite inside your code, you will see a green hamburger menu at the top left of your project. If you click on it, you have an option to select the corresponding project and run the tests. If your project passes all the user stories required to complete that project, that means you are ready to submit your project. But, if the tests fail, you can click on the “Tests” button and you can see what user story you did not pass. This is the purpose of the test suite.

If you don’t know how to add the test suite to your code, copy the below code and paste it at the very top of your HTML code:

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

The test suite is mandatory and should be kept in your projects even after it is submitted. If your previous projects do not have the test suites, you need to add it to them too.

I hope you understand this looooong post :crazy_face: If you don’t understand anything, feel free to tell me. I will try to explain it more simply.

Happy Coding!

5

Welcome to the forums @Hangbar. Your page looks good. Something to revisit;

  • Verify the user has entered a valid email addr, if not then throw an HTML5 validation error.
    • You learned how to do this when you did the survey form.