Skip to content
OverviewSolutions
2
Comments
3
Manuel Matus
@ManudeQuevedo

All comments

  • Manuel Matus•70
    @ManudeQuevedoPosted over 1 year ago

    Hi Prathna,

    First of all, congrats on finishing the project!

    Here is my feedback to you, I do agree with IryDev in the following:

    • Try to use Semantic HTML, this is mainly used for two reasons, accessibility, and readability, in my opinion using a <div> should be the last thing you should consider using, there are other tags with more meaning such as <main> <section> <article>, and so many more, please check this article to get familiarized with Semantics in HTML.
    • Divs are ok to define your content inside the container, but never ok to use them as the container itself, For example:
    **This is not right**
<div class="container">
     <div class="left-content">
         <h1>Hello World</h1>
     </div>
     <div class="right-content">
         <p> Some example text here>
     </div>
</div>

**This is correct**
<main class="container">
    <div class="left-content">
        <h1>Hello World!</h1>
    </div>
    <div class="left-content">
         <p>Some example text here</p>
     </div>
</main>
    • Avoid using divs for heading text, this text should've been an H1 instead: Improve your front-end skills by building projects.
    • I'm not sure why your image looks pixelated, don't give hardcoded dimensions e.g. you added a width and height of 330px, a better approach is putting your image on its own container and putting a width of 100% of that parent container, it would make your image become responsive regardless of the viewport size (screen size).

    I leave you these resources for you to improve your coding skills even more:

    A good course to deeply understand HTML and CSS:

    Hoping this helps you improve

    0
  • Manuel Matus•70
    @ManudeQuevedoPosted over 1 year ago

    Congrats! It works fine!

    This is my feedback for you, hope it helps:

    • To make it easier on responsiveness, I suggest you follow the mobile-first approach, you start developing for smaller screen resolutions and then with the @media or CSS Grid, you can change the look and feel of the elements.
    • In your JavaScript, I strongly recommend you give your variable more meaningful names, this will allow you and other devs to understand your code. As developers, we tend to forget that other dev might read our code and take the time to declare well-named variables will save you and others a lot of time.
    • Also in your JS, try to follow the camelCase way of declaring a variable, I see you did it with the validRegex but not with the emailid. This is all about being consistent with the code you write.
    Marked as helpful
    1
  • Carlos Jose Linares Rodriguez•40
    @KarlangaXZSubmitted over 1 year ago

    Today I do the FRONTEND MENTOR CHALLENGE of creating a Newsletter Sign-up Form with a stylish success message. Learn how to structure the HTML markup, style the form elements with CSS for a RESPONSIVE DESIGN and implement simple EMAIL VALIDATION with JavaScript functionality to display a success message upon successful submission.

    I first start with the HTML FORM DESIGN, then I move on the CSS Design, and finally finish with JAVASCRIPT at the end. At the end I show the finished project, showing the FORM VALIDATION and any possible

    Newsletter sign-up form with success message solution

    1
    Manuel Matus•70
    @ManudeQuevedoPosted over 1 year ago

    Very impressive! It works perfectly.

    Some points I think it would make your project even better:

    • Try adding a transition to your buttons, so when you hover the background change looks smooth, this will make it more elegant.
    • Responsiveness needs some work, when you make the page smaller, there's a point where the content breaks a little bit on the bottom, and the content on the left takes more height than the image itself.
    • In your HTML avoid using divs, as this is not good for accessibility, and as a Developer I strongly suggest you always have this in mind, because when you develop a website or web app, you have to have in mind all types of users, try to user semantic HTML, and use <div> as your last resource.
    Marked as helpful
    0