Skip to content
OverviewSolutions
7
Comments
7

NeoV10

@NeoV1080 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • NeoV10•80
    @NeoV10

    I like the use of the grid, it looks good and that was the main purpose of the challenge so good job, keep it up buddy!!!

  • NeoV10•80
    @NeoV10

    There is a lot of unnecessary css code, u can make it simple and more clean, check teh css guide and try doing it again, good luck!!!

  • NeoV10•80
    @NeoV10

    I suggest to check out the basics of CSS if u haven´t already. It will help you to improve your desing

  • P
    Tomislav Šuto•260
    @RetroApe
    What are you most proud of, and what would you do differently next time?

    I managed to incorporate transitions, making each change in the design smooth.

    Also managed to stick the image to the top and sides, essentially ignoring padding, without using positioning.

    • I would have done this differently if I knew how
    • I would have also liked the transition to happen only at one spot because when adjusting mobile screen width (on a desktop) the image lags behind the viewport
      • Probably not that impactful, since mobile width cannot be adjusted in real life, as far as I know
    What challenges did you encounter, and how did you overcome them?

    The biggest challenge was properly adjusting the position of the image.

    • Solved it with transform: translate and width: 100vw
    • transform: scale and transform-origin: bottom did not work

    The other challenge were the bullet points. I noticed that that each bullet point stays vertically in the middle of the text, which is not the case with vanilla unordered list. I had to make custom bullet points and adjust the position with flexbox.

    ul > li {
    list-style-type: none;
    display: flex;
    align-items: center;

    &::before {
        content: "\2022";
        font-size: 1.6rem;

        position: relative;
        left: -1.5rem;

        line-height: 0;
    }

    & span {
        display: contents;
    }
}

    I could have used padding or margin instead of position but the solution is complete and it works, so there is no need to change it.

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

    If anyone has better ways to solve the problems above, I am happy to listen :)

    Responsive recipe page; smooth thanks to transitions

    1
    NeoV10•80
    @NeoV10

    The html and css works but the design is not the same. but apart from that good job, keep it up!!!.

  • IsaacKel•70
    @IsaacKel
    What are you most proud of, and what would you do differently next time?

    found it quite easy

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

    linking, a google search

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

    i felt okay with this one - if i wanted too i could've made it perfect but i want to move forward

    card creating, links

    1
    NeoV10•80
    @NeoV10

    There is no github to take a look at the code so I can´t review the solution, but at a first glance it doesn´t look good, buttons have no interactions except the github button that doens´t work. And the CSS looks effortless

  • NeoV10•80
    @NeoV10

    I think there´s a lot of css code that it´s not necessary. The mobile designs is ok, but when the screen gets smaller the card brokes. I see a lot of unnecessary classes in the HTML code even if they are being used in the css code.

View more comments