Skip to content
OverviewSolutions
14
Comments
13

Pranjali Sargar

@Psargar616Mumbai520 points

Hi I'm Pranjali, a Front-End Developer with entry-level experience specializing in web development, user interface design, HTML, and ReactJS. Adept at identifying opportunities to enhance front-end design and improve the user experience.

I’m currently learning...

MongoDB Express React NodeJS

Latest solutions

View more solutions

Latest comments

  • Pranjali Sargar•520
    @Psargar616

    Hey @arkunis! Great Work on the QR Code Component Challenge! 🚀

    I just checked out your solution for the challenge, and I'm seriously impressed! Your code structure is clean and the responsiveness of your design is fantastic. It's clear you put in a lot of effort, and it really shows.

    A couple of suggestions to enhance your project even more:

    • Flex/Grid Centering: Try using flexbox or grid layout to effortlessly center your QR card. It's a great technique for ensuring your design looks perfect on all devices.
    • Viewport-Centered Container: Make your container class take up the entire viewport's height and width. Centering the QR card within this container using flex or grid will give your design a sleek and polished look.
    • Sticky Footer: Consider using CSS techniques like position: fixed or min-height: 100vh to keep your footer firmly planted at the bottom of the webpage. It provides a professional touch.
    • also try reducing the card width so that it will be closer to original design

    Remember, you're already doing an excellent job, and these suggestions are just meant to help you explore more advanced techniques. Keep up the fantastic work! If you ever have questions or need more guidance, feel free to reach out. Your dedication to improvement is inspiring. Happy coding! If you found this feedback useful, please mark this comment as helpful

  • Pranjali Sargar•520
    @Psargar616

    Hi @Imhandegbelo! Great Job on Your Age Calculator App! 🎉

    I hope this message finds you well! I recently had the chance to check out your Age Calculator app, and I must say, I am thoroughly impressed! 🌟 Your coding skills are on point, and the functionality of the app is fantastic. The way it accurately calculates age is seamless, and the responsiveness is remarkable - kudos to you for that!

    I particularly appreciate how user-friendly the app is. It's simple, intuitive, and does exactly what it's supposed to do, making it a joy to use. Plus, your attention to detail in the code is evident; everything runs smoothly and efficiently.

    I did have a small suggestion, though. Considering your excellent work on the functionality, I thought of a minor design tweak that could enhance the overall user experience. Perhaps consider increasing the card height a bit and adding a subtle border radius. This adjustment might help the app align more closely with the original design, giving it that polished, professional look. Of course, feel free to explore and see what works best for your vision!

    Once again, fantastic job on your Age Calculator app! Keep up the excellent work, and I look forward to seeing more amazing projects from you in the future! If you found this feedback useful, please mark this comment as helpful

  • Pranjali Sargar•520
    @Psargar616

    Hey @SaintSin! Impressive Work on the Testimonials Grid Section Challenge! 🌟

    I wanted to reach out and express how impressed I am with your solution for the challenge. Your code structure is clean and well-organized, and getting the card pixel perfect is no small feat - great job! and I love that you used Astro.js—it's a fantastic choice!

    I do have a few friendly suggestions that might enhance your project even further:

    • Responsiveness: Ensure your design looks great on various devices and screen sizes. Consider using media queries to adapt your layout for mobile and tablet users.
    • Sticky Footer: Try using position: fixed or min-height: 100vh to keep your footer at the bottom of the webpage. It provides a polished finish to your site.
    • Fixed Width for Grid Container: Adding a fixed width to your grid container can provide stability to your layout, especially when viewed on larger screens.

    Remember, these suggestions are just meant to help you grow even further. Your dedication to improvement is inspiring, and I'm confident you'll continue to excel. If you have any questions or need assistance with any of these suggestions, feel free to reach out. Keep up the great work, and I'm excited to see your progress! If you found this feedback useful, please mark this comment as helpful

  • Pranjali Sargar•520
    @Psargar616

    Hey @FanisFFF! Great Work on the QR Code Component Challenge! 🌟

    I just had a look at your solution for the "QR Code Component" challenge, and I wanted to commend you on your outstanding work! Your code structure is incredibly clean, and your design is impressively responsive. I can see the effort you've put into it, and it really shows!

    I have a suggestion that might enhance your project even more:

    • Flex/Grid Centering: Using flexbox or grid layout can help you effortlessly center your QR code card. It's a neat trick to ensure your design looks flawless on all screen sizes.

    • Viewport-Centered Container: Make your container class take up the entire viewport's height and width. This, combined with flex or grid, will help you center the QR card effectively.

    • One quick suggestion I have is to consider placing the QR code image inside an <img> tag within a <div>. It can offer more control over the QR code's display properties and make it even more adaptable to different screen sizes.

    You can try following code tweak's to get near to the original design:

    body {
    background-color: hsl(212, 45%, 89%);
    font-family: "Outfit", sans-serif;
    font-size: 15px; 
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    /* display: inline-block; */
    background-color: white;
// remove margins and add uniform padding for the card
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* margin-top: 4%; */
    /* margin-bottom: 25%; */
    border-radius: 1rem;
    text-align: center;
    width: 300px;
    height: fit-content;
    padding: 10px;
    display: flex;
    flex-direction: column;


}

    Your work is already impressive, and these suggestions are just meant to help you explore different techniques. Keep up the excellent work! If you ever need more tips or have questions, don't hesitate to ask. If you found this feedback useful, please mark this comment as helpful

    Keep up the great work, and happy coding!

    Marked as helpful
  • Pranjali Sargar•520
    @Psargar616

    Hey @jacobchandy! Impressive Work on the QR code component Challenge! 🌟

    I hope you're doing fantastic! I just had the chance to check out your solution challenge, and I have to say, I'm really impressed! Your work on this project is absolutely outstanding! 👍

    Here's what I loved:

    Stylish Design: Your design is sleek and eye-catching. The color palette and typography choices are spot-on, making it visually appealing.

    I want to suggest just a few changes to get that pixel perfect design:

    .component {
   //add padding and increase border-radius
    border-radius: 20px;
    width: 320px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 10px;

}
.image img {
    margin: 10px;
   //remove 2 lines below
    /* margin-bottom: 0px; */
    /* padding-bottom: 0px; */
    width: 300px;
    border-radius: 15px;
}

