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 with curved sections with HTML and CSS

Antoooane 60

@Antoooane

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


Can you help me to improve this page?

Community feedback

Ksenia 1,350

@ksenius

Posted

Hi! Good work on the challenge!

I have some advice for you:

1) For such elements as <div class="users_sup"></div> and <div class="users_inf"></div> you could have used CSS pseudo-elements:

.users::before { ... }
.users::after { ... }

For better code structure organization it would be good to wrap some related elements in <section> or <div> with a suitable CSS class name. Especially sections of the landing that have headings.

<section class="cta">
  <h2 id="ready">Ready To Build Your Community?</h2>
  <button class="getstarted btn2">Get Started For Free</button>
</section>

I'd recommend you learn more about HTML semantics if you haven't already (I notices that you used <header> but you didn't use <footer> for the page footer).

Also, getting familiar with some CSS naming conventions can help you organize your code better.

2) I also noticed you used a lot of ID selectors. Be careful with them. IDs has higher specificity than class and tag selectors and may cause some trouble with applying styles that come from different sets of rules.

3) Not all elements that looks like buttons in a design layout should be <button>s in code. More appropriate tag for some of them can be <a>. When analyzing the design, think if you need a simple button (e.g. a button in a search form or a menu (e.g. hamburger) button) or a link that most likely leads to another page.

4) For building pixel perfect solutions and in case you don't have a Sketch file, you can use PerfectPixel extension. It's free and available for Chrome, I'm not sure about other browsers.

1

Antoooane 60

@Antoooane

Posted

@ksenius Thank you for your feedback, it really helps me. You show me very interesting things to improve, and I will try make a better page, a perfect page. Thank you

0

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