Skip to content
OverviewSolutions
7
Comments
7
Egnodia
@Egnodia

All comments

  • Egnodia•100
    @EgnodiaPosted 8 days ago

    Nice job! But fortunately I can't help you to improve, since I am also stuck on responsive designing

    0
  • Egnodia•100
    @EgnodiaPosted about 1 month ago

    Hey, fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…

    For future project, You could download and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. A place to get .woff2 fonts

    I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM

    Amazing work using the at using SaSS.

    I hope you found this advice helpful! Keep up the great work, You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

    0
  • Egnodia•100
    @EgnodiaPosted about 2 months ago

    Hey, fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…

    For future project, You could download and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

    Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

    I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM ,

    I hope you found this advice helpful! Keep up the great work, You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

    1
  • Vynny LonlySoft•160
    @LonlysoftSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Oh, That was sure an simple-complex card. I finally used the width media query. My experience with media queries were the screen only and (orientation: portrait). So I'm kinda proud that the media query just worked in first try.

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

    I spent a long time trying to import the font locally, but I couldn't do it. in the end I went to Google Fonts and got the link to import it through their API. I don't know what happened to the file. font-face syntax isn't wrong and the path is right.

    I also spend some time in the list-style-type because the The design image didn't let me know whether the marker type was square or circle. I chose circle just because I thought they were a little too round to be squares.

    Ordered and unordered list padding also made me scratch my head a little because of the spacing between markers and text. It's just another try and error situation, but I had spent more time since I'm not used to adding spacing to a list. Oh and by the way I couldn't figure out how to center the markers in the vertical center of the element. I made some reasearch and yet don't know how to do it.

    I used border-bottom for the little almost imperceptible line diving the topics. I could have used ::before, ::after or even an decoration div for that. It can be an alternative but I think those are more for overlapping elements and animations (which is not the case here).

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

    How to make the markers center in the y-axis of the list item text? I thought using flexbox like in the table, but I don't think that's the right way.

    Recipe Page

    2
    Egnodia•100
    @EgnodiaPosted about 2 months ago

    Great work, but you should use max-width for instead of width for your percentage sizing in your code from now on. :)

    1
  • Egnodia•100
    @EgnodiaPosted 2 months ago

    Amazing job on the design of this challenge !!!

    There is one issue you should fix and that is the accessibility part of this challenge :

    • Make sure to add the main tag to your projects.
    • Use the meta description tag in all your projects as well.
    Marked as helpful
    0
  • Egnodia•100
    @EgnodiaPosted 2 months ago

    Amazing job with this! You’re making fantastic progress. Here are some small tweaks that might take your solution to the next level…

    This does not matter that much at this stage but something to be mindful of for SEO(Search Engine Optimisation), <meta> description tag missing that helps search engine determine what the page is about, Something like this <meta name="description" content="description goes here" />

    Using rem or em units in @media queries is better than px because they are relative units that adapt to user settings, like their preferred font size. This makes your design more responsive and accessible, ensuring it looks good on different devices and respects user preferences.

    Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset

    You’re doing fantastic! I hope these tips help you as you continue your coding journey. Stay curious and keep experimenting—every challenge is an opportunity to learn. Have fun, and keep coding with confidence!

    0
  • Egnodia•100
    @EgnodiaPosted 2 months ago

    Dont forget about the background color of the website :)

    0