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

Responsive Intro Component With Signup Form | HTML, CSS, & JavaScript

Stephanie 100

@Sneflenie

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was very difficult for me. I know it is pretty messy and cluttered, but I tried my best and i am at least proud that it works! As always any and all tips/feedback appreciated and welcome! :) Thank you!

Also if anyone can give me an example as to where to use a semantic tag in the html... I tried article and section, but they came up as issues in the code, so i removed them. Still really confused by semantic tags unfortunately... :/

Community feedback

ChristBM 290

@ChristBM

Posted

I will give you a couple of code examples to help you understand what is semantic HTML and what is not.

<body>
  <header>
    <h1></h1>
    <nav>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2></h2>
      <h3></h3>
      <article></article>
      <article></article>
      <article></article>
    </section>
    <section>
      <form action="">
        <label for="">
          <input type="text" name="" id="">
        </label>
        <label for="">
          <input type="text" name="" id="">
        </label>
        <label for="">
          <input type="text" name="" id="">
        </label>
      </form>
    </section>
  </main>
  <aside>
    <section>
      <h2></h2>
      <p></p>
      <button></button>
    </section>
  </aside>
  <footer>
    <section>
      <p><span></span></p>
    </section>
  </footer>

On the other hand, I can do the same thing just using the <div> tag. What do you think is better for the code reader? Read only ''divs'' or that the tags have some meaning?

Marked as helpful

1

Stephanie 100

@Sneflenie

Posted

@ChristBM thanks again!

0

@arkharman12

Posted

Pixel perfect design for desktop screens. One inconsistency I have noticed is that only the email address field text highlights in red when the form is submitted empty. Good job, overall! 👏

Marked as helpful

1

Stephanie 100

@Sneflenie

Posted

@arkharman12 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