I just completed product landing page. I’d love to hear any suggestions or improvements. Here’s the link.
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 $349</p> <p>128GB $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
section tags, you start creating a semantic, structured page.
As far as the look goes, it looks pretty solid. Very nice job.
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.
Looks simple but nice!
For the next projects, try to make the websites responsive, so they look good on mobile devices too.
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
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
<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
damn you’re good! Thanks!!!
Yeah, sure! Will keep that in mind.