Done with my product landing page... :)

Code Feedback
1

Hi guys!
I just completed product landing page. I’d love to hear any suggestions or improvements. Here’s the link.
https://codepen.io/hasz/pen/mZLZey

2 Likes
2

I might suggest wrapping everything after the header in, for example, an article tag. It’s all related content, so think of it as a magazine article.

And within those, you have a few parts that look like:

<h2 id="price">Price</h2>
<p>32GB  &nbsp;&nbsp;&nbsp;  $349</p>
<p>128GB &nbsp;&nbsp;&nbsp;  $449</p>

Each of those is a a section of a larger article, right? So wrap each of them (the h2 and its related p tags) in a section tag, to create a logical separation. Doing so will allow both logical and structural flexibility.

For example, suppose later, you were asked by a Dilbert-esque boss to take those menu links, and make each part appear and the others vanish, when the menu gets clicked on! Doing so with your current HTML would be, in fact, pretty near impossible. But if you use article and section tags, you start creating a semantic, structured page.

As far as the look goes, it looks pretty solid. Very nice job. :wink:

1 Like
3

Thanks a lot! Yeah, I’ve been working on all that but it will take some time to get a hang of it. Just my third project yet. Hopefully will improve in the next ones.

4

Looks simple but nice!
For the next projects, try to make the websites responsive, so they look good on mobile devices too.

1 Like
5

Great work! :smiley:

  • The blue link at the bottom is hard to read on black.

  • Maybe add some padding to the footer?

  • That input box could really use some padding on all sides padding: 7px, and maybe remove the height

  • The button could use some more styling: maybe no border (border: none), border-radius: 7px, paddding: 8px, background-color: somecolor, cursor: pointer, and a hover background color.

  • For responsiveness, go to Pen Settings → HTML → Stuff for <head> → Put this in there: <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  • For some fun, you could add smooth scrolling by adding this to html, body: scroll-behavior: smooth;

  • <ul list-style-type: none;>

    Sorry, that’s invalid HTML. If you meant to set that style, either do it in the CSS or do it inline: <ul style="list-style-type: none;">

  • Ask if you need help with something :wink:

1 Like
6

damn you’re good! Thanks!!!

7

Yeah, sure! :grin: Will keep that in mind.