Design comparison
Solution retrospective
It looks like the design. I want to use grid for the next one, but flexbox I know how to work with.
What challenges did you encounter, and how did you overcome them?Getting it deployed. I tried to deploy using GitHub pages, but it was not my first time. For some reason, it would not read the images or my stylesheet. I had both in folders (never a problem before) and nothing. So I took them out of folders and still need to show my images or stylesheet. Finally, I deployed on Netlify.
What specific areas of your project would you like help with?Right now nothings
Community feedback
- @dev-paulLPosted 4 months ago
Hi 👋
I recommend you to test your page behavior by resizing the browser window, zooming in and out and changing the browser font-size. For me, it looks completely different from the original design.
You could also read about semantic html tags to avoid using
<div>
everywhere. (For example your container div could be<main>
, your card div could be<article>
, your attribution div can be a<footer>
) .Be careful when using
em
as it can be unpredictable.Make sure you use the right fonts (they give it in style-guide.md).
I see you are using 2 divs (one for mobile and one for desktop, I guess). To render a different image depending on the device size, you should use
<picture>
, and adapt the media-queries for the other elements.I suggest you to start by coding the mobile design when they are not complex, then adapt your layout & media queries to the tablet and desktop version. This usually results in shorter and more readable CSS files.
Keep it up 👋
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