Skip to content
OverviewSolutions
8
Comments
7
Vladislav Zenin
@vladzen13

All comments

  • Vladislav Zenin•120
    @vladzen13Posted 2 months ago

    quote img overlaps author info in small viewports in medium viewports 5th item is alone in last row, looks a bit off Verified Graduate in white cards is almost unreadable

    besides that -

    nice responsivenes, clean html and css, awesome layout with css grid. really good job, congrats)

    0
  • Vladislav Zenin•120
    @vladzen13Posted 2 months ago

    cards stack strangely near 1000px viewports

    so many complex media queries

    clean html

    nice usage of grid to place first and last item in the middle of column.

    good job overall, congrats!

    1
  • Vladislav Zenin•120
    @vladzen13Posted 2 months ago

    620-650px viewports are broken

    clean html

    nice usage of css vars, css grid and really simple and clean media query

    good job!

    0
  • Carlosaac23•60
    @Carlosaac23Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm getting used to it so that when I see the design I have to make, I know exactly where to start and what to do to make it similar to the design.

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

    Mobile responsive design, aligned lists, and the last section trying to use the table tag.

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

    I want help with the mobile responsive design, and how to make the recipe content take up the whole screen. Is there any other way to make the nutrition section? I mean, without the table tag. I want to know if I have to use more div's. I want the li to be aligned with the title and the text to continue below the text, not the period or li number.

    Recipe page using HTML and CSS

    1
    Vladislav Zenin•120
    @vladzen13Posted 2 months ago

    nice work on desktop viewports!

    font-face and vars - cool!

    for mobile viewports:

    1. start with mobile first
    2. do not put img in the same wrapper as rest content - in mobile design you can see that clearly. Set padding: 0 + width:100% for img and non zero padding for rest content.
    3. you have to setup media query to switch between card like view and img with width: 100% of body;
    4. I think breakpoint from desktop to mobile should be on point when h1 is about to wrap on the second line.

    Speaking of divs - i have simplest html possible, you can explore my most recent solution. Looks like this:

    <body> <main> <img> <div class="content">.....</div> </main> </body>

    You can make nutrition section with css grid or flexbox, but table seems right for me. It is semantically a real table.

    0
  • Vladislav Zenin•120
    @vladzen13Posted 2 months ago

    Looks cool, centring card with flexbox makes it based on content width, so card gets smaller than on design. Responsible. Clean html.

    Like @font-face usage

    Spacing of buttons with gap is cool Spacing of img and captions with margins seemes less reusable in different context - why not use gap also ?

    0
  • Vladislav Zenin•120
    @vladzen13Posted 2 months ago

    no userpic breaks on very large and very small viewports, good in the middle font-weights and spacing differ from figma

    something strange with border radius of blog img

    except that - pretty good job!

    Marked as helpful
    0
  • Vladislav Zenin•120
    @vladzen13Posted 2 months ago

    Starting to look bad at viewport width 350px, pretty responsive at 350px+ Card seems bigger that on Figma, solution has fixed width in pixels. Also differrnt margin/padding/border-raduis.

    HTML readability awesome. Media Query seems like overkill for that simple design.

    Marked as helpful
    0