Submitted almost 3 years ago

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

Stephanie•100

@Sneflenie

Preview site View code

This is a solution for...Intro component with sign-up form

HTML
CSS
JS

1newbie

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

@ChristBMPosted almost 3 years ago

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

Stephanie•100

@SnefleniePosted almost 3 years ago

@ChristBM thanks again!

Harmanjot Singh•985
@arkharman12Posted almost 3 years ago
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
@SnefleniePosted almost 3 years ago
@arkharman12 Thank you! :)
0

Please log in to post a comment

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