Skip to content
OverviewSolutions
7
Comments
8
P
kassahunAmdie
@kassahunAmdie

All comments

  • kassahunAmdie•100
    @kassahunAmdiePosted about 2 months ago

    Hello @Manshiporiya, You have your code down for the mobile version. I suggest two additional changes though.

    1. Under your testimonial-container add another div element with a class of your liking to wrap all the cards and apply the flex to it. Your gap should also be applied here. That will fix the gap. I see it applied in your CSS file on the testimonial-container, but not showing on the layout.
    2. For the quotation mark on the purple card, try to apply the SVG file as a background and with no-repeating. As for position use top right and 15% for mobile and about 20% on desktop. This brings me to your desktop layout. After you choose your break point, which looks like you chose 768px, you will have to change your layout to "display grid". Also in your media query instead of max-width, use min-width. Min-width will make it change to grid display once you hit your break point. This website "https://css-tricks.com/almanac/ " and the MDN web page are my go to resources. I am sure you will get lots of ideas on grid and how to position them so that you can match the design layout. Good job giving this challenge a shot.
    0
  • Mohit kulkarni•170
    @burningbeattleSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I Tried to Achives the closest to the solution as given in starter preview of the design of this project and took me almost 2 hr to complete and finding resourses online and complete and hence we can also use hover over thing in it and can create a card clivkable with javascript functions introduced in it

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

    grid layout and column flex grid option which one will give the better as per given design preview outcome and hence achived it with column flex grid one give the better outcome and get stacked over in mobile design easily.

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

    Ensuring that the layout adapts seamlessly to various screen sizes, particularly mobile and tablet views. Using CSS Grid or Flexbox for card positioning. You might want advice on which approach works best for responsive design in this scenario. Making sure the project adheres to accessibility standards (e.g., proper semantic HTML, keyboard navigation, ARIA labels). Ensuring good color contrast and readable fonts. Getting feedback on the chosen font sizes, spacing, and padding for consistency and readability. Improving code organization, such as separating concerns by using BEM methodology, modular CSS, or other best practices.

    Four Card Feature section is build HTML & CSS Flex and Grid Column

    1
    kassahunAmdie•100
    @kassahunAmdiePosted about 2 months ago

    Beautiful work Mohit, I liked your approach. The only two things I would change are

    1. On your mobile view the h1 is mashed together. The light font weight with the bold. I think one way to solve that is to use a <span> tag on one of them and turn it into a block.
    2. The font size of the h1 content stays the same on the range of screen sizes. To solve that you can use clamp() function in your CSS to change the font size on different screen sizes. Good job.
    1
  • kassahunAmdie•100
    @kassahunAmdiePosted 3 months ago

    hi Juan, A good attempt on the challenge. You have the structure down. But few things could make a great change. I noticed you have set a dimension or restriction on the container and also on the image you have set width. I have learned these will cause a lot of issues on your end result. For your image set the display as block and set a max-width to 100%.

    I also see you have used position: absolute on your container-card. I didn't see the need for this. Over all please watch Kevin Powell's responsive web design guide. I myself learned a lot. The biggest lesson was the browser will by default make your page responsive. We usually make it unresponsive by injecting unnecessary CSS. I hope this helps.

    0
  • Gonzalo Tejada•240
    @vgt3j4d4Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I think I wouldn't do it any different.

    What challenges did you encounter, and how did you overcome them?
    • Showing a different banner on mobile devices
    • Trying to use the correct aria roles

    Responsive Recipe Page

    1
    kassahunAmdie•100
    @kassahunAmdiePosted 3 months ago

    Great work Gonzalo. Your solution is clearly laid out and easy to follow. I even picked up few points from you. New way to think about.

    1
  • matt2282•310
    @matt2282Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I enjoyed adding a shadow the background of my container. I would put my style in a style.css file instead of the html file. Using the space-between flexbox option makes the most sense for pages like this because the content at the bottom and top need to be equally spaced from the edges.

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

    I was trying to make the yellow leaning text box only as big as the text but it was very large. It turned out to be an issue with default margins of the h1 header.

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

    Is my code deviating from any best practices?

    flexbox and containers

    2
    kassahunAmdie•100
    @kassahunAmdiePosted 4 months ago

    hi @matt2282, good job in completing the challenge and you did good. The way you structured your code is easy to follow along. For the question you asked, "Is my code deviating from any best practices?", I noticed two major things you may want to consider.

    1. Try not to use "h1" more than once on your webpage.
    2. It is best practice to put your CSS in its own file. (Forget this one. I realized you have mentioned about it)

    One last thing, as far as the solution is concerned is, you missed the hover state as outlined in the design file. May be you were like me, so excited you forgot about it. But all in all very good job. Keep working on it.

    0
  • kassahunAmdie•100
    @kassahunAmdiePosted 4 months ago

    hi @rineliniguezsosa, I am impressed with your work. The only thing I saw that I think you would re-consider is, setting fixed height on the .article selector. On the image it is ok but on most other selectors I have learned setting height has unintended outcomes. Great job

    0
  • kassahunAmdie•100
    @kassahunAmdiePosted 4 months ago

    The improvement I would suggest is

    1. margin bottom on your .tag to push the date a bit down
    2. the font-size on content--head h3 needs to increase a few more pixels.
    3. I would add a line-height on your body to create a spacing to match the design. I had 1.5 that worked out for me.

    I think these would get it close to the design size.

    The structure of your code is great and easily understandable. Great work.

    Marked as helpful
    1
  • kassahunAmdie•100
    @kassahunAmdiePosted 5 months ago

    Hello d1ma-angel, Your solution is very good. The only suggestion I have is to use the Figma file to find the exact size. It may not be the perfect solution but I would try to limit the width and height of your .card in the css. The width you have there can get a bit lower. That worked for me for this project. Everything else is excellent in my opinion. I actually picked up some points to improve on my approach.

    0