Skip to content
OverviewSolutions
7
Comments
9
P

mci3x

@mci3x100 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

  • P
    mci3x•100
    @mci3x

    Nicely done!

    There is a room for improvement though.

    It is not adapting to tablet sized grid layout and on higher width is breaking desktop one also

    Also "Barlow Semi Condensed" is the font being used in design

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

    i'm proud that i finished this cool project

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

    i encounter some challenges in the design

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

    i think the css styling need some improvment.

    Four Card

    1
    P
    mci3x•100
    @mci3x

    Not bad on the screenshot but when I visit site it doesn't look right.

    I suggest you to create media queries for each layout and work on its flex settings separately.

    Also you picked wrong font, correct one is Poppins

    Give it more work and it will be fine.

  • P
    mci3x•100
    @mci3x

    Good job with resemblance to design!

    • HTML seems to be semantic.

    Probably you could've used h1 instead of h2 although it seems non-intuitive

    • Card is not properly responsive, your breakpoint seems to be off. Fastest way to fix this is:

    Change your media query, let's say like that:

    @media (min-width: 620px) {
...
}

    in HTML fix your source media min-width:

    <source media="(min-width:620px)" srcset="./images/image-product-desktop.jpg">

    and your .item-pic img rules like that:

    .item-pic img {
    display: block;
    width: 100%;
    object-fit: cover;
}

    And now you're golden :D

    • I like how your code is clear and easily readable.

    • Someone taught me to check Lighthouse test in DevTools and it is awesome - you can learn a lot this way.

    • Also you've declared but forgot to import fonts. Check my solution and copy my @font-face lines from CSS file if you want to.

    • Last thing I noticed is a border on button, but maybe that was intentional.

    All in all, it is good solution, keep coding and have fun!

    Marked as helpful
  • AllanKyleV•80
    @AllanKyleV
    What are you most proud of, and what would you do differently next time?

    I'm proud that I completed this project despite my limited knowledge of CSS. I'll continue improving my skills as I take on more challenges.

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

    While building with this project, I have encountered an issue with an ordered list, the spacing between the bullets and the text of the list does not behave the way I expected, also, there is a part of the text that should be in larger font-weight while the rest stays at default, using span element for the bolded text creates a block behavior that pushes the rest of the text as a new block and the text wraps below that block. The text should cover the whole list.

    The internet suggest that I should try ::marker with this problem. And I did. What I learned is that ::marker separates the bullet and the text without converting them as block element, in that way I was able to apply some part of the text border and the rest as default. Also, I was be able change the colors of the bullet without affecting the text.

    PS. English is not my first language, so please don't take my English and grammar seriously.

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

    Mostly with spaces, margins, padding, and text indent. Trying to get the spacing right is time-consuming. Is there any other way to make it easier or more efficient?

    Recipe Page with HTML and CSS

    #accessibility
    1
    P
    mci3x•100
    @mci3x

    It is really good!

    Very similar to design. Code looks clean and organized. I don't have enough experience and only suggestion I can give you at this point is to start using rem instead of px. Spaces, margins etc. needs practice, so keep at it Great job.

  • P
    mci3x•100
    @mci3x

    Looks really good!

    If I had to redo it, I would probably went with your way of using flex.

    Don't know if you used figma files but there is a different padding on mobile version and also slightly different size of a card.

  • P
    idev_cloud•120
    @iDevCloud
    What are you most proud of, and what would you do differently next time?

    I'm proud of coding faster than the last projects that I did.

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

    I would like to have some help to stick perfectly to the design in the sizing card, because I have a shift.

    Social links profile

    3
    P
    mci3x•100
    @mci3x

    Really nice!

    Maybe try not to style your <main> at all

    width: 23.4375rem;
height: 50.75rem;

    I think it might help you with positioning.

View more comments