Design comparison
Community feedback
- @Yaqoob1410Posted 7 months ago
Your HTML and CSS code looks well-structured and clean. Here are some feedback points:
-
HTML Structure: Your HTML structure is simple and effective. It's good practice to use semantic elements, like
<header>
,<nav>
,<main>
,<footer>
, etc., where appropriate. However, since this is a small project, using<div>
elements suffices. -
Image Source: Make sure that the path to your image files is correct. In your HTML, you're referencing images in the
images
directory. Ensure that this directory structure exists and that the images are present in it. -
CSS Styling:
- You've effectively used CSS variables (
--white
,--light-gray
, etc.) to define colors, which helps in maintaining consistency and ease of updates. - Your use of
box-sizing: border-box;
is good practice to include padding and border in the element's total width and height. - The overall styling is clean and consistent.
- Make sure there are no typos or missing selectors in your CSS. For example, you have a typo in
.container h1
where the dot should be followed by a space, separating.container
andh1
.
- You've effectively used CSS variables (
-
Responsiveness: You've added a media query for a minimum width of 500px, adjusting the container width. This is a good start, but consider testing on various screen sizes to ensure your design looks good across different devices.
-
Font Import: You're importing a font from Google Fonts, which is fine. Ensure that you have permission to use this font, and consider providing a fallback font in case the imported font fails to load for any reason.
-
Accessibility: Ensure your images have descriptive
alt
attributes, which aids users with screen readers and in case the image fails to load.
Overall, your code is well-organized, and you've utilized best practices in HTML and CSS. Keep up the good work!
0@alfanarifianPosted 7 months ago@Yaqoob1410 thanks for all the suggestions, Hopefully I can be better at working on the project later
0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord