Skip to content
OverviewSolutions
4
Comments
22

Shivraj K

@Shivraj-K09India400 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

Latest comments

  • Shivraj K•400
    @Shivraj-K09

    The HTML and CSS code look great!

    • The structure of the HTML is simple and straightforward, and the CSS styles are well-organized and commented which makes it easier to understand.
    • The media query for larger screens is well-implemented and effectively changes the layout to make it more visually pleasing on larger screens.

    Overall, great job on the code and Happy Coding 😉

    Marked as helpful
  • Shivraj K•400
    @Shivraj-K09

    The HTML and CSS code looks well-structured and commented, which is great for readability and maintainability.

    • In terms of the responsive design, it seems like you are trying to use a media query to make the layout responsive for screens wider than 500px. However, the syntax for your media query is incorrect. Instead of @media (width > 500px), it should be @media (min-width: 500px). Also, remember to include the appropriate closing tag (}) to close the media query.
    • Additionally, it might be helpful to add some responsive styling to the .image class to adjust the height property and maintain aspect ratio for different screen sizes.

    Overall, great job on the code and Happy Coding 😉

  • Shivraj K•400
    @Shivraj-K09

    Great job on the code! Here are some positive observations:

    • Your HTML is well structured, and you're using semantic HTML elements where appropriate. You're also linking to external resources (fonts and images) using proper URLs.
    • Your styles are well-organized and utilize readable class and selector names.
    • You're including media queries for responsive design at appropriate breakpoints.

    Here are some recommendations for improvement:

    • Consider adding some padding to your body element so your content doesn't go all the way to the edge of the viewport.
    • In your .container-main selector, consider using margin: 0 auto instead of align-self: center to horizontally center the container.

    Overall, great job! Keep up the good work! Happy Coding😉

    Marked as helpful
  • Shivraj K•400
    @Shivraj-K09

    Overall, the code structure is good and easy to understand. You have used appropriate HTML tags and included a meta viewport tag for responsiveness. Your CSS selectors are also properly named.

    However, there are some areas of improvement that I would like to mention:

    • In the style.css file, the font size unit for .how selector is missing (it currently reads as font-size: px;), which may cause issues in your webpage's display. You should edit this line to include a valid font-size unit such as px, em, or %.
    • The max-width property for .container selector has a fixed value of 360px, which might be too small for certain devices. Instead, you can use a max-width value in em or % units to make your webpage more responsive.
    • The justify-content property is not applicable to the .attribution selector as it is currently a div element. You may want to either give it a display of flex or use text-align: center instead.
    • In the attribution section, the challenge link to "Frontend Mentor" should have the rel="noopener noreferrer" attribute added to the <a> tag. This attribute is used as a security measure to protect against vulnerability exploits related to link hijacking, by preventing the new page from being opened in the same window, potentially allowing the destination site to take control of the source site.

    Other than these minor issues, your code looks good and functions as intended. Good job and Happy Coding 🫡😉

  • Shivraj K•400
    @Shivraj-K09

    Based on the code, here is my feedback:

    • Great use of semantic HTML. You have used appropriate tags such as nav, ul, and picture which makes your code easier to read and understand.
    • Your CSS code is structured well and easy to read. You have used appropriate class names and have grouped related styles together.
    • Use of media queries for responsiveness is great. However, in some cases, you are relying on fixed values such as min-width: 600px which might not work well across different devices. It's a good idea to use relative values such as em or % to ensure consistency across devices.
    • Consider reducing the number of font sizes used in your code. Having too many font sizes can make your code harder to read and maintain. Try to group related font styles together and use CSS selectors to apply them to different elements.

    Overall, great job on your code and keep up the good work! Happy Coding 😉🫡

    Marked as helpful
  • Shivraj K•400
    @Shivraj-K09
    • Great job! It's good to see that you were able to achieve the desired layout using margin and padding instead of relying solely on positioning.
    • One suggestion I would make is to use const instead of let when declaring pattern since the variable doesn't need to be reassigned. It's a small change, but it can help communicate to future readers of the code that the variable is intended to be constant.

    Keep up the good work! and Happy Coding 😉🫡

    Marked as helpful
View more comments