Skip to content
OverviewSolutions
14
Comments
8
P
Stefan Holmgren
@stefan-holmgren

All comments

  • Anton Vasilache•580
    @Antonvasilache
    What are you most proud of, and what would you do differently next time?
    • Solving the most complex challenge yet
    • Working with Figma files
    • Would focus less on desktop design next time
    What challenges did you encounter, and how did you overcome them?
    • Working with Figma, following the design closely to the letter, to achieve pixel perfect values - eventually I gave up on the idea, and focused on the relative positioning between elements, and fixed whatever was left towards the end.
    • Tried to create the layout entirely using grid, which did not work well for responsiveness - I removed some of the grids and used different methods which were easier to handle in the context.
    What specific areas of your project would you like help with?
    • Creating a responsive page which relies less on media queries.

    Responsive meet landing page using CSS flex and grid

    1
    P
    Stefan Holmgren•220
    @stefan-holmgren

    Really nice solution, works on every screen.

    You made your own section numbering svg:s - I struggled to figure out how to do it with only css (was a big pain, so in retrospect should have gone your way :) )

    Nice HTML structure, and good use of css variables.

  • Nikki•160
    @blahaj-girl
    What are you most proud of, and what would you do differently next time?

    Properly check out all the font colors used in the design.

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

    To many font colors xD

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

    Nothing in particular.

    Testimonials grid section | HTML & CSS

    2
    P
    Stefan Holmgren•220
    @stefan-holmgren

    Looks good. Missing the background in the first section, and shadows underneath the sections.

    Interesting cell-assignments in the grid.

    I ended up using

      main {
    grid-template-areas:
      "A A B E"
      "C D D E";
    ...
  }

  section:nth-child(1) {
    grid-area: A;
  }

  ...
    Marked as helpful
  • Kieren Woods•60
    @KierenLWoods
    What challenges did you encounter, and how did you overcome them?

    I struggled when trying to set the columns for the desktop version of the design.

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

    I would like feedback on how i have tackled this problem as i feel, there is a much easier way to do this and have kind of come up with a hacky solution.

    4 Card feature

    1
    P
    Stefan Holmgren•220
    @stefan-holmgren

    There's some differences in the design, but you know that already.

    The grid was a problem to get right for me - but I thought I'd share my code, since it's a bit different from yours (although I'm not saying mine is correct in any way, but still, just to give another perspective):

      ul {
    display: grid
    grid-template-columns: content content content;
    grid-template-rows: content content;
    gap: 1.875rem;
  }

  li:first-child {
    grid-area: 1 / 1 / 3 / 1;
    margin: auto;
  }

  li:last-child {
    margin: auto;
    grid-area: 1 / 3 / 3 / 3;
  }

    Mine is just saying that the first and last child should span some rows (why it ended up with 3 instead of 2 I can't explain, but 2 wasn't enough for some reason).

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

    I'll have to redo this challenge, as i did it before the learning paths feature came on board

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

    Scalability

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

    Feedbacks, please!

    Responsive product card component using grid and flexbox

    2
    P
    Stefan Holmgren•220
    @stefan-holmgren

    Looking good!

    Only visual issue I saw was a white border to the left and right of the page (I have a wide monitor), and that's probably because .container has the background-color, not the body.

    Other than that, I notice you use px alot. I've had people/sites/youtube tell me to steer clear of that and go with rem, and I try to do that

    https://www.seeratawan.me/blog/why-you-should-move-from-px-to-rem-in-css/

  • Carmen•490
    @Carmenyo
    What are you most proud of, and what would you do differently next time?

    For the next time, I want to use a more standard nomenclature and utilize terms like 'container,' 'wrapper,' etc., instead of employing more specific terms.

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

    It has been quite difficult to position the image so that it appears aligned with the original design on the comparison screen. I'm not sure what could be causing that issue. At the last minute, I had to change 'height: 100vh' to '100%' to make it fit on the screen.

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

    It has been quite difficult to position the image so that it appears aligned with the original design on the comparison screen. I'm not sure what could be causing that issue. At the last minute, I had to change 'height: 100vh' to '100%' to make it fit on the screen.

    Recipe Page

    1
    P
    Stefan Holmgren•220
    @stefan-holmgren

    Really nice :)

    I noticed a slight imperfection though in mobile view - there's a margin to the right side of the browser there, but other than that: stellar work!

    Marked as helpful
  • Anton Vasilache•580
    @Antonvasilache
    What are you most proud of, and what would you do differently next time?
    • Content looks proportionally similar to the design file
    • Less time to figure out than previous challenges
    What challenges did you encounter, and how did you overcome them?
    • Difficulties in centering the content, but managed to do it using flex container and margin: 0 auto 36px auto; on the content children
    • Had to adjust margins and padding repeatedly to get it right
    • How to apply the font properties the style guide
    What specific areas of your project would you like help with?
    • Not sure how the focus state should look like

    Social links profile using CSS Flexbox

    2
    P
    Stefan Holmgren•220
    @stefan-holmgren

    Looks good!

    I centered the content by using

    .profile {
  ...
  text-align: center;
}

    The only thing I had to fix to keep centered were the avatar-image which i set up like:

    .profile .avatar {
  ...
  margin: auto;
}
  • Carisa Elam•100
    @carisaelam
    What are you most proud of, and what would you do differently next time?

    Took less time than I thought it would.

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

    Getting the dimension right based just on looking at the JPEG's was a challenge.

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

    I'm still a little rusty on basics like the best way to center things in a div and to keep an image or an element from expanding beyond the bounds of its container.

    Blog card

    2
    P
    Stefan Holmgren•220
    @stefan-holmgren

    Looks great

    No semantic HTML (only divs and img) though, although I struggle with those myself.

  • Mohamed Tahiri•30
    @mohamed-tahiri
    What are you most proud of, and what would you do differently next time?

    yes

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

    For me this challenge is to easy

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

    i dont now , this project is simple for me

    Code qr html css

    1
    P
    Stefan Holmgren•220
    @stefan-holmgren

    Looking good.

    Some differences in the design/solution when it comes to the border-radiuses and the shadow.