Skip to content
OverviewSolutions
4
Comments
4
Mark Smith
@Smith11b

All comments

  • Mark Smith•120
    @Smith11bPosted 18 days ago

    Great work!

    With semantic html. <header> tag is outside of the <main> tag as those are two different sections. They would both just need the same padding in order to get the white background on the card. The rest of the semantic html you used was great.

    It also looks like you missed putting padding or margin to the left of your list items (<li>) tags.

    You can color the bullets and numbers by using the ::marker selector as well.

    Finally it looks like in your table, you forgot to add padding-left to the td:first-child: of the <tr> tag. That would push it to the right a bit more so it lines up with the design.

    Overall great work though!

    Marked as helpful
    0
  • salahelec2•110
    @salahelec2Submitted 18 days ago
    What are you most proud of, and what would you do differently next time?

    What I loved about this challenge was the absence of a Figma design file for free users, so I had to interpret the dimensions from screenshots to get the work done.

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

    in the small screen size the text size was a little small, and not pleasent to eye so i decided to add more using 'rem' units

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

    i'm open to any advice about my solution

    responsive social links profile

    1
    Mark Smith•120
    @Smith11bPosted 18 days ago

    Looks like you did amazing. If I had to say something about the design. It appears there should be a little more spacing between the location accent text and the text header part of the text. but this is a nitpick. Especially without the figma file. Love it.

    Marked as helpful
    1
  • salahelec2•110
    @salahelec2Submitted 23 days ago
    What are you most proud of, and what would you do differently next time?

    Next time, I will try using the grid system to approach things differently and practice this topic more.

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

    I used the clamp() function to transition from desktop to mobile view, but I didn’t like the result, so I decided to go with media queries instead.

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

    I'm seeking advice from anyone who thinks I could approach the challenge differently and more efficiently.

    responsive preview card using flexbox

    1
    Mark Smith•120
    @Smith11bPosted 23 days ago

    Nice man, you nailed it. I don't have much to add here. I dig the idea of using a span for the "learning" badge. I believe I just styled a <p> tag instead, but your way makes perfect sense. Great work.

    Marked as helpful
    1
  • Mark Smith•120
    @Smith11bPosted 23 days ago

    Layout looks great and looks like your semantic html is good as well.

    I would say the font sizing and coloring are off, (Both the header and the text are shades of blue, not black). The border radius and padding are also off a smidge and it looks like your forgot the border shadow on the card itself.

    I understand what you're doing though and it looks clean. That's a great start.

    Marked as helpful
    0