also for h2 you can use color from style guide

    Responsive Layout: I noticed your solution adapts flawlessly to various screen sizes, which is a crucial skill in web development.

    Code Quality: Your code is well-structured and easy to follow, reflecting your strong development skills.

    You're doing fantastic, and these suggestions are just meant to help you polish your skills even more. Wishing you all the best in your coding adventures! Looking forward to seeing more of your brilliant projects! If you found this feedback useful, please mark this comment as helpful

    Marked as helpful
  • Pranjali Sargar•520
    @Psargar616

    Hey @Dagime-Teshome! Excellent Job on the QR Code Component Challenge! 🌟

    I just had the chance to check out your solution, and I'm impressed! Your attention to detail in getting the card pixel perfect is commendable. Well done!

    I have a couple of suggestions that might elevate your project even further:

    Flex/Grid Centering: Utilizing flexbox or grid layout can make centering your QR card effortless. It ensures your design looks great on all devices and screen sizes.

    Viewport-Centered Container: Make your container class take up the entire viewport height and width. Centering the QR card within this container using flex or grid will give your design a polished, cohesive look.

    Sticky Footer: Consider using position: fixed or min-height: 100vh to keep your footer firmly planted at the bottom of the webpage. It not only looks professional but also adds a nice finishing touch.

    One more thing, instead of directly using image tag use it inside of a div to fit an image inside a div element with a specific height and width to maintaining its aspect ratio. You can use CSS styles. Here's how you can achieve that:

    .container {
    width: 300px; /* Set the desired width */
    height: 200px; /* Set the desired height */
    overflow: hidden; /* Hide the overflowing parts of the image */
}

.container img {
    width: 100%; /* Make sure the image takes up 100% of the container's width */
    height: auto; /* Maintain the aspect ratio, automatically adjusting the height */
}

    Your work is already fantastic, and these suggestions are just meant to help you explore more advanced techniques. Keep up the amazing work, and if you ever need more guidance or ideas, feel free to reach out. You're doing great, and I'm excited to see how you continue to improve and grow!

    Happy coding! If you found this feedback useful, please mark this comment as helpful

    Marked as helpful
View more comments