Product Landing Page - Question + Feedback request

Code Feedback
1

Hi All -
I’m about two weeks into my HTML/CSS journey and wanted to reach out for some help about my Product Landing Page project: https://codepen.io/basplin/pen/xxwryea. For some reason the section titles on the page are slightly off center to the right and I have no idea why…(SOLVED! See comments)

And while the design is a work in progress, I’m hoping if anybody might be willing to share a little feedback on this project of mine in terms of the coding! There’s a lot of HTML/CSS I think I understand, but I still have some gaps in my understanding off it, particularly in CSS.

Thanks!

edit: ended up answering my own questions, so I removed those.

2

Hi @alex.wadner! Good job on your landing page. I hope you’ve been enjoying HTML/CSS - I’m on the same journey myself right now.

I’m not sure I’m following you here. You are successfully styling the submit button (at the end of the page) with your #submit-selector. I can change the values in your codepen and change the size and text alignment. Are you thinking of another button?

The section titles are slightly to the right because you’ve styled the divs they’re in with this: text-indent: 40px;. Removing that will fix the issue :slight_smile:

I looked through your code and here are some considerations:

  • I see some code repetition when looking at your #About and #servicesrates selectors. Instead of repeating all those values (margins, padding, width etc), consider putting those into just one class, then apply that class to the divs in the html. This would apply to your .square1, .square2 and .square3 classes as well. Since they have the same values you could just have one square class.
  • Consider using max-width instead of width so the content will adapt to narrower viewports. Also, look into using rem, em, vh and vw as your units intead of px. They will scale relative to font or screen size instead of being absolute values.
  • Use the “Analyze HTML” and “Analyze CSS” functions in Codepen every now and then. I found a couple of errors in the HTML and CSS.

Some design aspects to consider:

  • Avoid centered texts for longer paragraphs
  • Increase line-height to improve readability

The embedded video is not working right now - not sure what the issue is.

Keep going at it, and don’t forget to make it responsive for smaller devices as well :slight_smile:

Let me know if you have any questions!

1 Like
3

This is super helpful, thank you so much!!

Re: the submit button at the very bottom of my page - for whatever reason I couldn’t change the size of it until I entered a border-radius value…? I read something somewhere that seemed like that might be a Mac issue. In any case, it started responding to my CSS instructions after adding a border-radius value. Very strange…

Some really great considerations here that I need to look at, thanks again!

1 Like
4

Interesting, CSS is quirky like that sometimes! :slight_smile:

I forgot one thing: have you noticed that when you click the anchor links, you actually arrive a bit lower than you’d expect, with the section headers hidden under the main header? I found this issue even with the FCC landing page example, but I found a few solutions here:

Might be worth looking into!

5

oooh I was wondering about how to fix that - thanks!

6

That headbutting solution worked, thanks!

But nowI’m having an unrelated issue (I hope) in that my submit button (blue, at the very bottom) won’t center. Strangely, it appeared centered this morning but then inexplicably changed back next time I looked. It’s stuck in the bottom left corner, and I can’t tell if Codepen is glitching or if I somehow messed up the code? I’m going a little crazy trying to spot the issue here…

7

Hi @alex.wadner !

Add this to the #submit-selector:

display: block;
margin: auto;

I think the issue was that it was an inline-element :slight_smile:

8

I thought for sure I tried that, but I guess not. That fixed it, THANKS! :smiley: