Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
24
Comments
3
P

Wilson Andres Quintero Cardona

@waquintero-ia260 points

Estudiante Ingeniería sistemas 10° semestre - Universidad Santiago de Cali Contador Público - Universidad Santiago de Cali

Latest solutions

  • Single price component React + Tailwind

    #accessibility#react#tailwind-css

    P
    Wilson Andres Quintero Cardona•260
    Submitted 8 months ago

    Any feedback will be appreciated


    0 comments
  • Signup form maste React + Tailwind + Formik + Yup

    #accessibility#react#tailwind-css

    P
    Wilson Andres Quintero Cardona•260
    Submitted 8 months ago

    Any feedback will be appreciated


    0 comments
  • Base Apparel React + tailwind

    #accessibility#react#tailwind-css

    P
    Wilson Andres Quintero Cardona•260
    Submitted 8 months ago

    Any feedback will be appreciated


    0 comments
  • Four card feature section React + Tailwind

    #accessibility#react#tailwind-css

    P
    Wilson Andres Quintero Cardona•260
    Submitted 8 months ago

    Any feedback will be appreciated


    0 comments
  • Article preview component React + Tailwind

    #accessibility#react#tailwind-css

    P
    Wilson Andres Quintero Cardona•260
    Submitted 8 months ago

    0 comments
  • Responsive Social proof section

    #accessibility#react#tailwind-css

    P
    Wilson Andres Quintero Cardona•260
    Submitted 9 months ago

    0 comments
View more solutions

Latest comments

  • Karim Hussein•270
    @karim-abd-hussein
    Submitted 8 months ago
    What specific areas of your project would you like help with?

    here the code that I have use for javascript but I'm not sure if that clean and perfect code **maybe some feedback or tips to follow **

    js file

    const inputFiled=document.getElementsByTagName("input");
    const warningElements=document.getElementsByClassName("warning");
    const submitInput=document.querySelector("input[type='submit']");
    
    
    // this will listen for all warning that has clicked 
    // and returned to default
    for (let i = 0; i < warningElements.length; i++) {
       const element = warningElements[i]; 
    
       element.addEventListener('click',() =>{
          element.style.display="none";
          inputFiled[i].style.display="block";
    
    
       })
       
    }
    
    function checkEmptyFiled(e){
    
      for (let i = 0; i < inputFiled.length-1; i++) {
       const element = inputFiled[i];
    
       if(element.value===''){
       e.preventDefault();
          element.style.display="none";
          warningElements[i].style.display="flex";
       }
    
    }  
    
    }
    
    submitInput.addEventListener('click',function(e) {
       checkEmptyFiled(e);
    
    });```
    

    intro signup form

    1
    P
    Wilson Andres Quintero Cardona•260
    @waquintero-ia
    Posted 8 months ago

    This is an interesting article that shows some good options for handling complex forms

    https://www.frontendmentor.io/articles/managing-complex-forms-in-react-using-formik-and-yup-C2DlPAsgp6

  • P
    MikDra1•7,450
    @MikDra1
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    💻 Hello, Frontend Mentor Community,

    This is my solution for the Article preview component.

    • Scored 97% on Google Pagespeed Insights! 🚀
    • Solution with 100% W3C validation accuracy 🌟
    • Toggle works when you change the viewport size even when you have the toggle opened 🛫
    • Custom animation when opening the toggle with the social icons ⭐

    🛠️ Built with:

    1. HTML ✨
    2. CSS 🎨
    3. JavaScript 🧾
    4. React ⚛️
    5. Vite.js 💡
    • Fully responsive design crafted with a mobile-first approach 📲

    • Enjoyed every moment coding this! 😎

    • Feedback is always welcome—let’s grow together! 🌱

    • Completed 17 out of 19 Newbie Challenges so far—keeping up the momentum! 🔥

    • 👨‍💻 Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.

    • As I am starting my journey with React I'm really looking forward to hearing your thoughts and suggestions! 💡

    Article preview component built with HTML | CSS | REACT - MikDra1

    #react#vite
    1
    P
    Wilson Andres Quintero Cardona•260
    @waquintero-ia
    Posted 8 months ago

    Hello, good job completing the challenge!

    Reviewing the preview of the site, I identified that on mobile devices, clicking the share button only works if you click on the top of the circle.

    I'm sure you'll be able to sort out these details easily 😉.

    Happy coding

    Marked as helpful
  • Mohamed khlifi•150
    @Mohamedkh369
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    proud of using javascript to achieve a dynami result.

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

    i ahd to learn how to create a triangle with css , it's a nice trick :)

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

    none

    Article preview card component solution

    1
    P
    Wilson Andres Quintero Cardona•260
    @waquintero-ia
    Posted 8 months ago

    Hello Good job on completing the challenge !

    The card on mobile devices is showing a size larger than it should be. I noticed this is due to the following styles applied to the body:

     height: 100vh;
    

    This can be fixed by changing to the following configuration:

    min-height: 100vh;
    

    I also notice that the .share-icon-container element is for desktop devices, and when switching to mobile devices, it doesn't change to the mobile design.

    Happy coding

Frontend Mentor logo

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