Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Chriscent Pingol• 230

    @KishonShrill

    Posted

    Clean your CSS class pointers

    In your css code, I believe .container .foot h4 span .oth{} is just the same as .oth{} and .container .foot h4{} is same as .foot h4{}

    Doing so will make it less more confusing and more readable code when working in your css. Let me give you another quick example:

    Let use this HTML Code as an example...

    <div class="container">
    <div class="img-c">
        <div class="image">
            <img class="fir" src="./images/image-equilibrium.jpg" alt="">
        </div>
        <div class="overlay">
            <img class="sec" src="./images/icon-view.svg" alt="">
        </div>
    </div>
</div>
    • Instead of pointing like this .container .img-c .overlay .sec{} you can just shorten it like this .sec
    • and instead of .container .img-c:hover .overlay { opacity: 1; } you can also shorten it into .img-c:hover .overlay{ opacity: 1; }.

    Use HTML semantic code

    There are many semantic code you can use, some of these code include:

    • <article>
    • <aside>
    • <footer>
    • <header>
    • <main>
    • <nav>
    • <section>

    In your case, instead of using another div as a container like what you did here 👇

    <main>
    <div class="container">
        <p></p>
    </div>
</main>

    You can clean it more by making the <main> as your container instead...

    <main>
    <p></p>
</main>

    And whatever was your styles of [container], just point and change it to the <main> element instead which would be something like this...

    main {
    width: 324px;
    padding: 20px;
    background-color: var(--card-back);
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

    Overall Feedback and Summary

    All in all, your frontend is okay and great 🥳🎈🎉🎊 and that is all that matters, but soon you will be working with other people too soo having readable code really is a 1++. So all you need to work on is:

    • Clean CSS class pointers
    • Use HTML semantic code if possible

    This is a great start so far 🎉 and I hope you enjoy your road of frontend programming 😄

    0
  • Guilherme Almeida• 10

    @guihenriquedev

    Submitted

    The thing that i found difficult is to make a responsive website. I don't make responsive website so good yet, but I think this project helps me a lot, to make a good responsive site. I am unsure of my css code, however I'm practicing a lot. How do you guys make your site responsive ?

    Qrcode-Frontend-Mentor

    1

    Chriscent Pingol• 230

    @KishonShrill

    Posted

    Hello there 👋😉 I can't help notice about the fact that your component is overflowing vertically 🥲🥹, let me help you in that aspect:

    1.) To fix your overflow, don't forget to add your width and height

    body {
   width: 100%;
   height: 100vh; // or 100%

   // Other components
}
main {
   width: 100%;
   height: 100vh; // or 100%

   // Other components
}

    2.) I have noticed that your usage of flexbox has also contributed on the overflow, although I am not particularly an expert of flexbox but using flex-direction: column instead of flex-flow: column wrap should be enough. 😲 "Wrap" happens when the element inside is much bigger than the container, since your <p> is bigger that the container without a "width" then it would result into an overflow. Instead, use 100% on the <p> element so it will only have a width that's as big as the container can contain:

    main {
   width: 100%;
   height: 100vh; // or 100%
   display: flex;
   flex-direction: column;

   // Other components
}
main p {
   width: 100%;

  // Other components
}

    3.) Last, since the texts in the design needs to be centered, use text-align: center; 😁

    main h1 {
  color:  hsl(218, 44%, 22%);
  font-weight: 700;
  width: 100%;

   text-align: center;
}
main p {
   color: hsl(220, 15%, 55%);
   width: 100%;
   font-size: 30px;
   font-weight: 400;

   text-align: center;
}

    There are still a lot I can point out but I know for now this is already great progress you have here 😁 well done 🎉🎊 Trust the process🎯.

    To know more about responsive layouts, check Responsive Web Design Media Queries

    Marked as helpful

    1
  • Chriscent Pingol• 230

    @KishonShrill

    Posted

    Great Job 🎉 The website works and is responsive. I have noticed that you are also good with the naming convention of your classes such as .main-wrapper, .wrapper, and .content-wrapper.

    There is only ONE 👆 thing I can point out and that is:

    • Font - 📝 Grabrielle Essence Eau De Parfum 📝

    Be sure to include the fonts in following the designs to a "T", this is to practice ourselves to always follow our designer's or client's design. 😉

    Marked as helpful

    0