Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Huddle landing page CSS Flexbox, Grid, Sass, JS form validation

Marta 630

@martam90

Desktop design screenshot for the Huddle landing page with curved sections coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, I am using Sass in this project and I would like to ask about the best practices. I have added some general styles for p and h1-h6. In footer I needed to change color of h3 and p. I have overridden already written styles and I have added a css class in order to make my text white. Is this approach correct?

I will be more than glad, if you leave any feedback about my code.

Community feedback

P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Hello there, Marta! 👋

It's always nice to see you complete another challenge! 😀 Good job on this one! 🙌 Your solution looks good and responds well! 👍

I think it's fine to add some initial styles for things like text and then override them later with classes. I think using BEM nicely helps one keep track of modifier classes, too. For example, you might add color: var(--very-dark-blue) to the body but later add a class named paragraph--white to a paragraph element to change the color then. 😉

A few things I'd like to suggest are,

  • Adding a max-width to the main container or wrapper of the page to prevent the content of the page from becoming too stretched on extra-large screens (and also to prevent the hero image from becoming too big when the width of the screen increases).
  • Making sure the submit button next to the form in the footer of the page remains in its place in the desktop layout when the error message for the form appears (currently, it jumps down suddenly when the error message appears).

As usual, keep coding (and happy coding, too)! 😁

2

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord