Skip to content
OverviewSolutions
5
Comments
4
Suzunatsu
@st0272

All comments

  • Suzunatsu•50
    @st0272Posted about 1 month ago

    Your code is well-structured, but there are several points for improvement:

    1. Accuracy of Sizes

    • Font sizes: Each font size is 1 or 2 pixels larger than the design file.
    • Margin: The margin size for the text "London, United Kingdom" is slightly wider than expected.

    2. Unnecessary CSS Styles

    • h1 and h2 class bg-c: The principal class already applies the same background-color: var(--Gray-800), making this redundant.
    • enlace class: The cursor: pointer style is unnecessary since it is the default behavior for anchor (<a>) tags.

    I think it could be even better with a little more attention to detail. Keep up the good work!

    0
  • Suzunatsu•50
    @st0272Posted 2 months ago

    Your code is well-structured, but there are several important points for improvement:

    • The desktop design is slightly smaller compared to the original design. Please make sure to measure the padding, image sizes, and other elements correctly.
    • The mobile version of the design is the same as the desktop version. Please create a mobile version using appropriate media queries.
    • Ensure that the h4 tag with the .header__caption class follows the appropriate heading structure. It's better not to use an h4 tag before an h1. It might be better to use a p tag instead of an h4.
    • The h2 and h3 tags inside the section tag with .main__pricetag class might confuse the document hierarchy. You could consider using <span> with appropriate class names and using <div> tag or <p> tag instead of <section> tag.

    I think your coding skills could be even better. and Keep up the good work!

    0
  • Suzunatsu•50
    @st0272Posted 2 months ago

    The HTML and CSS code you provided is well-structured but could benefit from a few improvements for better accessibility, maintainability, and design.

    • Ensure that the <h4> tag follows the appropriate heading structure. It's better not to use an <h4> tag before an <h1>. It might be better to use a <p> tag instead of an <h4>.

    • Inline styles are not good for maintainability, so it's better to use external CSS files.

    • The .card doesn't have a border.

    • The content size on the desktop version is slightly smaller compared to the design file. Please make sure to measure the padding, image sizes, and other elements correctly.

    I think it could be even better with a little more attention to detail. Keep up the good work!

    0
  • Suzunatsu•50
    @st0272Posted 2 months ago

    Your HTML and CSS code are mostly well-structured, but I have a few suggestions for overall design consistency.

    • While section is fine, consider using the <main> element if it wraps the main content of the page.

    • The current footer contains “Your Name Here,” which should be replaced with your actual name. Also, consider using a more semantic element like <p> instead of a <span> for text content.

    • Several elements such as .card, .flex, img, .heading, .text are using fixed pixel values, which could affect responsiveness on different devices and screen sizes.

    • The screen size is currently fixed at a height of 1044px, which might not be responsive on smaller screens. You should try using min-height: 100vh; for .card instead, which allows the height to adapt to the viewport.

    • Using class names like .container for the outer wrapper and .card for the actual card could indeed make the code more intuitive and easier to understand.

    0