Landing page feedback (Doggo Care)

Code Feedback
1

This one was very challenging :smile: and had to redo it a few times because the CSS became very messy when making it responsive. I’m finally getting the hang of flexbox now, it was a great learning experience. Feedback is welcome!

4 Likes
2

I like it! It’s very clean and organized.

If you want you could give a little bit of margin and padding for some elements.

For example for the hero banner:

#hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2rem 1.5rem 0 4rem; /* Modified */
  margin: 40px auto 80px;
}

or you can also add a few CSS rules for adding a margin for the body and the input buttons :slight_smile:

body {
  margin: 0 2.5 rem
}

.margin-top-16 > input {
  margin : 0 0.5rem
}

input[type="phone"] {
  margin-right: 4.5rem
}

Happy coding!

1 Like
3

Thanks for taking the time for this, I’ll add them in and learn how they behave after my brain has recovered :sweat_smile:

1 Like
4

OMG, this looks soo great. I like the design, the buttons, the colors and other things. Looks like a real website. The only thing I would suggest is to manage the «div soup». I have some web masters that tell me HTML5 does not really matter for SEO, but I think it’s always great to make your code more semantic and meaningful.

Here’s the first article I googled for this topic. Div Soup

Have a great day and keep coding, you’re gonna become a great front-end dev)

1 Like
5

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

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    For instance, links to fonts go in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    There are HTML syntax/coding errors you should be aware of and address.
    Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upxper right of each section and then click on the respective ‘Analyze’ link.
    The one for CSS is good. Use it and address the issue(s).
    (The one for HTML misses things which is why I recommend W3C)
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    There’s a horizontal scrollbar on large and small screens
1 Like
6

Thanks for your kind words, I did get a bit carried away on the divs haha. Thanks for pointing it out and I will break this habit early, thanks for the article is very valuable.

1 Like
7

Thanks for the feedback Roma! I’ll make sure to cover all of it before moving on.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.