My Product landing page my CSS is not appropriate i guess? please help

Code Feedback
1

Product landing page

Is it ok to make project similar to what is given in the example?
I have linked my project down below:

https://pitstop260.github.io/freecodecamp3/

2

Your landing page looks great! I wouldn’t worry that it looks the same as the example. I think that these examples are here so test our abilities to code not to design

I’d say that as long as you’re not copying the source code but you’re writing it yourself it is absolutely fine :slight_smile:

My landing page also looks like the example :smiley:

1 Like
3

Thank you for the appreciation! I have written the code on my own but I am struggling to make it responsive, it only looks good on desktop but not on mobile phones :pensive:. I checked your project too it looks great you’re a potterhead too :grinning:.

4

How did you know hahaha? :smiley:

Responsive design is not the easiest thing when you’re starting out but the same rule apply as with everything. You have to practice :slight_smile:

Now, that you’ve coded your version of the landing page take a look at my code, or even better at the example code, compare it with yours and try to implement some of the responsiveness :wink:

1 Like
5

Welcome to the forums @akshaykoti16. Your page looks good. While it’s okay to make your project similar to the sample project you are encouraged to do your own and give it your own style. If you can’t come up with an idea, it’s okay to use the sample. Just be sure you’re starting with a blank page and not copying code. And it looks like you did start with a blank page. Good job.

Some things to revisit on your project;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 7/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should address.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
  • The page needs to be responsive. Remember, the R in RWD stands for responsive. On smaller screens your page has a horizontal scrollbar. Content falls out of the container.
2 Likes
6

Thank you for the feedback! I am making all my projects again because in earlier projects I wasn’t able to pass all the user story tests .
So this is my new tribute page https://pitstop260.github.io/freecodecamp1/
Please give feedback on this too. For the first time I have passed all the user tests :grin: and made it responsive .

7

Your tribute page looks good @akshaykoti16. Some things to revisit;

  • Run your HTML code through the W3C validator (linked previously)
    • There are HTML coding errors you should be aware of and address.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
    • This is in addition to where the W3C validator shows you where it’s not allowed. Don’t use it for line breaks or spacing either.
  • Make the page responsive. On smaller screens there’s a horizontal scrollbar. Content falls out of the container.