Skip to content
OverviewSolutions
8
Comments
9
P
jvondungen
@jvondungen

All comments

  • Jérémy Mouzin•160
    @jeremymouzinSubmitted 15 days ago
    What specific areas of your project would you like help with?

    The box-shadow figma value of cards, I don't have it and it's a nightmare to retro-engineer.

    Four card feature section

    2
    jvondungen•140
    @jvondungenPosted 13 days ago

    Hi @jeremymouzin. Looks like it's working perfectly! Not sure what was going on before, maybe it was my browser. Great job with this challenge!

    0
  • Jérémy Mouzin•160
    @jeremymouzinSubmitted 15 days ago
    What specific areas of your project would you like help with?

    The box-shadow figma value of cards, I don't have it and it's a nightmare to retro-engineer.

    Four card feature section

    2
    jvondungen•140
    @jvondungenPosted 15 days ago

    Nice job with this! Your HTML code is clean and easy to read. Your CSS is also well done. Your solution matches the design perfectly in desktop view.

    I did notice that in mobile view your cards are a bit wide compared to the design. Think you can define the container width to be 311px to fix this.

    0
  • jvondungen•140
    @jvondungenPosted 25 days ago

    Hello. Nice job on this challenge. You did a nice job getting close to the design, particularly with colors, fonts and layout. Here are a few suggestions that can help you get closer to the design:

    -create a .card-container where you can specify the width. -increase the line spacing of your "td" elements by adding padding: td{padding-bottom:10px;}

    Marked as helpful
    1
  • V.S Karthik Tirumalasetty•130
    @VSKarthikTSubmitted 27 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud of how used flex box direction to change using media queries for mobile and desktop layouts and I have tried to use less CSS than before

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

    I have encountered a issue where margin is automatically applied to paragraph elements even after resetting them in the body element, I got confused in this part

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

    I would like help on how to effectively use media queries and do I have to set max-width and max-height since in the given design there are set heights and widths or I can set them as auto

    Responsive layout using media queries

    1
    jvondungen•140
    @jvondungenPosted 26 days ago

    Nice job on this design. Your solution mimics the design perfectly in both the mobile and desktop widths. I like how your CSS code includes comments for readability. This also creates a nice separator keeping the code clean. I also noticed that you combine classes, to minimize the code. This is something I am working on, so I appreciate seeing how you did this.

    0
  • JavohirXolmamatov•140
    @JavohirXolmamatovSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    great

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

    grreat

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

    great

    flex

    1
    jvondungen•140
    @jvondungenPosted about 1 month ago

    Hi, nice job on this challenge. Your CSS and HTML code is well-structured and easy to read. I like how you combined your elements when styling to keep your CSS simple.

    Some constructive feedback is that I didn't see where you linked to the font and your live solution doesn't show the design font suggested. You can link via google fonts by going to the google fonts website, searching the font and copying the necessary links directly from the "fonts.google.com/" site:

      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Young+Serif&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Young+Serif&display=swap" rel="stylesheet">```

Hope that's helpful.
    0
  • jvondungen•140
    @jvondungenPosted about 1 month ago

    Hello. I like your solution and notice that you had trouble centering your container vertically. I also struggled with this and have using the following style parameter centers the container vertically:

    * {box-sizing: border-box;
margin: 0;
padding:0;
}
body{height:100vh}

    Hope that's helpful!

    Marked as helpful
    0
  • jvondungen•140
    @jvondungenPosted about 1 month ago

    Nice work. Your solution is mimics the design very nicely. Here are some pros: -Your CSS code is neat and easy to follow. -Your layout is responsive and used @media queries to adjust width for small devices. -Your code is well structured, readable and easy to follow. -Your hover color looks good.

    Some critical feedback: -Your hover pointer did not change to a hand -Your hover text did not change to the dark grey

    Overall, nice job. Hope this is helpful!

    0
  • Facundo Andrés De Los Rios•200
    @FacundoDLRSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    🛸 Hello FEM Community! I'm Facundo and this is my solution for this challenge! 😊

    🛠️ Built with:

    • HTML 🧱
    • CSS 🎨
    • BEM Notation 🅱️

    This project challenges us to study the interactions with the elements that we can find on a web page and I was also able to learn how to use typographic variables of fonts.

    Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Feedback welcome 😊

    Blog preview card with HTML & CSS

    1
    jvondungen•140
    @jvondungenPosted about 1 month ago

    Hello @FacundoDLR! Nice job on this challenge! I'd like to point out how well you did with the following: -I really like how seamless your responsive design is.

    • Also like how you used CSS variables to style the elements. -Your code is well structured and easily readable.

    Some constructive feedback: -The mobile design size of 375px or less should have the "description" hidden:

    @media only screen and (max-width:380px) {.description{visibility:hidden;}}

    Hope that's helpful to you! Thanks so much for your design. I appreciate being able to see your solution to the challenge. Cheers! Jennifer

    Marked as helpful
    0
  • jvondungen•140
    @jvondungenPosted about 2 months ago

    Very nice work! Your solution is good for the following: -Displays exactly as the sample suggested -Your design works well in various screen sizes -Your code is accessible with proper landmarks -I appreciate how well structured and readable your code is.

    Great job and thank you. Your solution is very helpful to me.

    0