Feedback: Build a Product Landing Page

Code Feedback
1

Hello everyone, I just finished my product landing page project. Your feedback will really help me for my future projects. Please tell me how I can improve it, write a better code, optimized code, and best practices.
I also have a problem with naming CSS classes.
You can see the project on codepen.

2

Hi there! The main thing that I noticed was that your project was the same style and theme as the FCC sample. Remember that you only have to build a project that is functionally similar . FCC encourages you to “Give it your own personal style.” This is your chance to build projects around themes and interests to you.

Happy coding!

3

Good work on this!

I think your css selectors are a little verbose. The CSS is more “brittle” if you use combination selectors so often. For example, if you want style your navbar links in the same way, simply add CSS to the nav-link class instead of your current implementation with CSS selector #header #nav-bar ul li a.

4

Thanks a lot for your comment, I will work on that :grinning:

5

Thank you for your comment, I’m looking for best practices on how to name CSS classes and using them.

6

Hey I think it looks like a solid effort. As mentioned above you can change the styling up a bit with minor changes in the CSS.

For instance, I like rounded cards with some shadow on them so you could add something like that. Or, you could mix up the background coloring! Images are also worth 1000 words so a few more high quality ones might add some style. An example could be this car photoshoot blog which has large header images per topic. Unsplash is a good place to get stuff like that if you need. Good luck!!

7

I appreciate your comment, and will take all of these tips into considerations.

8

Welcome to the forums @Mohammad-Agha. Your page looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • You’re on the third project and this is the first time you’re asking for feedback. Something you should know;
    • The sample projects are just that…samples. They show one way the project can be completed. Don’t try and duplicate them. The instructions say to build something that is “functionally similar” and to “give it your own personal style”.
9

Thank you a lot for your comment and for the tips. Regarding the last point you mentioned, I really find it difficult to create my own style. I’m just good at imitating other designs and applying them, like i wont have any design in mind to go for, but if you give a certain layout I can do it.
What do you recommend for that thing, like how can I improve my ability of creating new stuff my way.

10

I’ve found that paying more specific attention to websites you use regularly is very helpful in improving your ability to style things. I’m definitely still no whizz, but it gives you places to jump off from.