Design comparison
Solution retrospective
On my first challenge, I only used <divs> in my HTML while in this challenge I tried using semantics such as <main>, <section>, etc. although I believe I could have used a different semantic for <section>?
Also, I tried doing the mobile-first workflow unfortunately I was unable to stick to it and ended up doing the desktop version first again like how I did on my first challenge. Does anyone have any tips on their workflow regarding this?
Community feedback
- @anmolthedeveloperPosted over 1 year ago
Hello, Congratulations on completing this challenge
I suspect that the image is not response, you're using the desktop image only so, here a small tip to help you make it responsive
You can use the <picture> tag which is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts. Example:
<picture> <source media="(max-width: 768px)" srcset="small-image.jpg"> <source media="(min-width: 769px)" srcset="large-image.jpg"> <img src="fallback-image.jpg" alt="Example image"> </picture>
Here's a detailed reference: here
Marked as helpful2 - @SudodoSuPosted over 1 year ago
Hello Coder! 👋
Congratulations on successfully completing the challenge! 🎉
To create a two-column layout using flexbox, I would recommend the following approach:
- Create two boxes using the
<div>
element: one for the left column and another for the right column.
<div class="left-box"> </div> <div class="right-box"> </div>
-
Replace the <div> element with a <main> element, which will serve as the main container for the layout.
-
Apply CSS styles to achieve the desired layout using flexbox. Here's an example:
.container { display: flex; } .left-box { /* Styles for the left box */ } .right-box { /* Styles for the right box */ }
By setting the display property of the container to flex, the child elements (left-box and right-box) will automatically arrange themselves in a row.
I hope you find this explanation helpful. Happy coding! 😄
Marked as helpful0 - Create two boxes using the
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