Landing Page/Learning Curve!

Code Feedback
1

Folks,

After almost 48 hours of screen time, I have completed my Landing Page!
I am very curious about any feedback and constructive criticism that anyone would be willing to share.

One big lesson: When dealing with grid, keep it simple! I stumbled upon an article on “auto-fill” that changed my current thinking on grid. By allowing the screen to decide the width and how many columns/rows, I saved myself a bunch of media queries. Any opinions out there about this style? Is it compatible with accessibility features?

Thank you!
SevenRooT

1 Like
2

Hi @SevenRoot. Very good project. I like it. Some suggestions:

  • The header is too big. It is really annoying when making it fixed. Consider making it small.
  • The submit button is so small and still looks basic.
  • Wrap your logo around an a tag so that when clicking it, it will return to top.
  • The “What” & “Where” header links targets to the same section.
  • Add html { scroll-behavior: smooth; } to your CSS code and click on the header links. A magic will happen.
  • Do not use the @import CSS rule to import Google Fonts. It will add extra HTTP requests. Instead, copy and paste the link tag Google Fonts give you in the head tag by clicking on the settings icon at the top of the HTML box and then “Stuff for head” box.
  • One of your media query misses a closing }. Find it by clicking on the down arrow in the CSS box and then “Analyze CSS”.

Anyway, it’s a decent project. It’s responsive! Good job!

1 Like
3

Apart from what @paulsonstech said, i want to add this.
Whenever you write this

* {
  box-sizing: border-box;
}

add padding and margin to 0;

* {
  box-sizing: border-box;
+  padding:0;
+  margin:0;
}
3 Likes
4

That’s a good point. I hate browser’s default paddings and margins :wink: :crazy_face:

2 Likes
5

Your page looks good @SevenRoot. Some things to revisit;

  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it, there are things to clean up.
      • In addition to a few unclosed media blocks there is a misspelling that can affect how your page displays.
    • (The one for HTML misses things which is why I recommend W3C)
  • Do not use in-line styling in your footer. Keep all your styling external.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • Instead of using <br> elements to have each inline element on a new line, use or set container elements to be block-level elements so they’ll each take up the full width.
  • Have one media query for each size.
    • For instance, there are nine of these; @media screen and (max-width: 845px). Each selector you’re changing for that width should be in the same media query.
2 Likes
6

Cool project! One think I’d like to add (apart from the things already said) is, I would prefer to have more padding for the form. Also it would be cool, if the submit button would react somehow, when hovering above it, for example change size or color. Also, you can turn the mouse cursor to a little hand with “cursor: pointer”.

7

Thank you Paul, RC1, and Roma. :smiley:

This feedback mechanism is an invaluable part of this program. Sincerest of appreciations. All of those things made my page so much cleaner and more functional.

As a result of attempting to make the header less annoying, I was able to craft a fix for getting the #top to reconcile just below the fixed header, instead of hiding partially behind when tapping the logo to return to top of page. Exciting!

If any of you were interested in the revamped version:

Thanks again,
SevenRooT

1 Like
8

Wow! That looks a lot better. Good job!

1 Like
9

Your page looks good @SevenRoot. Nice job cleaning things up. Something to revisit;

  • The page now passes 15/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
    • I don’t recall your original page but looked at your code and if the following is commented out, all tests pass and I don’t notice any loss of functionality.
<label class="checkbox">
  <input type="checkbox" name="top" id="top">
</label>
1 Like