Skip to content
OverviewSolutions
11
Comments
6
Kenneth Brandon
@kbrandon19

All comments

  • Kenneth Brandon•260
    @kbrandon19

    @Dunissimo, other than a few small issues like the toggle ball and background color, and the font size for the bottom cards, everything looks good. Is this your first time using flex? There is one small detail that stood out to me, the twitter card seems to be a little shorter than the rest, not sure why though.

    Marked as helpful
  • Kenneth Brandon•260
    @kbrandon19

    Hey @Sneflenie, your code is pretty clean which is a great thing but the only feedback I would offer is to be careful with naming classes. You have html .cards then html .card within it and if not careful can cause a problem, especially if there's 100s of lines of code. Try using names that describe more of what it could be like card-container, card-wrapper, etc. But try not to ponder on class names though haha, I have that problem sometimes, keep it simple. 👍🏾

    Marked as helpful
  • Kenneth Brandon•260
    @kbrandon19

    Hey @miguelbittencourt, great job! My only feedback would be for the background pattern for the body.

    //will ensure the images fits within the size of the element - in this case would be body
background-size: contain;

//we need to have the pattern at the top of the body so this will position the image at the top of the body element
background-position: top;

//the pattern does not repeat so you can include it individually like so or simply have 'no-repeat' beside the background url style
background-repeat: no-repeat;

    I hope this helps a bit! Keep up the great work!

    Marked as helpful
  • Kenneth Brandon•260
    @kbrandon19

    Great job, Ivana! Your code is clean and straight to the point.

  • Kenneth Brandon•260
    @kbrandon19

    Hi @Hammad-Ahmad47 it's best practice to develop with mobile first in mind. One way I do this is to size my browser to 375px (iPhone 6/7/8) via Inspect that way I can see what it will look like on mobile when coding. To make things responsive when resizing from mobile to desktop I use flexbox but some use CSS grid.

    Here are some resources, if you need any help feel free to reach out!

    Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/

    Mobile First Design https://css-tricks.com/how-to-develop-and-test-a-mobile-first-design-in-2021/ https://kinsta.com/blog/responsive-web-design/

    Marked as helpful
  • Kenneth Brandon•260
    @kbrandon19

    @mamba-dev-KE Great work! I haven't used CSS grid a lot but I see just how awesome it is. Being able to center vertically and horizontally like that is pretty cool, you definitely taught me something. The only thing I would suggest is just to make sure your attribution is in plain view to eliminate minor 10px scrolling. Removing margin-top from .attribution and margin-bottom from .attribution__designer will do the trick.

    Marked as helpful