Skip to content
OverviewSolutions
8
Comments
3
ManasiCoder
@ManasiCoder

All comments

  • Fraol T.•70
    @Fraol-TSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Doing a complex design

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

    my first Figma design wasn't spot on and the result from development was bad. So I designed the page with different approach without leaving a detail.

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

    some times you don't get a Figma design instead you get an image file to work on a project. In my case I use Figma to design a mockup for the design (image) to get the measurements, but the final result after I code is not close to the first design. What am I missing here ?

    Responsive recipe page using HTML and CSS

    1
    ManasiCoder•120
    @ManasiCoderPosted 4 months ago

    Congratulations on finishing your project! 👏

    I know how difficult it is to create a project without proper sizing. But I believe this help us improve our size perception.

    I have some tips for you on this project that might help.

    You used <div> to separated your HTML content. Although it helps organized your code, this is considered bad practice. I recommend using semantic HTML instead. For example: you can use <main> as a container and <section> for the preparation, ingredients and introduction. This will improve your website's performance in search fields.

    Another thing, I recommend using percentages (%), instead of pixel (px) for the width and height of elements. This helps you a create responsive website. You can still use pixels for max-width and ``max-height```

    I hope help you. ✌️

    1
  • jyoshida93•120
    @jyoshida93Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I was proud that I got the 4 cards layout to work on both mobile and desktop. I think I should still spend more time getting the overall layout right before trying to style the individual components.

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

    Other than the trying to get the 4 card layout working it was challenging for me to get the styling right on the individual cards. I think just focusing on the basics like flexbox and breaking down the design into smaller parts helped.

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

    I think my layout looks ok on larger screens and smaller mobile devices but I don't think my layout looks good between those two extremes (smaller desktops or larger mobile devices). Any advice on making sure my design looks good on medium sized screens would help.

    Mobile first responsive four card feature section

    1
    ManasiCoder•120
    @ManasiCoderPosted 4 months ago

    Good job! 👏🎉

    I like how you coded this project. Very good!

    I have a tip for you: instead of using the <content> tag, it is recommended to use the <main> tag.

    Importing your font in HTML is better because it loads more quickly.

    1
  • ManasiCoder•120
    @ManasiCoderPosted 4 months ago

    Congratulations!!👏

    I recommend you learn and use HTML semantic tags like <main>, <`header>, <footer>, <section>, etc; instead of using the <div> tag for all content. Semantic tags improve the position of your site in search fields.

    Another tip: you can create the style using a mobile-first approach, which consists of starting the style for your page on smaller screens, instead of starting with the desktop view. This help you create a more responsive page more easily.

    And finally, always improve the line-height of text content. This improves readability, especially for people with visual impairments.

    Marked as helpful
    0