Skip to content
OverviewSolutions
9
Comments
9
Sham Sunder
@ShamSuther

All comments

  • AmirHossein•130
    @amirhirxSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    ...

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

    ...

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

    ...

    Qr code

    1
    Sham Sunder•240
    @ShamSutherPosted 6 months ago

    Hello Amir,

    Wonderfully done, but I couldn't help but notice that you are using margin to center the main component instead I suggest you use:

    This code to get rid of unnecessary padding and margin:

    *{ margin: 0; padding: 0; box-sizing: border-box; }

    and these additional lines to body to center the QR Component:

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

    and by adding this code you can remove most of the styling from your .container class, just remember when centering an child component it's parent should have a specific height and width.

    I hope you find this somewhat helpful, Keep up the fantastic work, and remember there's no rush. Enjoy the process! 😊💻✨

    0
  • BesneiDavid•30
    @BesneiDavidSubmitted about 1 year ago

    I still find myself struggling to grasp the concepts of Flexbox and Grid, should you have any resources that helped you better understand this concepts I would ask you to share them with me. Thank you.

    Qr-code solution with basic HTML and CSS

    4
    Sham Sunder•240
    @ShamSutherPosted about 1 year ago

    Congratulations on completing the challenge! ✨🎉, and I completely understand where you're coming from! Flexbox and Grid can indeed feel a bit tricky at first but don't worry, you're not alone in this. 😊 Here are a few resources that I found super helpful when I was diving into these concepts:

    1. A Complete Guide to Flexbox
    2. A Complete Guide to CSS Grid
    3. Flexbox Froggy (Game)
    4. CSS Grid Garden (Game)

    Remember, learning these concepts takes time, and it's completely okay to struggle at first. Keep practicing, and soon enough, you'll be a Flexbox and Grid pro!

    I hope you find this somewhat helpful, Keep up the fantastic work, and remember there's no rush. Enjoy the process! 😊💻✨

    Marked as helpful
    1
  • MichaelSpl•10
    @MichaelSplSubmitted about 1 year ago
    1. What is the best way to center a div?
    2. How do I compress the text like in the example photos?

    QR Code Site

    2
    Sham Sunder•240
    @ShamSutherPosted about 1 year ago

    Hey there! Congratulations on completing this challenge! ✨🎉

    Your solution looks wonderful! 👍 You're curious about the best way to center a div? No problem at all, I'm here to help! In fact, there are a couple of ways that you might find really handy, and one of them involves using Flexbox =>

    height: 100vh;
display: flex; 
align-items: center;  /* for vertical centering */
justify-content: center;  /* for horizontal centering */

    and the second one would be using a display grid property =>

    height: 100vh;
display: grid;
place-content: center;  /* both horizontal &  vertical centering  */

    to make sure both methods work, you'll need to set a specific height for the container or body. By compressing the text, if you mean to center it!? you could try putting all the text inside a div and then applying flex property to it.

    For a better understanding of these topics, I found these blogs very helpful

    1. A Complete Guide to Flexbox
    2. A Complete Guide to CSS Grid
    3. Centering in CSS: A Complete Guide
    4. Fun with Viewport Units

    I hope you find this somewhat helpful, Keep up the fantastic work, and remember there's no rush. Enjoy the process! 😊💻✨

    Marked as helpful
    2
  • Sham Sunder•240
    @ShamSutherPosted about 1 year ago

    Hey there, congrats on acing the challenge! 🎉 Your solution looks awesome! 👏 Just a friendly heads-up – I noticed that the background color doesn't quite match the design, and there's a bit of spacing that could use some tweaking. When it comes to responsiveness, making the component shine on smaller screens might be a cool next step.

    But don't worry at all – you're on the right track and doing great! 🌟 Take your time, enjoy the process, and those front-end magic moments will keep coming your way. Keep up the amazing work, and best of luck with all your projects ahead! Happy coding! 👩‍💻✨🚀

    Marked as helpful
    0
  • JessicaSamtani•160
    @JessicaSamtaniSubmitted about 1 year ago

    Starting out with front end developing with this as my first project.

    Initially writing of the media query was tricky, wonder if following the style guide is the best idea as the max/min widths could have been a bigger size.

    Open to any suggestions

    Responsive Product Preview Card

    3
    Sham Sunder•240
    @ShamSutherPosted about 1 year ago

    Hey there! Congratulations on embarking on your front-end development journey with your first project! ✨🎉

    It's always exciting to dive into new challenges. Don't worry if writing the media query was a bit tricky at first – that's completely normal when you're getting started. Remember, practice makes perfect, and with time, you'll become more confident in handling such tasks.

    Your solution looks wonderful! 😄 I happened to notice that you're using margins to center the card, which is a smart move. If you're open to suggestions, I'd like to share a syntax that could make centering even smoother. How about giving display flex and a height of 100vh a try?

    body {
    background-color: hsl(30, 38%, 92%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    I would like to suggest

    1. A Complete Guide to Flexbox
    2. A Complete Guide to CSS Media Queries
    3. Fun with Viewport Units

    for a better understanding of these topics.

    Keep up the fantastic work, and remember, there's no rush. Enjoy the process, and before you know it, you'll be creating incredible front-end experiences.

    Happy coding and best of luck with your projects! 🌟👩‍💻👨‍💻

    Marked as helpful
    2
  • Rino•340
    @Rhinozer0sSubmitted over 1 year ago

    Hey coders,

    this is my first project in JavaScript! I would really appreciate it, if you just check my script and give me some suggestions for improvement. This would help me a lot.

    Thanks 🤝😎

    Newsletter sign up scss/js

    1
    Sham Sunder•240
    @ShamSutherPosted about 1 year ago

    Congratulations on completing the challenge! ✨🎉 You did a great job with the design and the JavaScript code looks pretty accurate. I have a suggestion that might make the design even better. Instead of adding all the invalid input properties directly as inline styles in JS, you could consider adding them to a class in CSS. This would make it easier to manage and update the design in the future.

    input.invalid{ 
border : 1px solid rgb(236, 62, 62);
color : rgb(236, 62, 62);
background-color:  rgb(252, 208, 208);
}";

    With this approach, you can easily add or remove those properties to an element just like that.

    input.classList.add("invalid");
input.classList.remove("invalid");

    I hope you find this somewhat helpful, keep up the fantastic work, and enjoy coding! 😊💻✨

    Marked as helpful
    2
  • Sham Sunder•240
    @ShamSutherPosted over 1 year ago

    Great job on your work! I really like the design and the accordion functionality. I noticed that you used position absolute on the box, which is quite precise. However, I think it would be better if you set it relative to the overall component wrapper and used CSS transform property to align it according to the screen size. Keep up the amazing work, and I wish you happy coding! 😊💻✨

    0
  • Sham Sunder•240
    @ShamSutherPosted over 1 year ago

    Hi there! Congratulations on completing the challenge, that's awesome! 🎉 Your solution looks really great 👌. If you're interested, I have a suggestion to improve the responsive mode and centering of the main element. Instead of using Margin, you could try using Flexbox. Here's a helpful guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Keep up the fantastic work and happy coding! 💪✨

    Marked as helpful
    1
  • Sham Sunder•240
    @ShamSutherPosted over 1 year ago

    great work brother

    0