Skip to content
OverviewSolutions
28
Comments
18

Kulyk-Volodymyr

@Kulyk-Volodymyr660 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

  • Kulyk-Volodymyr•660
    @Kulyk-Volodymyr

    Nice solution!

    I think you did everything right - his component can be done without media queries. The only thing that can be changed - height: 100vh in body to min-height: 100vh. After that this component will not be partialy hidden on mobile horizontal screen.

  • Carlos Al•200
    @crsaele
    What are you most proud of, and what would you do differently next time?

    I take immense pride in having successfully consolidated my understanding of foundational CSS properties, including but not limited to color, font-size, and background-color. Additionally, I have made significant strides in acquiring knowledge about fundamental HTML elements such as img, p, h1, and span. This proficiency has not only enhanced my technical skills but also equipped me with a robust foundation to further explore the intricacies of web development.

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

    I expanded my expertise by delving deeper into advanced CSS concepts, specifically focusing on the nuances of CSS shadows and the strategic application of margins to effectively manage whitespace between elements, thereby refining my ability to craft visually appealing and harmonious user interfaces.

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

    Please let me know if i could improve my code in any way.

    Blog preview card built using HTML and CSS

    2
    Kulyk-Volodymyr•660
    @Kulyk-Volodymyr

    Nice solution!

    This component can be more responsive on a mobile screen by adding width: 100% to the main image.

  • Kulyk-Volodymyr•660
    @Kulyk-Volodymyr

    Nice solution!

    I have ideas to improve the mobile screen view.

    • change in article class="card" width: 350px to max-width: 350px
    • change in img class="hero-img" width: 350px to width: 100%
    Marked as helpful
  • Kulyk-Volodymyr•660
    @Kulyk-Volodymyr

    Nice solution, congrats!

    I have two independent ideas to make this page a little different)

    1. For header, main and .third-section apply max-width: 1150px; margin:auto.

    2. Add justify-content: space-between to .third-section and change item's styling.

    In terms of semantics, .third-section must be inside main. Also, you don't need to use article to make a burger menu. You can reuse ul of header.

  • Kulyk-Volodymyr•660
    @Kulyk-Volodymyr

    Hi, good job!

    Component is partialy hidden on the mobile horizontal screen. This can be fixed by changing height: 100vh to min-height: 100vh in body. You can also add paddind to body to add space around the card.

    Marked as helpful
  • Kulyk-Volodymyr•660
    @Kulyk-Volodymyr

    Great solution!

    I have one suggestion for improvement - add object-fit: cover to the main image. It may be more responsive.

View more comments