Product landing page feedback and code organisation advice

Code Feedback
1

Hello everyone,
I’ve just finalised my Product landing page and I’d love some feedback on it if possible:
https://codepen.io/kriszte/pen/WNreKRx

Also, as this is the longest code I’ve written so far (out of three ;D) I started to feel that it’s getting a bit messy and hard to pinpoint where is what. My question would be:
**Could anyone recommend any good sources (video or books or anything) on organising your code so it’s easier to pinpoint and cross reference HTML and CSS? Or do most people just wing it till they have enough experience and it naturally falls to place? **
Any help would be greatly appreciated.

2 Likes
2

hi @kriszte
great work
loved the lingerie. :face_with_raised_eyebrow: lol

as im learning more to code the html and css, for sometimes i feel better how to structuring or organize them, so i can pinpoint where to adjust something that doesn`t fit.

you have some error
*no closing form tag
*double semicolon in your css
*typo on your transform attribute in css

3

Ah, I probably should have put the warning out for the content, but I figured if I do it, might as well make it interesting for me :sweat_smile:
Thank you for the corrections, all fixed now.

4

Welcome to the forums @kriszte. Your page looks good. Some things;

  • 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.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.

I don’t have a book to recommend off-hand but I can offer a little advice. Look at your code and see where you have repeats. For instance, you have font-family: 'Montserrat', sans-serif; declared a few times in CSS and it’s the font of most of your page. You could have declared this in a body declaration and then just made the styling for your other fonts where they occurred. That’s one of the things you’ll see repeated in a lot of languages. Keep it DRY (Don’t Repeat Yourself).

5

Thanks for the advice, I’ve cleaned up my code a bit as per your advice. I’m finding the “keeping it dry” quite a challenge at the moment, but I hope with experience I will get there. :hugs:

1 Like