Skip to content
OverviewSolutions
4
Comments
5
Begli Amanov
@begli-amanov

All comments

  • Begli Amanov•80
    @begli-amanovPosted about 1 month ago

    Hi @MdZaferEqbal, nice job here. With a bit tweak you could make your solution closer to the original design of the recipe. Here are some:

    • Increase padding of recipe-page-content-container from 10px to about 30-40px.
    • font-style: normal; is usually the default one if you haven't set it differently, so you might lose this property
    • I would also suggest to increase the width of the container a bit. to around 50%
    • Adding a <main> tag after line 36 in your HTML file will improve accessibility of your page. If you would like to know more about the <main> tag.
    • Lastly I suggest you to download the necessary fonts and host them on your own. This will improve your page's performance in a long way.

    However I do really like how your recipe looks like and wishing you a lot of fun in the future. Good job!

    Marked as helpful
    0
  • Begli Amanov•80
    @begli-amanovPosted about 1 month ago

    Hi @V1cT0rY23, interesting technique you've used here. Especially hover effects. I would suggest however:

    • against using h1 in the card itself. Because it is mostly used for the Page description.

    • not to use buttons within <a> elements, which could be also avoided. If you read this article, it could help you to get a bit more insights.

    • to center your card also vertically. How to do so, is written by Josh Cameau in a very nice way.

    Overall you've done a good job! Keep up! Regards Begli

    0
  • Begli Amanov•80
    @begli-amanovSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Everything is outlined in the Updated readme file.

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

    It was really annoying to tweak responsive text without media queries. Need to find a way to make it more effective. The approach was like from 90s. To much manual setup. Or maybe we are just too lazy?!

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

    I am mostly interested in if my html and css semantics are robust enough and is my approach with cal() function good enough for responsive text on the page.

    Fairly responsive Blog Preview Card

    2
    Begli Amanov•80
    @begli-amanovPosted about 1 month ago

    Hi @marcus-hill, much appreciated your feedback! Helped me to look at my work under a bit different angle. Here is what I've changed so far:

    • I've added another media queries to make the card fit even the smallest display size (320px).
    • Hover effects was my intention to see how it works and I am pretty happy with the results. However your point is fully legitim.

    Overall I am grateful for your attention and time and thanks for those kind words!

    Be well Begli

    0
  • Begli Amanov•80
    @begli-amanovPosted about 1 month ago

    Hi @ShinRaw11, a really nice work here. Especially I found the Idea to work with flexbox and use gap property with it very interesting. I have even implemented it in my own solution from this challenge. There are however few suggestions I could give:

    • Most important thing I guess is the multiple use of <h1> heading. It usually used as a page hero section (content description). It should be used just once per page. You could read here a bit about it.

    • It might be not the best stuff to use fixed heights on the elements and let them expand naturally. You could stumble on overflow issue. It this case it is not so important, but it might once. I would suggest to avoid them unless you really need.

    Nevertheless it is really good job. I've learned few stuff from your solution so my big appreciation for that! Keep up the good work and have fun on your journey!

    Marked as helpful
    0
  • Begli Amanov•80
    @begli-amanovPosted about 2 months ago

    Hi @hstachowiak, your solution looks already good and few tweaks we can make to look even better:

    • First of all I would suggest to check the style guide again for property values being same as given in it.
    • There are a lot of divs. You might try to rename one main of them (for example the one on the line 16 and give it a bit more semantic class name, like wrapper or content. I got self kinda same advice on my solution of it. Plus with that, you'll help to make it more accessible.
    • If you'll use a modern css reset, there will be no white border around your entire page. Even though it looks not bad.
    • I would also pay attention on fonts on how and where do you use them.

    I hope sincerely that this will help you and motivate to move forward. Please come back to me with any questions. I will be more than happy to assist you.

    Cheers Begli

    0