Skip to content
OverviewSolutions
27
Comments
64
Rajaul Islam Ratul
@ratul0407

All comments

  • Rajaul Islam Ratul•1,250
    @ratul0407Posted 11 months ago

    @Shivayshiva congrats on completing this challenge🎉🎉

    To center the card just do this,

    body {
    min-height: 100vh;
    margin: 0;
    display: grid;
}
.main {
    /* max-width: 1440px; */
    /* height: 120vh; */
    background-color: hsl(47, 88%, 63%); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    There is a default margin of 8px around the body that is causing the white spaces all around the corners. That's why you need to set margin: 0. And to make the solution properly work you need to comment out the height and width property from your main.

    I hope you found this helpful👍👍

    Have a nice day and happy coding🙂

    0
  • Djole-zr•90
    @Djole-zrSubmitted 11 months ago

    I having trouble making transition on opening and closing questions, can someone help me with that?

    Responsive accordion

    1
    Rajaul Islam Ratul•1,250
    @ratul0407Posted 11 months ago

    @Djole-zr congrats on completing this challenge🎉🎉

    There are quite a few ways to add transition on accordions. e.g.

    • You can use plain css to animate accordions first, create a new animation using @keyframes
    @keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 100;
  }
}

    Before you add the transition you should use a class add it on your p tag which doesn't have any class by default. It get's a .show tag when .question is clicked. We need to change it!. Add the following classes to it (answer, hidden).

    .answer {
  opacity: 0;
  animation: fade-in 200ms ease 0ms 1 alternate forwards;
}

.hidden {
  display: hidden;
}

    Then in js just toggle between hidden class whenever the question div is clicked

    I hope you found this helpful👍👍

    Have a nice day and happy coding my friend😄

    1
  • Valper•150
    @ValperDevSubmitted 11 months ago

    Hello guys, i just finished this project and all feedback is welcome from html structure to class naming, loading fonts, best practices in html / css, etc... Thank you.

    Card component using flex

    1
    Rajaul Islam Ratul•1,250
    @ratul0407Posted 11 months ago

    @ValperGT congratulations on completing this challenge🎉🎉

    Your solution looks pretty decent but you need some code improvements:

    • Every page should have a main tag. So Wrap you entire .card-container inside of a main tag.
    • You've used pixels, rems and ems on your site. But using px on paddings doesn't seem a good idea to me. And if you want to decide between rems , ems, and pixels here's an article deep diving into it. should you use px vs rem vs em

    I hope you found this helpful👍👍

    Have a nice day and happy coding🙂

    Marked as helpful
    2
  • Rajaul Islam Ratul•1,250
    @ratul0407Posted 11 months ago

    @Surya-Thiruvengadam congratulations on completing this challenge🎉🎉

    Your solution looks pretty good. But there are room for some changes.

    • Always try to use relative css units instead of absolute ones. Pixel(px) is an absolute css unit. And I'd recommend you to avoid this unit completely. Using Pixel for font-sizes is a really bad idea. And I'd suggest not use it for width, height ,margin and padding also. Use rems or ems instead of pixel. If you use pixel in the future while doing large pages with complex section it'll cause a lot of problems and it is also not good for the responsiveness of the page. And if you are wondering why does it matter so much here's an article to explain you more on this topic Why font-sizes should never be in Pixels😄

    That was the only nick pick that I found while viewing your solution🙂. Apart from that your solution looks decent

    I hope you found this helpful👍👍

    Keep up the good work and have a very nice day😄

    Marked as helpful
    0
  • lalitkarthik•20
    @lalitkarthikSubmitted 11 months ago

    I recently delved into Scss for the first time, and I must say, it's truly impressive. I have used Scss in this project and also got some cool tips and tricks. Please do take a look at the code, and suggest any improvements or changes and best practices. Give some tips on how to improve the responsiveness of the website.

    Responsive Four Card Feature Section using CSS Grid and Flexbox

    1
    Rajaul Islam Ratul•1,250
    @ratul0407Posted 11 months ago

    @lalitkarthik congrats on completing this challenge 🎉🎉

    You're solution is amazing. But you should consider changing some of your code. You've used pixels for margins which is not good and using pixel for font sizes is the last thing you want to do. You should always try to avoid pixels as they are absolute units always use relative units like (rems or ems). If you are wondering what is so bad about using pixels here are some articles deep diving into this topic

    Apart from this your solution looks great✨

    I hope you found this helpful👍👍

    Keep up the good work and have a very nice day😄😄

    Marked as helpful
    1
  • eosook•130
    @eosookSubmitted 11 months ago

    When playing around with the screen widths, I find a lot of the times a lot of my elements will have their content bleed over their box, like text going over their given height, when the screen is at certain widths.

    How do you generally approach a problem like this? Do I need to make multiple media queries so that it looks better when it hits those dimensions or are the units i'm using for those elements not optimal.

    News Home Page - Sass

    1
    Rajaul Islam Ratul•1,250
    @ratul0407Posted 11 months ago

    @eosook congrats on completing this challenge🎉🎉

    You're solution looks pretty good👍. Generally when I find myself into the issue you've described. I'll never go to media queries for the solution of such a problem. Most likely I'll use max-width if the content is overflowing or clamp if the font-size of the property is causing issues. Most of the time I find myself using max-width so the content doesn't bleed or overflow. I exactly don't know what element caused you the issue. But looking at your solution I'm guessing that the image might caused you some problem. 'Cause you haven't set max-width: 100% on to your image. Always reset your images using these properties,

    img, svg, canvas {
max-width: 100%;
display: block;
}

    I hope you found this helpful👍👍

    Keep up the good work and have a very nice day😄

    Marked as helpful
    0
  • Rajaul Islam Ratul•1,250
    @ratul0407Posted 11 months ago

    @frankgomezdev congrats on completing this challenge🎉🎉

    You've done a really great job. There's not a lot to complain about👍. But,

    • the padding you've set to .container of 2rem is actually shrinking your container. You can just remove it and it looks more like the design.
    • It's such a small challenge and there wasn't a lot of space to add landmarks but you've done enough. The footer you've added is good but you've commented out the .attribute😅. I know this mistake 'cause I've also done a couple of times. Uncomment it and remove the .attribute div as you are using a footer
    • And the last nick pick that I can say, and it's completely my personal opinion that there are too many div element on the page. You can consider making the top box a article.

    I hope you found this helpful👍👍

    Happy coding and have a very nice day😄

    Marked as helpful
    0
  • Rajaul Islam Ratul•1,250
    @ratul0407Posted 11 months ago

    @0xmaxx1 congrats on completing this challenge 🎉🎉

    You've done a great job. But you might consider changing some code :)

    • Always use rems instead of pixels. Pixels are absolute units and rems are relative units. And this relative rem units are way better than pixels in terms of responsiveness. And if you want to learn more about this topic here's an article deep diving into it Stop using pixels unit in css

    I hope you found this helpful👍👍

    Keep up the good work and have a very nice day😄

    0
  • Rajaul Islam Ratul•1,250
    @ratul0407Posted 11 months ago

    @khalid225 congrats on completing this solution🎉🎉

    You've tried really well. But you can make it better.

    • the body element get's some default styling which is implemented differently by different browsers. You should always get rid of them first and then start your own styling. And for that you can use some css resets. Because of those default styling of the body the container-body has shrunk a little bit and to fix that just do this
    body {
margin: 0;
padding: 0;
}
    • Also remove .accordion-body { width: 80%} and img { width: 100% /* by default it's always 100%*/}. And on the accordion remove the width of 50% and apply this.
    
