Product Landing Page - help/feedback

Code Feedback
1

Hi!
I have just finished my product landing page for an imaginary gym.

https://codepen.io/dostrelith/pen/gOpzBWQ

I would really appreciate comments about my code and web design at this point. I understand I mostly copied the example website given in the course, but some pointers on how to improve design would be helpful.

But I have more technical questions to ask:

  1. Do I use too many “divs”?
  2. How can I learn to control positioning better? This is what I struggle with most…
  3. How can I make some text tags closer to one another vertically? For example, in the “features” section, the text is too far apart…
  4. Best way to make websites responsive? This is something I struggle to imagine what needs changing to be mobile-friendly…
  5. How can I make the heading in the “membership” section fit nicely in the top of the box like in the example website?
  6. How to better understand the width attribute of elements when code gets long and complicated?

This challenge really makes me think whether I am good for coding. I worked on it all day and all I got is a really bland website copied off a template. Does this happen to others too?

1 Like
2

If I had to make one suggestion, it’d be to slap a font on there. Even a simple font like Arial would greatly improve the look and feel of your web page.

1 Like
3

Hi @CarCahara, your page looks good and you’re right, there are things that can be worked on.

  • First off, run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • you have some elements that aren’t closed and you’re using an obsolete attribute
  • For all your questions, one of the mods (can’t recall which one) posted the following a while ago. It was a help to me and I think it can be a help to you.
    • Get familiar with the box methodology. Once you realize everything you see on a webpage is just a box you need to move around and resize, things will start to click. Often times, use the following bit of JS in the console to outline every element to see what’s going on if having trouble with something.
    (function(){
  var all=document.getElementsByTagName("*");
  for(var i=0,max=all.length;i<max;i++) {
    all[i].style.outline="1px solid #"+((1<<24)*Math.random()|0).toString(16)
  };
})();

For instance, if I change the text to ‘best price $200’ then your boxes are all the same size. It’s about using margin and/or padding.
It’s okay to look at the example code. Play with it and see what happens if you change things around. What breaks, what looks worse, what looks better? Then go ahead and make your own page. It doesn’t have to match the example page. It’s just an example of one way you can do it.

2 Likes
4

Thanks very much, I will look into it. The truth is things have been slowly clicking so I do think I’m making progress with each website I build.

1 Like
5

Yepper, and the more you do by trying and playing the more of those ah-ha moments you’ll have.

1 Like