Product Landing Page Before Looking at Hints

Hey everyone! Hope everyone is having a happy coding day! :grinning:

I just made a mock up of the Product Landing Page. I didn’t do it with the testing script active yet. I just looked at the original project page in the example and tried to make it as similar to that as I could.

Fully responsive as well. Would love some input on my code. Going to look at the tips now. Haven’t looked at any of the requirements or tips yet.

Things I need to work on is using padding as an easy way out of situations and also need to stop over coding.

Here’s the links:

Original Product Landing Page Example: https://codepen.io/freeCodeCamp/full/RKRbwL

My Mock Clone: https://vigorous-almeida-53ea70.netlify.app/

My Codepen: https://codepen.io/dobs93/pen/YzygqaW

A quick scan over…

It looks pretty good.

The navbar doesn’t do anything.

The "premium materials list - I would expect that to be a ul. And the icons for it are too far from the list.

I think you should use more meaningful ids. “c”? What is that supposed to be? When you code, always assume that someone else will have work on it later. It shouldn’t be a puzzle.

And I would have started with the requirements. You don’t do the frosting before you bake the cake. Professionally, the requirements are the most important thing. If it doesn’t do exactly what the customer want, all the decoration in the world won’t matter. You don’t want to build out a beautiful interface and then have to tear it apart to get the functionality you need. You might get away with it on a small project like this, but with bigger projects, that could lead to nightmares.

Just some thoughts.

1 Like

Thank you for taking the time to look it over!

You are right the navbar doesn’t link down to parts of the page, I forgot that part.

Good call on the ul the grid is not really needed there. Would you group that has 3 separate ul’s? Each one holding 2 li’s with the icon and text. Noted on the icons being to far from the list.

Lol! You are so right! C is a super lazy title. I didn’t actually expect anyone to check the code and these are most likely throw aways, I’m just working on my skills. Regardless proper naming should be a habit.

The thing with me is for the requirements I learn better to do first and go to them and re do it after with the requirements. The thing with the requirements is they are hints as well. I didn’t want any hints. I see what you’re saying though. Why create more work if need be. I just want to make sure I have the ability to do it myself though.

Thanks for taking the time for the review!

They’re not really “hints” @Dobs. There are a lot of ways to build any of the projects but in order to test that the MVP (Minimum Viable Product) has been built there are automated tests. Can’t have automated tests if everyone’s code is different. Shops will have a convention also so that tests can be rerun and reused without having to be rewritten. Most shops (I’m sure probably all) have devs write unit tests so that changes in code do not break the larger system tests. So maybe think of the user stories as unit tests that you don’t want to break.

:slightly_smiling_face: You know I do it so don’t be too surprised that others do too.

2 Likes

Thanks for all this Roma. All noted, some very good points made here.

Thank you!