I recently started coding and I’m doing projects. My next challenge is to create a Product landing page. this is the model product landing page
I for my previous challenges I created entirely different things from the model page from freeCodeCamp, but this time, because I’m having trouble getting ideas for my own kind of landing page, I wanted to code exactly what I see with the model; using the same theme, using the same kind of video.
Is that wrong?
I guess the lack of replies is an answer. I’ve done that. I mean the css because I’m just not creative that way. Of course the code is my own. I’ve had no problems with it and afterwards it is interesting to compare your own code and that of the model.
Go for it!
Greets,
Karin
Hi @maameyaatwumasi!
Welcome to the forum!
Somehow I missed this post or else I would have commented sooner.
I personally think you should create a page that is stylistically different than the sample page. I really do think you will learn more that way.
I totally understand struggling to come up with an idea. That’s total normal. But I think stretching yourself to create something different than the sample is going to be more beneficial in the long run.
Just try to break up the project into bite size pieces.
Pick any subject that you like. I picked desserts because there were tons of pictures online to use and well I like them 
Then, tackle the user stories and get them to pass.
After that, you can worry about styling the page. Here are a few ideas to get you started.
Start with some colors that you would like to use.
experiment with google fonts
If I remember correctly, I think flexbox is required at least once for this project. Maybe you could create a cool image gallery with it.
maybe for the product cards you could add a shadow behind it.
https://www.w3schools.com/howto/howto_css_product_card.asp
Hope that helps!
Thank you very much!
This did help so much. Thank you for your reply!
One last question; is using any video from youtube allowed with this project? Like the video in the model page?
If I remember correctly I think one of the tests requires you to use a video.
Sorry for replying late.
The one in the question requires a video
I was asking if I could use any video from youtube
FCC doesn’t care which video you choose.
oh ok ok
Thank you so much for your help!
Hi @jwilkins.oboe
So I started my product finally, but could you help me with a few things?
This is where I’ve gotten to so far: https://codepen.io/maame-yaa/pen/YzGGeEg
I’m having trouble with moving the text in the navigation bar to the left, because I used flex. Could you please check and see my problem?
How do you add your own pictures on codepen? I coded this on a visual studio and copied it, and I wanted to find a way to add a logo
What text do you mean?
Everything in the header is left aligned. Don’t you want a space between the logo and nav? If so you can use justify-content: space-between on the #header element. You would likely also want to vertically align the items using align-items: center.
For images, you have to host them somewhere, like an image service or you can use Github.
If you could expand more on what you want to accomplish that would help us a lot.
Did you want the logo and navbar in a row by itself and the h1 below it in its own row?
This helped me solve my problems. Thank you!
I wanted the logo, nav bar, h1 all in a row, with the nav bar text to the right, but I’ve gotten help. Thank you!
I also just realised I made a mistake with my question. I had meant to ask how to move the text to the right. I apologise for that mistake
@lasjorg I did what you suggested, and my text was able to move to the right. I used Github for the image too, and it worked when I ran the code. I came back later to run the code again, and it didn’t work. Is there a reason why it worked the first time and it’s not working now?
I don’t see any repositories in your GitHub, did you delete it?
Oh I made it private. Is that why?
If you want the file to be publicly accessible then using a private repo isn’t really the right choice.
Although, I thought the token attached to the image URL would let it work (at least for 7 days). I’m not sure why it would stop working before that. But I would suggest you make the repo public.
Making it public made it work.
Thank you very much for your help