Skip to content
OverviewSolutions
20
Comments
96

IryDev

@IryDev1,580 points

Web Developer Wannabe | HTML, CSS, JavaScript, Tailwind, Sass, React, Vue | You can check my Github profile to explore some projects and pages I made.

I’m currently learning...

Javascript, React, Vue, Astro, Backend Dev

Latest solutions

View more solutions

Latest comments

  • IryDev•1,580
    @IryDevPosted over 1 year ago

    Hey @Afox9207, first of all, congrats on completing this challenge 😄

    I have some advice in order to improve your solution :

    • If you want better email verification you can use regex (regular expression) :

    JS example email verification using regex (you can adapt it with your own code) :

    function ValidateEmail(mail) 
{
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))
  {
    return (true)
  }
    alert("You have entered an invalid email address!")
    return (false)
}

    I hope you'll find this helpful, above all your solution is great😁

    Marked as helpful
    0
  • IryDev•1,580
    @IryDevPosted over 1 year ago

    Hey @subha-2001 Great to see you tackling this challenge. 😊

    I have some advice in order to improve your solution :

    • remove the default margin and padding of the body with padding: 0; and margin: 0;
    • your hero image seem to not take the place of your grid
    • you can correct that by adding the properties height 100% width 100% and object-fit cover to make the hero img correctly centered

    CSS :

    body{
margin: 0;
padding: 0;
}

img.hero{
height: 100%;
width: 100%;
object-fit: cover;
}

    I hope you'll find this helpful, Best of luck, and happy coding! 💪🚀

    0
  • IryDev•1,580
    @IryDevPosted over 1 year ago

    Hi @gabrielveliz, you did a great job on this challenge 😁

    I think you can use the map method with react in order to don't repeat yourself in the navigation components or when you use nav-link :

    JSX :

    {links.map((link, index) => (
              <li key={index}>
                <NavLink onClick={updateMenu} to={link.to}>
                  <span>0{index}</span> {link.name}
                </NavLink>
              </li>
 ))}

    I hope you'll find this helpful, and your solution is really good 😄

    Marked as helpful
    1
  • IryDev•1,580
    @IryDevPosted over 1 year ago

    You did a great job keep it up💫

    The themes are beautiful!!

    0
  • IryDev•1,580
    @IryDevPosted over 1 year ago

    Hey @HumbleBumble01, well done for completing this challenge😄

    I have some advice in order to improve your solution :

    • You can increase the size of your h1 by adding the class text-lg (it could be also xl or something else) here's a link to know more about that : font-size
    • You can custom your own colors with tailwind by editing the tailwind.config.js file

    tailwind.config.js :

    /** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
// you can add your own colors like this
      transparent: 'transparent',
    },
  },
}

    I hope you'll find this helpful😄

    0
  • IryDev•1,580
    @IryDevPosted over 1 year ago

    Hey @jite91, well done for completing this challenge😄

    I have some advice in order to improve your solution :

    • Wrap the whole main content of your page in the main tag
    • Your page should have at least one h1 tag
    • I suggest replace the h3 tag by the h1
    • If you want to correctly center the score in the circle use the property display: flex ; align-items: center; justify-content: center and add the container a height of 100vh

    HTML :

    <body>
<main>

</main>
</body>

    CSS :

    
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}

    I hope you'll find this helpful😄

    0
View more comments