When it falls to tablet breakpoint I wanted to make it 2 column but I couldn't manage that because of the layout.
I couldn't manage to make the image fit the content spacing, if I added height to the parent container on some breakpoints it started to overflow, when I was adding height only to the content the image would stop fitting the text content. Maybe this is because it is an isolated element, in the center of the screen.
Is it possible with pure CSS to make it similar to the solution example where the image is outside of the article container?
Getting this project done i will definitely keep using Grid
What challenges did you encounter, and how did you overcome them?to get it positioned this way but thanks to mentor Kevin powell i did it
What specific areas of your project would you like help with?grid
Hi! The structure is great and follows the original perfectly.
The only thing I would recommend is not to use the same line height for all the text. It's a good practice in design to use smaller line heights for bigger fonts (the bigger the font the smaller the line height and the opposite for small font, the smaller the font is the bigger the line height should be). This is used because the big font is already big and easy to read. You can use chat GPT so it will create a good line height for each font size.
I am very most proud of completing the grid and making it display as demanded will definitely study more on grid.
What challenges did you encounter, and how did you overcome them?Setting the grid to place just as it was expected of us i kept trying and following Kevin Powell instruction which helped me alot.
What specific areas of your project would you like help with?more documentation on grid and flex
You did a great job, I actually did rewrite my code based on yours for the grid layout, because it works really well! I tried to make this with Flexbox but it was annoying and rigid.
The only question is, why you are using em instead of px for media queries? I was thinking using px is the best practice.
keep up the good work!
Hi, looks great, everything is in place. The only thing is the padding of the card content is smaller than in the original. Try using em-rem for padding and margin also instead of px.
Also, I follow one good rule to make it look better, the bigger the font the smaller the line height, and the opposite for smaller font > the line height should be bigger which makes it more readable and accessible for the user.
without figma it's a bit complicated to know the margin padding bold font of the letters
What challenges did you encounter, and how did you overcome them?I took the image, copied and pasted it on figma then I made widths to know the margins between different blocks then for the description font I went to google font to find out the description fonts
What specific areas of your project would you like help with?html,css
Hi, the structure and the HTML look good and everything is in place, I like how you solved the problem with the hero-image for responsive, by having two images for the desktop and one in the mobile container.
The only thing, is the fonts are not working it displays the basic serif font, I see you have added them using CSS properties. And the paddings inside the sections, do not follow the same sizing as in the original solution. What I do to match the original paddings I open the design image in the browser next to my index document make it 100% and size it by eye.
Hey, looks good. Everything is in place, the only thing is, people say that using semantic elements instead of divs is one of the best practices for SEO and accessibility purposes. That's what I've learned here, and will apply it in my future projects.
Sometimes you have to click the refresh button of the browser, guys.
😁😁😁
