One annoying part of a standard block layout is that you have to be awfully particular about margins, most often top margins on :first-child elements and bottom-margins on :last-child elements. I'm curious if there's a good way to simplify this without resorting to classes. While classes are great, I would take the trade of some uglier css selectors if I can add and remove content from my markdown without having to both with making sure the correct css classes are set.
I'm still not sure how of the best way to approach defining the widths for these kinds of cards. A view like this should be highly reactive as much of its base width is just padded out space for the sake of it. However, I am statically setting the width of the component and using min-width in child elements which prevents reactivity.
Feedback on two points: First, is using flexbox/grid to layout the content within the card overkill? It's incredibly easy to do, but it could definitely be achieved without it. Is it unnecessary to use these layout algorithms when the content's layout is static?
Second, how would I make this layout responsive on small screens ( < 475 pixels)? Is it possible to achieve this without media queries?
There are a lot of pixel units declared in the CSS and I'm not sure that's the proper way to do things. I stuck with pixels because it was the easiest way to match the presented design as closely as possible, but I'm curious if others are able to accomplish the same with less rigid measurement units.
conseguir organizar a pagina e deixar semelhante no final. O código ainda é longo, preciso melhorar isso
What challenges did you encounter, and how did you overcome them?dimensionar os itens sem ter os detalher do design. fiz um esboço no figma
What specific areas of your project would you like help with?tenho dificuldades de como dimencionar as distâncias no CSS
This is quite good. I opted to not use a table for the nutrition information because table styling is bizarre. I think just some divs is a better approach here.
The only other thing that stands out to me is the overuse of rem in some places. For example, the header image is actually what constrains the size of the container. So I think it's more appropriate to set the image's max-width to the desired size (in this case 656px, exactly 50% of the original image's size), then set the container's width to min-content. Not the only approach, but because the container's size automatically adjusts according to its content, the page can more easily be maintained.
I am proud of the fact that I was able to style the content appropriately using the CSS Flexbox styling without having to refer to YouTube videos as every turn and corner.
What challenges did you encounter, and how did you overcome them?The main challenge is simply having to eyeball the paddings, margins, and font sizes. The only workaround that I could come up with rather than having to pay for the PRO is copying the image onto Paint.Net and trying my best to analyze the spacings and the size of the avatar
What specific areas of your project would you like help with?I need feedback regarding the optimization of my CSS styling. I did achieve the desired result but at the cost of having to refer to the same CSS selectors and dedicating one or two lines at a time rather than targeting multiple elements and styling them accordingly in one go.
The first thing that stands out to me is the over-use of pixel units, particularly for font sizes, padding, and margins. By no means, should you never use pixel, but using rem allows for more accessible designs that automatically adopt and adapt the user's text sizing preferences.
You set an explicit height on your container. Which this might help achieve a more exact look, this is generally a bad idea. Generally, you should let the content determine the height of the element so you can prevent overflow.
I think it's probably a good idea if you don't worry too much about trying to create a solution that exactly matches the design. Focus on the fundamentals like responsiveness, the value of certain units, different layout mechanisms, etc...
One last thing, look into the gap property if you're not already familiar with it. It can be used to replace margins in a lot of cases.
Your "Icon" div wraps just the svg and the article details; however, it excludes the author details. You could include all of these in the same parent to make them easier to layout between eachother.
You've got some notable incongruencies with the target design, but I wouldn't worry too much about these as they're generally basic items like font color and size.
I'll note that the design doesn't react appropriately on smaller screen sizes, but I honestly have no guidance for you on how to fix this.
i get the challenge after many attempt
What challenges did you encounter, and how did you overcome them?i had a difficult of positionning box inside each other , i didnt use tools like flexbox only relative and absolute positionning, it take 4 times much time to code than my initial 1 hour .the next time i will try to be quicker than this.
What specific areas of your project would you like help with?i would like to see different solution from other newbie like me to get idea what is wrong with me.
A couple things of note:
