For some reason, my HTML code ensuring the easy flow of my blog card from desktop view to mobile view didn't work, and when the page is minimised, instead of the card minimising itself together with the page it stayed in place and would become hidden even when the page is only half minimised. Any other feedback would also be appreciated. Thank you in advance :)
Hi Olga! I recommend that you study a little about positioning, especially flexbox. The problem you described occurs because you used fixed margins to position the element on the screen. So, when the screen decreases in height or width, the element continues with the positioning you defined. Flexbox rules will help you position the element and ensure that the element adjusts to the width and height in a better way. I have a fun way for you to learn flexbox, that is https://flexboxfroggy.com/, is a game where you can see and learn how flexbox works and will help you a lot.
I tweaked the margins of several elements in the website but I couldn't achieve pixel-perfect distribution compared to the design provided in the challenge. Maybe there is a way I didn't know that could have made it easier.
I would appreciate any suggestion for that :)
This is an almost perfect design, congrats. My way to achieve an almost pixel-perfect is set font-size on body (that is informed on style-guide) and work with relative sizes (%, rem, em) instead of pixels, I think it's easier than go pixel to pixel to find the perfect size.
Hi! I will try to answer your questions and give you some advice, based on my experience here on FrontEnd Mentor. First, yes, use semantic tags always you can. One thing I always do (and I don't know if it's the best practice, but seems to works very well when the challenges are only one card like this one) is that I always have a <main> tag as first and only child of <body>. This helps me to add meaning to the block and makes it easier to adjust the layout too. When your text doesn't look like the one on design files, try to add some horizontal padding to adjust it, it works if your font-size is correct. Your media query looks fine, I only suggest you to not include "only screen", it can be only "@media (max-width: 375px) {}". Other thing I suggest is that you try to use a higher breakpoint, since some devices will not show desktop layouts properly. I usually use 768px or 1024px.
Hello everyone. Long time haven't code anything. So, trying to remind myself basics. I'd be happy to get some feedback
Hi, great job! I suggest that you search about <picture> when you have different conditions to show images, it works very well when you have this case where you need to show an image on desktop size and another image on mobile size. Try to use more semantic tags, like <section> or <aside>, they work like a <div> but can make your blocks more meaningful.
Oi Henrique, tudo bem? Parabéns pela solução, espero contribuir de alguma forma para o seu crescimento como desenvolvedor com o feedback abaixo.
how can i know how many containers i should use when creating semantic html? how can i make sure to center a single element on the screen properly?
You can use flexbox properties like align-items and justify-content, for example, to center elements on the screen or with parent containers. There is a nice tutorial you can read and learn more about it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
