Basic HTML and CSS

Community feedback

• 

  lucielub•90

  @LucieLuBPosted 2 months ago

  Good job, Here's some feedback on your CSS code:

  @import for Google Fonts:

  The @import statement is fine, but you might consider using a <link> tag in the HTML for performance reasons, as it loads the fonts faster and prevents blocking styles. Body Styles:

  place-items and place-content: These are invalid in this context because they only work within a grid or flexbox container. You should use display: flex; along with justify-content: center; and align-items: center; to achieve centering. Consider adding margin: 0; to the body to remove default margins. Image Styling:

  Using width: auto; and height: auto; is redundant, as the image already maintains its aspect ratio by default. You can safely remove them. The max-width: 200px; is useful, but depending on the design, consider adding a media query to adjust it for larger screens. Shape Containers (.shape-container, .inner-square-shape, .outer-square-shape):

  The display: flex; properties in both the .shape-container and .outer-square-shape are well-implemented, but ensure you’re intentional with the use of flex-direction: column;. If these shapes need to be horizontally aligned on larger screens, consider a media query to adjust the layout. The padding and margin between .outer-square-shape and other elements seem fine, but you might want to test how they behave responsively. Text Styling (.text-style1, .text-style2):

  The styling is consistent with the rest of the design and works well with font-family: 'Outfit', sans-serif. You’ve appropriately adjusted font weights and sizes. The width: 170px; applied to both text styles may cause issues in smaller screens. Consider using percentages or max-width for responsiveness. Good use of line-height for readability. Media Queries:

  @media (min-width: 1440px): The intention of setting the body width and centering it is good. However, consider using a more flexible layout system (like grid or flexbox) to handle different screen sizes rather than fixing the body width to a specific pixel value.

  Marked as helpful

  0

  ---

  

  David Antonio Ty•20

  @Davidty143Posted 2 months ago

  @LucieLuB thank you so much for your comment, this is very helpful for me starting to learn this leanguage

  0

  

  David Antonio Ty•20

  @Davidty143Posted 2 months ago

  @LucieLuB Applied some of your suggestions, still trying to learn more about responsiveness on different resolutions. Thanks! :)

  0