This was a beginner level challenge and I have solved it easily without any problems. But if anyone have any type of feedback then please share it on comment below.
What challenges did you encounter, and how did you overcome them?This was a beginner level challenge and I have solved it easily without any problems.
This code follows good accessibility and semantic practices, making it easier to understand for both developers and analysis tools.
To ensure that your layout looks good on a range of screen sizes, you should implement responsive design techniques. Here are some suggestions to improve the responsiveness of your layout:
1-Use Media Queries: Add media queries to adjust the layout for different screen sizes. This can help you optimize the design for both small and large screens.
The HTML and CSS code provided is well-structured, with clear use of sections, classes, and ids. Is readable due to its clean formatting, consistent indentation, and use of descriptive class names.
The use of CSS variables and class names like .category, .avatar, and .poster indicates a good approach towards reusability. This makes it easy to apply these styles to other elements in the project if needed. To enhance reusability further, consider creating more modular components that can be reused across different parts of the application.
2-Instead of fixed widths, use percentages or relative units (e.g., vw, vh, em, rem) to make your elements flexible.
3-You are already using flexbox, which is great for creating responsive layouts. Make sure all flexbox properties are used optimally.
4-Ensure your images scale appropriately.
Testing the layout on various devices and using browser developer tools to simulate different screen sizes will help you identify and fix any issues with responsiveness.
The solution of the project is similar to the original project, only with some changes in the widths and heights, and it would be correct.
This is the first project that i have hosted on github pages, so i am proud of it.
What challenges did you encounter, and how did you overcome them?Most challenging part was deploying the project to github pages. It was not working as expected on github pages so i switched to vercel and it worked fine.
What specific areas of your project would you like help with?writing reponsive css using media queries.
Hi! first thing, colors are not the correct ones. second thing, you need to fix the padding and margin. third thing, you can try spliting your screen and see the final job so you can compare them. keep going, you are nearly close. bye
Hi Matheus! Great job, just one thing to remark, you forgot to hover the buttons. The rest it is perfect. Keep going.
