Skip to content
OverviewSolutions
16
Comments
8
asdiAdi
@asdiAdi

All comments

  • asdiAdi•180
    @asdiAdi

    Nice!

  • Hart Selwyn•120
    @hartselwyn
    What are you most proud of, and what would you do differently next time?

    Mostly proud of the layout of each box which was possible thanks to CSS grid!

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

    Positioning the boxes posed as a difficult challenge

    CSS Grid, and grid template-columns

    #react
    1
    asdiAdi•180
    @asdiAdi

    Nice!

  • IRON Michael•180
    @Iron-Michael
    What are you most proud of, and what would you do differently next time?

    i think i'm better to write it by using div and media query

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

    the hard part it's try to tranfomation moblie to desktop mode that make everything ruined

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

    how can i make code simple as possible i think want clean more

    react responsive media query

    #react
    1
    asdiAdi•180
    @asdiAdi

    Nicely done!

    Marked as helpful
  • P
    Coinnich•470
    @fringe4life
    What are you most proud of, and what would you do differently next time?

    I am most proud of reasonably effectively getting information out of Figma in a more organised way. Checking the spacing and in this case decided to experiment with some utility classes for the spacing as the same basic spacing was used throughout.

    Next time instead of simply magic numbering the spacing for the lists and the ::marker(s) I would prefer to have used the ::before pseudo element but for whatever reason I have always had a tough time using them.

    Also as I in miniature made my own small utility class system it would almost be better to just go all in on utility classes vs mixing different styles of CSS together. Though, ultimately I guess i'll just learn tailwindcss v4...

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

    I am not sure that ultimately this was super challenging. Though when I get to the next page and see the snapshot, I suppose i'll find out :)

    Styling the table of calories etc I made overly complex using Flexbox I think 4 times, instead of just named grid areas.

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

    If you are an experienced Git user I would really appreciate feedback on my use of git issues and/or commits. As I really tried to prioritise clean commits, but some really weren't.

    I broke my CSS file up into multiple different files and would appreciate feedback as to how easy to grasp this is and whether I could improve this structure as I think it could be improved.

    Responsive recipe page using CSS Grid and Flexbox

    #vite#node
    1
    asdiAdi•180
    @asdiAdi

    You can center the recipe block by adding flex css properties on its parent.

  • Ben•130
    @benhyh
    What specific areas of your project would you like help with?

    The link only works when the user cursor is directly on the anchor tags of the link. In other words, if users hover somewhere else in the social links container, the link will not work.

    Social Links Profile

    1
    asdiAdi•180
    @asdiAdi

    Really well done!

  • asdiAdi•180
    @asdiAdi

    This is really well done, I guess the only thing you missed is to change the color of the description into grey.

  • Mohit Sahoo•20
    @A-Realist
    What are you most proud of, and what would you do differently next time?

    After a long break, I'm finally starting to learn Web Dev and I'm quite happy with the result. I'll try to make other projects mobile-responsive.

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

    There are mainly 2 problems that I was unable to solve:

    1. The QR code image has some space from the top which I'm unable to get rid of. I've a padding of 25px which gave a nice margin to the entire card but the top has a little more space than required.

    2. The text inside tag: is not aligned like it is in the original design. I could have used 3 tags but maybe it wasn't the best practice.

    QR Code Component using HTML, CSS and Flexbox

    1
    asdiAdi•180
    @asdiAdi

    I think it's better to put some alt text on the image. Also make the card fixed width so it won't shrink on smaller screen sizes.

  • asdiAdi•180
    @asdiAdi

    Hi Valarie Oyieke, it seems that the p margins inside the .price class are the root of the problem.

    • First, add a .price > p selector and add margin: 0 property inside it
    • Then add a margin-top: 32px property inside the .price class
    • Finally, you can change the align-items property into center inside the .price class

    I hope this helps you and Good luck with future challenges!

    Marked as helpful