A product landing page project

Hey, I am beginner with bootstrap so I made this project using bootstrap 4.
I would love some feedback!
https://codepen.io/BrightOrb/pen/PoPBxrJ

Hi BrightOrb,
Thank you for submitting your project. I have a couple of things that I recommend you do.

  1. Try to keep a consistent color pallete. I can see your navbar, your image, the font, and the products carrying 7 different colors. Try to stick to two, no more than three. Unless is really necessary for the content to add more.

  2. Can you try recreating your navbar in css, without using Bootstrap?

  3. Your product section get on top of each other when it hits a reduced screen size.

  4. Try to use one, no more than two, different types of font.

  5. If you want to continue using Bootstrap (which I don’t recommend at the stage), there’s a way to center a div using a bootstrap class. Google it up.

  6. Your icons are stuck next to the content. You can give them some padding.

Overall, I recommend that you stick to using plain CSS to for these projects. If you’re stuck doing something, you can always use Google, and this forum.

Happy coding!

1 Like

Thanks for your feedback! Yes I still have a lot to learn, wanted to try bootstrap because it seems fun and easier than plain CSS. Of course I will try to recreate this page using only CSS.

1 Like

Great. I also started using Bootstrap in other projects outside of FCC; but noticed that then whenever I wanted to try something that wasn’t on Bootstrap, I got confused and couldn’t figure it out. That’s when I started following a lot of youtubers that focused their content on CSS; and I learned a lot.

It’s great to use bootstrap. It’s greater to combine bootstrap and CSS. You can definitely do that. Some people use bootstrap grid and flex, because that’s a pain in the neck for media queries.

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • Your page passes 1/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    • The test script should be included, with all tests passing, when you submit your projects.