Skip to content
OverviewSolutions
11
Comments
8
Paul Michael E.
@mellingh

All comments

  • Boxer•130
    @morshed-murad
    What are you most proud of, and what would you do differently next time?

    it was good

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

    best challenge

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

    great

    responsive using css

    1
    Paul Michael E.•150
    @mellingh

    Looking good! Just a few things that need to be changed:

    1. Border-radius
    2. List-items order
    3. Text inside the button
    4. check colors again

    Otherwise, good job!

  • Iamtrieves•210
    @Iamtrieves
    What are you most proud of, and what would you do differently next time?

    This is my first JavaScript code written and although it took me some time to figure it out and alot of help phew i did it

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

    JS!!!!!!!!

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

    JS!!!!!!!!

    Article Preview Card

    1
    Paul Michael E.•150
    @mellingh

    The profile pic, name, date, and share button are a bit too low, otherwise it looks good!

    Great work!

  • Paul Michael E.•150
    @mellingh

    Nice!

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

    In this challenge I used a combination of custom properties, a media query and responsive sizing using the clamp() function. With these tools and the Figma file, I was able to achieve the responsive layout, and make smooth sizing transitions for elements like the h1 and the icons, and padding differences inside and between the cards. Next time I might use grid-template-areas instead of using line based placement when working with grid.

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

    Getting the sizing to match the design/Figma files as close as possible took some trial and error. First I matched as close as possible to the mobile using static sizing in rem units. When that looked good, I noted what differences I saw in the desktop version. Where I thought it would be a good opportunity to use a function to fluidly transition to different font sizes and/or padding, I tinkered with clamp() and the devtools responsive view until my sizes were matching in both mobile and desktop. By 'sizes', I mean the h1, icons, and spacing (padding, margin, gap).

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

    There were several decisions I made that I had doubts about being the best practice, so I will explain my thought process, and if you see how I can improve please let me know:

    I used flexbox in the body, and grid only in the wrapper which contains the 4 cards. I needed just a one-directional vertical alignment to stack my and. Inside my element, I have an which contains my and. I didn't see any need to include those in and complicate the grid.

    I do wonder if this is good use of the element. I thought since there is no navigation here, wouldn't be correct.

    For the cards I used and for each card. Is this the right situation for use a list for cards, and if so, when is it correct to add the attribute role="list"?

    Implementation of the grid itself. It was easy to get the layout here, but it could have been done also using `grid-template-areas'. I like using the shorthand:

    .card-1 {
    grid-area: 2 / 1 / 4 / 2;
  }

    But if this is not recommended then I want to correct my ways.

    Thank you!

    Responsive Grid Four Card Feature Section

    1
    Paul Michael E.•150
    @mellingh

    Looking good! Great work!

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

    GROWTH.

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

    I encountered challenge when forming the table and creating the list.

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

    Javascript

    HTML & CSS

    1
    Paul Michael E.•150
    @mellingh

    Nice!!

  • Mahendran-C•130
    @Mahendran-C
    What are you most proud of, and what would you do differently next time?

    Completed the challenge.

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

    given links to full width

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

    what are the major css functions?

    responsive social-links-profile-main

    1
    Paul Michael E.•150
    @mellingh

    Nice job!!! Looking good!

  • Gabriel Ravalia Lopes•20
    @GabrielRavaliaLopes
    What are you most proud of, and what would you do differently next time?

    Talvez o responsivo desse site(deixaria melhor rs)

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

    No responsivo, mas não consegui superar 100%

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

    Encaixar no responsivo do mobile… ficou meio estranho. Aceito dicas de ajuste.

    Responsive Card Previewe Blog

    1
    Paul Michael E.•150
    @mellingh

    Looking good, use:

    • { box-sizing: border-box; }

    to get rid of the weird margin on the right of the image.

    Also add some more margin on your container div for e.g., (margin: 200px auto;) and some more padding to your container div at the bottom or increase the general height.

  • Paul Michael E.•150
    @mellingh

    Looks great, maybe just reduce the font size a bit.