/* for mobile screens */
.accordion {
max-width: 45rem;
margin: 1rem;
}
/* for desktop */
@media(min-width: 45em) {
  .accordion {
   margin: auto;
 }
}
    • I'd recommend you to use rems instead of pixels. And if you want to know why Here's an article deep diving into this topic. Stop Using Pixels!

    I hope you found this helpful👍👍

    Keep up the good work and have a very nice day🙂😄

    Marked as helpful
    0
  • Namrata Sinha•530
    @nmrtsnhSubmitted 11 months ago

    Hello everyone,

    I am Namrata and this is my solution for the Newsletter sign-up form with success message challenge.

    If you have any suggestions to improve my code, please feel free to share!

    Thank you 🙏

    Newsletter sign-up form with success message

    2
    Rajaul Islam Ratul•1,250
    @ratul0407Posted 11 months ago

    Namaste Namrata congratulations on completing this challenge🎉🎉

    Your solution looks pretty good. But you can improve your code a little bit

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

    This will center your newsletter perfectly and then you can remove

    .sign-up-form, thank-you-form {
/*   width: 100%;  by default it will get a width of 100% so you don't need it  */
 /*   margin: 6rem auto 0;   We've centered the body so you don't need to use margins anymore🙂*/
}

    And I'd also recommend to use the form tag instead of a .form div this will give you some additional keyboard functionality and will help with the pages accessibility.

    I hope you found this helpful👍

    Keep up the good work and have a very nice day🙂😄

    Marked as helpful
    0
  • Rajaul Islam Ratul•1,250
    @ratul0407Posted 11 months ago

    @JGabriel19 Your solution is really great🎉🎉

    There is not a lot to complain about. But you should remove .attribute div that you commented out. And also I would recommend you to start using pixels more. Of course you've used pixels for font size but, padding, border-radiuses and also in a lot of other stuff you should use rems or any relative unit. Relative units are always a better option over absolute units for various reasons.

    I hope you found this helpful👍

    Keep up the good work and have a very nice day😄

    1
  • Rajaul Islam Ratul•1,250
    @ratul0407Posted 11 months ago

    @Ovicky congrats on completing this challenge🎉🎉

    You've done a really great job👍. And on to your question, It doesn't stays centered because you've set width and height on you .first-grid remove it and it solves the problem a little bit. A little bit cause you also need to change your code more

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

    Remove everything from your .first-grid they are of no use to you. And also remove all the properties from .grid-all as well except the width and I'd recommend you to use max-width instead of width.

    .first-grid {
  border-radius: 1rem;
  padding: 0.5rem;
  background-color: white;

    And now your solution is a little bit better.

    I hope you found this helpful👍👍

    Have a very nice day and happy coding my friend😄

    0