Huddle landing page with curved sections with HTML and CSS

Community feedback

• 

  Ksenia•1,350

  @kseniusPosted about 4 years ago

  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

  @AntoooanePosted about 4 years ago

  @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