Skip to content
OverviewSolutions
8
Comments
8
Mr iD
@iD024

All comments

  • Mr iD•100
    @iD024

    Great 👍

  • Mr iD•100
    @iD024

    Great work!

  • Mr iD•100
    @iD024
    What are you most proud of, and what would you do differently next time?

    I am proud of how i tackle the problem of the layout of the cards I used flex this time next i would like do the same using grid

    What challenges did you encounter, and how did you overcome them?

    To the desire layout i first used grid but didn't work out well... next used flex where i applied flex on to the container and then divided the columns then adjusted each column to get the layout

    What specific areas of your project would you like help with?

    I need help with the code... its just bad i know it 💀😭😭 if someone made my 10 lines of code into 3 i won't be surprise

    also need help with the responsive with smaller screen sizes please use GitHub if you can to push newer code

    Four card feature section

    3
    Mr iD•100
    @iD024

    what the hell that screenshot messed up preview site works well well i know why 💀😭😭😭

  • Mr iD•100
    @iD024

    Wow its great code and its almost exact same great!! I feel you used a bit too many flex-boxs..

  • Mr iD•100
    @iD024

    Instead of using @media you can just use rem, em units this will greatly reduce the number of code lines

    Marked as helpful
  • Peace-Divine•60
    @Peace-Divine
    What are you most proud of, and what would you do differently next time?

    I am proud of recreating this and improving on my placements.

    What challenges did you encounter, and how did you overcome them?

    i had challenges on alignment and responsive design. i didn't add responsiveness because i wasn't getting it

    What specific areas of your project would you like help with?

    Responsiveness

    Social links Profile

    #pure-css#pwa#web-components
    1
    Mr iD•100
    @iD024
    .social-buttons button a:hover {
  color: black;
  background-color: #c4f82a; 
  box-shadow: 0 0 8px rgba(196, 248, 42, 0.4);
}```

You can add this to add responsiveness 
This just changes 3 things when you hover on the block 
Also Please remove your personal information...

*looks AI gen hmmm*
  • Hiba Anwar•110
    @hybachi
    What are you most proud of, and what would you do differently next time?

    Completing another challenge successfully and learning a new CSS feature: clamp(). I would like to learn how to use it more effectively for my projects.

    What challenges did you encounter, and how did you overcome them?

    The challenge was figuring out how to increase font size for larger screens without using media queries. That's where I found out the clamp() function and how it helps create dynamic typography without extra code and breakpoints for different screens.

    Blog Preview Card using HTML/CSS

    #bem#pure-css
    1
    Mr iD•100
    @iD024

    Hey, the use clamp function was amazing I found a new function to use thanks!

  • khushi•320
    @khushi0433
    What are you most proud of, and what would you do differently next time?

    I’m proud of how I made the card design visually appealing and responsive. Next time, I would make sure to add media queries from the start and test responsiveness across devices.

    What challenges did you encounter, and how did you overcome them?

    I had trouble centering the image and ensuring the page was responsive. I overcame this by experimenting with Flexbox and adding width: 100% to the image. Later, I added media queries for better responsiveness.

    Responsive QR Code Component using Flexbox and CSS Grid

    1
    Mr iD•100
    @iD024

    Thats great, Just make the width of bigger so it looks nice