Skip to content
OverviewSolutions
4
Comments
4
Tiger Trần
@tttam0113

All comments

  • Isaias•80
    @Isa696Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I practice tables tags, manage better the @font-face this time, responsive and media querys practice worth it.

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

    I use fonts provided, but it didn´t match the desing. 🤷‍♂️ i tried aplying font-styles: oblique / italic.

    Responsive recipe card page

    2
    Tiger Trần•80
    @tttam0113Posted about 1 month ago

    • I noticed that you're focusing a lot on colors in your website, but you should also pay attention to spacing to better match the design.

    • I see that you've defined the font "Young Serif," but you're loading the font "Outfit" instead. This causes the title and subtitle to not match the design.

    • You could use some semantic HTML5 markup to make your website more meaningful and readable. For example, you should group the "Ingredients" (subtitle and list) into a <section> tag.

    • In my opinion, you don’t need to define a class for table rows or table data to avoid overcomplicating things. Instead, you can style the table, <tr>, and <td> selectors directly.

    Marked as helpful
    1
  • Tiger Trần•80
    @tttam0113Posted about 1 month ago
    • I understand that you only implemented the CSS based on the image, but you should try to use parameters that match the design as closely as possible.
    • You have only designed based on the desktop version, so you should update the page to make it responsive for mobile mode as well.
    • When hovering over the "li" tags, you should also change the text color.
    0
  • Tiger Trần•80
    @tttam0113Posted about 1 month ago

    Great work. I like the way you use HTML semantic tags.

    0
  • Tiger Trần•80
    @tttam0113Posted about 1 month ago

    It looks great but in my opinion:

    • page should have one main landmark by using main tag for the container
    • update shadow to same design parameter. This is mine: box-shadow: 0 25px 25px rgba(0, 0, 0, 0.05);
    0