huddle landing page with single introductory section master
Design comparison
Solution retrospective
I'm proud of successfully implementing a fully responsive layout using CSS Flexbox and a mobile-first workflow. I managed to match the design closely and optimize the images for better performance. I’m proud that I understood and applied the feedback from my previous challenges to improve my code structure and semantic HTML.
What challenges did you encounter, and how did you overcome them?I encountered challenges with making the background image responsive while maintaining the correct proportions across devices. After researching, I used a combination of background-size: cover and media queries to adjust the image dynamically.
Another challenge was understanding how to use Sass mixins for breakpoints. Initially, I had errors due to undefined mixins, but after checking my file structure and imports, I resolved the issue.
These challenges helped me deepen my understanding of responsive design and the importance of organizing Sass files properly.
What specific areas of your project would you like help with?I’d like help with two specific areas: Responsiveness and Accessibility. For responsiveness, while my solution works on most screen sizes, I’m unsure if it’s fully optimized, especially for larger screens. Feedback on my media queries and layout adjustments would be helpful. For accessibility, I’m still learning how to make my projects more inclusive. I’d appreciate suggestions on improving semantic HTML and ensuring compatibility with screen readers.
Community feedback
- @alaa-mekibesPosted 10 days ago
I can't see your code. 404 :(
0@Mohammad-Irfan-NoorzadaPosted 9 days ago@alaa-mekibes why, what seems to be the problem!?
0@alaa-mekibesPosted 9 days ago@Mohammad-Irfan-Noorzada, in
view code
case you add this link:https://github.com/Mohammad-Irfan-Noorzada/huddle-landing-page-with-single-introductory-section-master/pages
So other users can't see your repo directly, it show 404 (broken link).
Just edit the link by deleting
/pages
Marked as helpful0@Mohammad-Irfan-NoorzadaPosted 9 days ago@alaa-mekibes Thank you so much I did not think of this before!
1
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