Skip to content
OverviewSolutions
14
Comments
13
Pranjali Sargar
@Psargar616

All comments

  • arkunis•10
    @arkunisSubmitted about 1 year ago

    No difficult for now :)

    QR code

    1
    Pranjali Sargar•520
    @Psargar616Posted about 1 year ago

    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

    1
  • George Imhandegbelo•240
    @ImhandegbeloSubmitted about 1 year ago

    This project got me stuck for sometime 😂 till I learnt to pass props effectively. I initially had a hard time with figuring out the remaing days till I got help from a senior. Do help me review and suggest improvements. Thank you all

    Age calculator app using reactjs and tailwindcss

    1
    Pranjali Sargar•520
    @Psargar616Posted about 1 year ago

    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

    0
  • Pranjali Sargar•520
    @Psargar616Posted about 1 year ago

    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

    0
  • Pranjali Sargar•520
    @Psargar616Posted about 1 year ago

    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
    1
  • Pranjali Sargar•520
    @Psargar616Posted about 1 year ago

    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
    0
  • Pranjali Sargar•520
    @Psargar616Posted about 1 year ago

    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
    1
  • Pranjali Sargar•520
    @Psargar616Posted about 1 year ago

    Hey @msabado1996! Great Job on the Product Preview Card Component Challenge! 🚀

    I just had a look at your solution for the "Product Preview Card Component" challenge, and I must say, I'm thoroughly impressed! Your code structure is clean and well-organized, and the responsiveness of your design is flawless. Excellent work!

    I have a few suggestions that might add some extra polish to your project:

    Sticky Footer: Try using position: fixed or min-height: 100vh to make your footer stick to the bottom of the webpage. It gives your site a professional, finished look.

    Flex/Grid Centering: Utilizing flexbox or grid layout can make centering your product card a breeze, ensuring it looks great on all screen sizes.

    Dividing Card into Sections: Using flex or grid within your card component can help you divide it into two equal sections, maintaining a balanced visual appeal.

    Responsive Images: The <picture> element can be a valuable tool to render different images based on screen sizes. It's a subtle touch that greatly improves user experience.

    You're doing fantastic, and these suggestions are just meant to help you polish your skills even more. Keep up the excellent work. If you ever have questions or need more tips, feel free to ask!

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

    Marked as helpful
    0
  • Pranjali Sargar•520
    @Psargar616Posted about 1 year ago

    Hey @Ashfinn! Great Job on the Product Preview Card Component Challenge! 🌟

    I just wanted to drop a quick message to say that your solution for the "Product Preview Card Component" challenge looks fantastic! You've done a great job with the design and coding.

    A friendly tip: consider adding a uniform padding of around 10px to the image div, text div, and the container to get even closer to the original design. It'll enhance the visual consistency of your project and increase the font size of heading just a bit. Check if the following css helps.

    #container 
			{
				padding: 10px;
			}
			#qr{
				padding : 10px;
                                 object-fit : cover;
			}
			#qr img{
				width: 100%;
				height: 100%;
				border-radius: 10px;
			}
			#text {
				padding : 10px
			}
			#text h1{
				font-size: 1.5rem;
			}

    A quick suggestion: consider separating your styles into a style.css file. It will make your project more organized and easier to maintain as it grows.

    Also, adding comments to explain your code decisions can be super helpful, both for you and anyone else who might review your work. It's a great practice to make your code more understandable and user-friendly.

    Remember, these are just little tweaks - your work is already fantastic! Keep up the amazing effort, and if you have any questions or need further feedback, don't hesitate to ask.

    Keep up the amazing work, and I'm looking forward to seeing what you create next! if you found this feedback useful, please mark this comment as helpful

    Marked as helpful
    0
  • Pranjali Sargar•520
    @Psargar616Posted about 1 year ago

    Hey @GianlucaPagliuca! Impressive Product Preview Card Component Solution! 🚀

    I wanted to drop a quick note to say how impressed I am with your Product Preview Card Component challenge solution! Your design skills are fantastic, and the desktop version looks spot on.Try reducing the size of ProductCard to get closer to original design.

    One friendly tip: consider using responsive CSS units like percentages or viewport units instead of hardcoding values. This way, your layout will adapt more smoothly to different screen sizes, ensuring a great user experience on various devices.

      #ProductCard{
        width: 700px;
        height: 550px;
     
    }

    For a little extra challenge, consider optimizing the design for mobile devices. It's a great way to enhance your responsive design skills further.

    Also, down the road, experimenting with Tailwind CSS, Bootstrap, or even React.js could add an exciting twist to your projects. Each brings something unique to the table, and I think you'd enjoy the experience!

    Remember, these are just little tweaks - your work is already fantastic! Keep up the amazing effort, and if you have any questions or need further feedback, don't hesitate to ask.

    Keep up the great work! Looking forward to seeing your future creations. If you found this feedback useful, please mark this comment as helpful

    Marked as helpful
    0
  • Pranjali Sargar•520
    @Psargar616Posted about 1 year ago

    Hey @leetebbs! Great Job on the Product Preview Card Component Challenge! 🚀

    I just wanted to drop by and say your solution for the "Product Preview Card Component" challenge is awesome! 👏 The design looks fantastic, and your coding skills are really shining through.

    I had a quick thought: consider trying out Tailwind CSS, Bootstrap, or even React.js for a project like this in the future. These tools can add some extra magic to your work and expand your skill set even further.

    Keep up the excellent work! Looking forward to seeing more of your creations. If you found this feedback useful, please mark this comment as helpful

    Marked as helpful
    2
  • Pranjali Sargar•520
    @Psargar616Posted about 1 year ago

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

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

    Here's what I loved:

    Layout Mastery: Your grid section layout is on point! The testimonials are beautifully presented, and the visual hierarchy is superb.

    Responsive Design: I noticed your solution adapts seamlessly to different screen sizes. Ensuring a great user experience across devices is so important, and you nailed it.

    Attention to Detail: The small details in your design, from font choices to spacing, really make a difference. It shows your keen eye for design.

    I also wanted to suggest something exciting: How about giving Tailwind CSS a spin for a similar project in the future? Tailwind's utility-first approach could complement your skills perfectly. It's a fun way to streamline your workflow and create sleek, responsive designs with ease. I think you'd enjoy experimenting with it!

    Keep up the fantastic work! If you decide to explore Tailwind CSS or if you have any questions about it, feel free to reach out. I have no doubt that you'll create something amazing with it.

    Wishing you all the best in your coding adventures! Looking forward to seeing more of your brilliant projects!

    Marked as helpful
    1
  • Pranjali Sargar•520
    @Psargar616Posted about 1 year ago

    Hey @PraveenMahra, awesome job on the Interactive Rating Component Challenge! 🌟

    I hope you're doing well and enjoying your Frontend Mentor journey. I just had to drop you a message to say that your solution for the "Interactive Rating Component" challenge is absolutely fantastic! 🚀

    Here's what I loved:

    Stunning Visuals: Your design implementation is top-notch. The color scheme and typography choices are spot on.

    Interactivity: The way you've made the rating component interactive is a great touch. It's engaging and user-friendly.

    Responsive Design: I noticed your solution adapts smoothly to different screen sizes. Excellent job on that front!

    A couple of minor suggestions:

    Code Comments: Consider adding a few comments to explain your thought process in the code. It's incredibly helpful for anyone reviewing your work and makes it easier for you to revisit your code later.

    Accessibility: Just double-check for accessibility features to make sure your solution is usable by everyone, including those who may rely on assistive technologies.

    I have a small suggestion for you: Why not consider building a similar project using React.js in the future? Given your talent, I believe you could create something truly amazing with React's powerful features. It could be a fun challenge and a great opportunity to expand your skill set.

    Keep up the excellent work! If you decide to dive into the React version of this project or if you have any questions along the way, feel free to reach out. I'm sure you'll do brilliantly!

    Your work is already fantastic, and these suggestions are just about making it even better. Keep up the awesome work, and don't hesitate to ask if you need more feedback or have any questions.

    Cheers to your coding journey!

    Marked as helpful
    0