Skip to content
OverviewSolutions
7
Comments
7
RKennedyy
@RKennedyy

All comments

  • akorir08y•110
    @akorir08ySubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    How the layout turned out. Individually working with each grid to achieve the desired result. Knowing how the grid layout affects the page individually

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

    Autofit in the display grid tutorial and working with it.

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

    autofit in the grid layout and how it works without alot of customization

    Testimonials Page was a learning experience

    2
    RKennedyy•100
    @RKennedyyPosted 4 months ago

    Hey, this is great work!

    The only thing I would add is to make the body flex and using justify-content and align-items to make the grid centered.

    1
  • Ridwan Hasan•400
    @Ridwan10000Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Used grid successfully

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

    Figuring out the desktop design using grid. Got help from the community. Some one had the same issue. I hadn't need to ask it. Just looked up the answer. And solved!!

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

    Predicting the behavior prior to coding grid seems very difficult to me. Any suggestion regarding the practice of predicting the behavior of grid layout is welcomed.

    FOUR CARDS FEATURE SECTION MASTER

    1
    RKennedyy•100
    @RKennedyyPosted 4 months ago

    Nice solution!

    Here is a great website that discusses Grid and provides a lot of good tips and advice on how to use grid : https://css-tricks.com/snippets/css/complete-guide-grid/

    0
  • jonathanPons•100
    @jonathanPonsSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to work on my media queries, and I used ChatGPT less than in previous projects. This project required 4 hours of work.

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

    Change the image based on screen size and properly size the images within the boxes. Work on the :active and :hover states in the correct dimensions. I used internet research for assistance.

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

    I want to better understand how to properly integrate an image according to different formats; it’s not yet clear to me, and I often find the solution by chance. I'm not yet efficient with my work time and would like to know if I could be faster and how to achieve that, as well as work on the efficiency of properties. Feedback from the community on different image formats would be greatly appreciated. Thank you, everyone.

    CSS/ HTML / Media Queries responsive

    1
    RKennedyy•100
    @RKennedyyPosted 4 months ago

    Hey, this is a great attempt!

    You can use the <picture> tag in html and you can set different images based on the size like so :

    <picture> <source srcset="photo1.jpg" media="(min-width: 900px) /> <source srcset="photo2.jpg" media="(max-width: 600px) /> <img src="photo.jpg" alt="photo" /> </picture>

    If the media is at least 900 px then photo1 will be displayed, if the media is at most 600px then photo2 is displayed.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

    Marked as helpful
    0
  • RKennedyy•100
    @RKennedyyPosted 4 months ago

    This is a great attempt, one thing I noticed though it looks as though the wrong font style was used for the title.

    In the style guide the font is listed as Young Serif whereas you have used "Outfit".

    Apart from that its a really good attempt!

    0
  • RKennedyy•100
    @RKennedyyPosted 4 months ago

    Hey @nikhilka2305.

    This solution looks great!

    Just one little thing I noticed is the card is not in the center, one way you could achieve this is by using flexbox like this :

    .flex-container{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
    0
  • RKennedyy•100
    @RKennedyyPosted 5 months ago

    Hey, super nice try!

    0
  • RKennedyy•100
    @RKennedyyPosted 5 months ago

    Looks good!

    One thing I would mention is to add some padding to your .box class :

    .box {
  background-color: white;
  border: 2px ;
  border-radius: 20px;
  margin: auto;
  width: 320px;
  height: 473px;
  padding : 10px;
}

    And maybe just the background color of the body :

    body{ background-color: hsl(212, 45%, 89%); }

    But with that said its a great attempt!

    0