Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
16
Comments
83
Motunrayo Adeneye
@motuncoded

All comments

  • Ahmeddnada•10
    @Ahmeddnada
    Submitted 10 months ago

    qr-code

    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted 10 months ago

    Weldone!!!

    Here is a list of suggestion

    1. the alt attribute of the image need to be filled and should not be empty and it should have a descriptive information about the image. <img src="image-qr-code.png" alt="QR code Image" />

    2. The div around the image can be change to <figure> as the image container and <figcaption> for the caption for the image.

    <figure className="image mb-4">
      <img src="image-qr-code.png" alt="QR code lmage" className="w-full rounded-lg" />
      <figcaption>Scan the code to improve your front-end skills</figcaption>
    </figure>
    
    Marked as helpful
  • Muhammad Saim Khan•190
    @Muhammad-Saim-Khan
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    "Thank you for reaching out to us! Your message has been successfully submitted, and our team will get back to you shortly. We appreciate your patience and look forward to assisting you. If you have any urgent queries, feel free to contact us directly through our support email or phone number. Have a great day!"

    What challenges did you encounter, and how did you overcome them?

    Challenges Encountered: During the process of building the project, one of the major challenges I faced was ensuring the form validation was both user-friendly and functional. Initially, getting the form fields to properly validate inputs, especially the email field with regex, was a bit tricky. Additionally, making the form fully responsive across all screen sizes required multiple iterations to get the layout just right.

    How I Overcame Them: To resolve the validation issues, I spent time debugging and refining the regex for email, while also improving the error messages to make them clearer for users. For responsiveness, I used Tailwind CSS and ensured to test the form on different devices and viewports, tweaking the design until it looked perfect on all screens.

    What specific areas of your project would you like help with?

    There are a few specific areas where I would appreciate some help:

    Form Validation: While the form is working fine, I want to make sure the validation is as robust as possible. I'm currently using regex for email validation, but I want to know if there are better approaches or best practices for handling form validation more efficiently, especially with larger forms.

    Responsive Design: Although the design is responsive, I'm looking for feedback on optimizing it further for mobile devices. Specifically, I want to ensure that the layout scales smoothly across all screen sizes without any issues in spacing or alignment.

    Code Optimization: I feel that some parts of my code could be refactored to make it cleaner and more maintainable. I'd appreciate advice on how to better structure my state management or simplify some of the event handlers.

    Error Handling: Currently, I'm handling form errors with basic useState. Are there better ways to manage form errors, perhaps using React Hook Form, Yup, or Zod for validation?

    Authentication Validation Contact Form

    #react#tailwind-css
    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted 10 months ago

    Congratulations to you on the completion of the project.

    Few suggestions for a better HTML structure:

    1. <p className="text-[14px] text-[#383a3b] mb-1 font-normal"> First Name <span className="text-[#0d6eff]">*</span> </p> can be changed to <label htmlFor="firstname" className="text-[14px] text-[#383a3b] mb-1 font-normal"> First Name <span className="text-[#0d6eff]">*</span> </label> and for every input field.
    2. The p tag for the error can be changed to this <p id="error-message" aria-live="assertive">{error.message}</p> to allow screen readers to understand that it is validation errors.

    hope this is useful

    Marked as helpful
  • Agung Prasetyo•210
    @agpprastyo
    Submitted 10 months ago

    blog-preview-card

    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted 10 months ago

    Congratulations on the completion of your project

    Few suggestions to make it better:

    • It is a good practice to have the css styles in a css file
    • The <div class='container'> should be changed to <main class='container'> or <div role="main" class="container"> to be accessible to screen readers
    • The heading should be in hierarchy i.e <h1> > <h2> > <h3>. This shows that the heading should be ascended order
    • It is also a good practice to use a formatting package e.g prettier to format the code base.
  • SUJAY-HK•30
    @SUJAY-HK
    Submitted 10 months ago

    HTML5,CSS3

    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted 10 months ago

    Congratulations on the completion of your project

    Few suggestions that make the HTML structure better

    1. It is a good practice to have the css styles in a css file
    2. The <div class='container'> should be changed to <main class='container'> or <div role="main" class="container" > to be accessible to screen readers
    3. The heading should be in hierarchy i.e <h1> > <h2> > <h3>. This shows that the heading should be ascended order

    I hope you find this useful

    Marked as helpful
  • AbdoMohamad768•50
    @AbdoMohamad768
    Submitted 10 months ago

    Beautiful Responsive Social Links Profile

    #parcel#pure-css
    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted 10 months ago

    Congratulations on completing this challenge

    Here are few suggestions to be added

    1. The <div class="card"> can be changed to <main class="card">.
    2. The heading should be in hierarchy i.e the <h4> should change to <h2>.

    I hope this is useful.

    Marked as helpful
  • Cyber-dave-official•40
    @Cyber-dave-official
    Submitted 10 months ago

    Social-Links-Preview-Card using HTML and CSS

    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted 10 months ago

    Congratulations to you all

    Here is a suggestion that can be added

    1. The heading should be in hierarchy i.e <h1> to <h2> to <h3>.

    I hope it is helpful

  • ForReal•20
    @Realkrubb
    Submitted 10 months ago

    blog preview card main with html css

    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted 10 months ago

    Congratulations on completing the challenge

    Here is a few list of suggestions

    1. For the <div class="content">, change it to <main>.
    2. The <a> for the learning should be change to <h1> and every other <p> should be change except the last <p> tag.
    3. The <a> in the profile container should be removed and the <img> under this should have alt tag to describe the img.
    4. You can use prettier to format the code base for easy reading.

    I hope you find this useful

    Marked as helpful
  • ShailyJeet02•10
    @ShailyJeet02
    Submitted 11 months ago

    3-column preview card component

    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted 11 months ago

    Congratulations to you for completing this challenge. Here is few suggestions

    1. You can make the <main> container have the class "cards-container" to avoid the use of another <div>
    2. You can have the html file and CSS file in the directory " frontend-mentor-file".
    3. You can change the value of the anchor attribute <a href="#"> to avoid going to a 404 page
    4. After the html file and css file are in the same directory, change the path of the src attribute of the img element.

    Hope you find this useful

    Marked as helpful
  • Eymen Bacar•250
    @aymanbajar
    Submitted 11 months ago

    Product-preview-card-component

    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted 11 months ago

    Good work

    Here is a list of few suggestions for you

    • The div with the class container can be change to <main>.
    • The heading tag so be in hierarchy so you can change it to this
    <div class="second">
      <h1>PERFUME</h1>
      <h2>Gabrielle Essence Eau De Parfum</h2>
      <p>A floral, solar and voluptuous interpretation composed by Olivier polge, Perfumer-Creator for the house of channel  </p>
       <h3>$149.99</h2>
       <button id="add" type="submit">
       <i class="fa-solid fa-cart-shopping"></i>
       Add to  cart</button>
    </div>
    
    • To achieve responsive image, change the img tag to this and aslo include the alt tag
    <img
      src="images/image-product-mobile.jpg"
      alt="Image-product"
      srcset="images/image-product-mobile.jpg, images/image-product-desktop.jpg"
      sizes="(max-width: 600px) 100vw, 50vw"
    />
    
    • You can add this to the body to center the main container
    body{
    display:flex;
    justify-content:center;
    align-items:center;
    }
    

    Hope this useful

  • Quentin Luback•160
    @qluback
    Submitted about 1 year ago

    Flexbox

    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted about 1 year ago

    Very good using your own image and details

  • James Hilts•10
    @jdhilts
    Submitted about 1 year ago

    QR Code Component

    #accessibility
    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted about 1 year ago

    Nice work !!!! The padding between the heading content should be reduced.

  • mihai1702•130
    @mihai1702
    Submitted about 1 year ago
    What specific areas of your project would you like help with?

    I don't know how to put the purple overlay on the image.

    Stats Preview Card

    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted about 1 year ago

    Congratulations on first attempt !!! Having the container can be done by centering it

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

    for the purple color, using this will help give the image the purple color.

    img{
    filter: invert(9%) sepia(16%) hue-rotate(227deg) saturate(1522%) contrast(100%) brightness(54%);
    
    }
    

    I hope you found this useful

  • fnpassong•160
    @fnpassong
    Submitted about 1 year ago
    What specific areas of your project would you like help with?

    Hello!, any constructive criticism I will be happy to read them

    NFT Preview Card

    2
    Motunrayo Adeneye•880
    @motuncoded
    Posted about 1 year ago

    Congratulation on your first attempt to this !!!

    You can center the card by using this below,

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

    I hope you found this useful

    Marked as helpful
  • josip-h•90
    @josip-h
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am the most proud of completing the project and for sticking with practicing the skill of web development. I wouldn't do almost anything different the next time as the next project will have its lessons and the most I am hoping for is that the lessons I learned earlier will be of great help with solving new problems and in making me more efficient in the process.

    What challenges did you encounter, and how did you overcome them?

    There were a few challenges but nothing too serious. The first one was with using git. Since I'm somewhat new to using git and this time I was using two different computers for writing the solution I needed to learn how to fetch the newest versions of code. The process is relatively straightforward and was solved by using Chat GPT. The other small problem is with motivation for writing documentation as it's not as fun as writing code.

    What specific areas of your project would you like help with?

    If anyone has some experience with the BEM naming convention I would be grateful for any comments regarding my implementation. Also, any other suggestions would be greatly appreciated. Thanks!

    Flexbox, BEM solution of Blog preview card challenge

    #bem
    2
    Motunrayo Adeneye•880
    @motuncoded
    Posted about 1 year ago

    Well done on your attempt on the blog preview card challedge... You can do this by centering your card

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

    I hope you found this useful

  • Motunrayo Adeneye•880
    @motuncoded
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Everything about the social links project

    What challenges did you encounter, and how did you overcome them?

    none

    What specific areas of your project would you like help with?

    None

    Responsive social links profile

    2
    Motunrayo Adeneye•880
    @motuncoded
    Posted about 1 year ago

    thanks

  • Yassir•200
    @Falconstadium
    Submitted about 2 years ago

    product-purfume-card using css grid

    #accessibility
    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted about 2 years ago

    Congratulations to you in creating solution to this challenge. The items inside the body can be centered

    body {
    display:grid;
    place-items:center;
    min-height:100vh;
    }
    
    

    I hope you find this useful

  • Fawziyyah-hub•130
    @Fawziyyah-hub
    Submitted about 2 years ago

    HTML AND CSS

    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted about 2 years ago

    Congratulations to you for providing the solution to this challenge. You can try to make the item in the body centered.

    body{
    display:grid;
    place-items: center;
    min-height:100vh;
    }
    

    I hope you find this helpful.

  • Penelope•10
    @PenelopeDefourne
    Submitted about 2 years ago

    QR code component with HTML-CSS

    1
    Motunrayo Adeneye•880
    @motuncoded
    Posted about 2 years ago

    Congratulations to you for providing the solution to this challenge. You can try to make the item in the body centered.

    body{
    display:grid;
    place-items: center;
    min-height:100vh;
    }
    

    I hope you find this helpful.

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub