Skip to content
OverviewSolutions
13
Comments
3
Chriscent Pingol
@KishonShrill

All comments

  • Chriscent Pingol•230
    @KishonShrillPosted 12 months ago

    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
    @guihenriquedevSubmitted about 1 year ago

    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
    @KishonShrillPosted about 1 year ago

    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
    @KishonShrillPosted about 1 year ago

    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