Skip to content
OverviewSolutions
19
Comments
7
Oto
@Tagvi

All comments

  • Oto•400
    @TagviPosted almost 3 years ago

    Hello Tymur, The first issue is with accessibility, the font size is too small for most users. Second one is that you could use the <main> tag for semantic purposes. Third one is with selectors, you don't have to use classes to select something like:

    <div class="social-item">
  <p class="number">1.4K</p>
  <span class="text">Photos</span>
</div>

    you can just use

    <div class="social-item">
  <p>1.4K</p>
  <span>Photos</span>
</div>

    p {
  /* whatever */
}
span {
  /*  whatever */
}

    So it's not really useful. You could also turn the span into a p and use :first-child and :not(:first-child) pseudo-selectors. Fourth issue is with giving each div width: calc(100% / 3). While the easiest way is to just use 100% width on the parent container and justify-conent: space-between which will put the remaining space in between elements. You can also use the gap property if you want to keep a gap between elements when there is no free space. I've been into coding for a while now, and I can easily spot some common mistakes, don't let this discourage you, keep learning, and you will not make as many mistakes, I will also review your solutions in the future for more help. ~ Oto ❤️

    Marked as helpful
    0
  • Oto•400
    @TagviPosted about 3 years ago

    Hello, the project is nicely done, but needs some improvements to the cart functionality, when adding the items twice, they get re-added. Also, when adding 0 items the cart gets cleared. In addition to those, you might want to consider animating the little orange border on the bottom of the navbar simply by setting the width to 0 and changing it to 100% on hover :).

    0
  • Oto•400
    @TagviPosted about 3 years ago

    You need to add some padding to the thumbnails, also you can see that in the provided design, the navbar does not completely stretch to the ends of the website, text is kinda big IMO, also when I add items to the cart twice they don't add up, they just get re-added :)

    Marked as helpful
    1
  • Vanza Setia•27,775
    @vanzasetiaSubmitted over 3 years ago

    Hello Everyone! 👋

    This challenge was so hard, especially when trying to make it responsive. I was doing this challenge on my Android phone. Hopefully, it looks good on your deskop. 😅

    Of course, any feedback is appreciated!

    That's it! Happy coding everyone!

    Clipboard Landing Page HTML5 CSS3 Sass

    5
    Oto•400
    @TagviPosted over 3 years ago

    I really like your determination, fact that you code on a phone is just ridiculous. I'd recommend looking into the GSAP animation library and ScrollTrigger plugin, those will allow you to add animations on scroll and make your website a little more professional and fun. Good luck!

    Oto

    Marked as helpful
    1
  • Gavin•60
    @gmitchellfSubmitted over 3 years ago

    Does anyone know how to get rid of those annoying little white lines beneath my image grid? Just above the footer, and between the 2nd and 3rd line of the main grid.

    FrontendMentor-Sunnyside

    3
    Oto•400
    @TagviPosted over 3 years ago

    First of all, the most apparent problem with your page is paragraph colours. Another thing I'll point out is is that on large screens like 1920x1080 text and layout isn't very good. IMO attribution isn't necessary, on top of that you also forgot to input your name :D. another thing is that there is not pointer cursor on some links. the navbar has a few problems like too much padding, I also wouldn't recommend using the hover state as a trigger for the mobile menu, look into my solution and see the alternative. Using content-box isn't a good idea either I'd recommend using

    box-sizing:  border-box

    as it makes much more sense. I also see that you are using percentages on grid columns and rows, the standard is to use fr units which take up free space in fractions, for example, if I have 3 columns like 120px 1fr 1fr and have 1920 px wide screen, assuming that the website is fullscreen it will first use 120 pixels and then divide free space (1800px) into 2 fractions, 900 pixels respectively. this is way better because on 3 columns you are forced to use 33% 3 times and you will be left out with 1% extra space. Another thing is that you use ' !important ' which is not a good practice, I would recommend you to learn specificity and tackle problems with your knowledge about it. Also, try to keep classes easy to understand, for example, I'm looking at the styles in dev tools and I have no idea what .parabtn is. One more thing is that you are using the nth-child selector on the grid items which is not good because one extra element will turn things around like a rollercoaster, It's better if you use classes there and also some things can be omitted for example you set the egg image to order of 2 then the first item will auto-shift itself to the first column so it's not necessary. The white space between the rows can be fixed by adding height: 100% to the images 😉. Moral of the text is that you need to learn CSS :D

    0
  • Oto•400
    @TagviPosted over 3 years ago

    It's better if you add smooth transitions for hover states.

    0
  • Oto•400
    @TagviPosted over 3 years ago

    Not responsive :)

    0