Suggestions on how would you have used CSS Grid for the layout.
Mostly fully understanding flexbox but that will come with more practice.
The responsiveness and handling pixel perfect page on different devices.
What challenges did you encounter, and how did you overcome them?The markers were the most challenging part as it was my first time handling the space between the marker and the text and I used letter space to overcome this.
Great work! Your HTML is semantic and you've used the appropriate tags to describe the content. Your layout is also responsive in multiple viewports. I like the way you've used a CSS reset and variables to help keep your CSS consistent and DRY.
Overall your solution is good and you've demonstrated great use of HTML 5 tags and CSS modern features.
Great use of semantic HTML tags such as main and section. It shows that you thought about the most descriptive tag for your content. Your images also contain alt attributes which also shows you took accessibility into account.
Your solution is responsive and follows the designs very closely so great work!
You could improve your CSS code by using CSS variables to store shared values such as the theme colours. I also like the use of a reset ruleset at the start to ensure consistency.
Overall, this was a great solution! Keep up the good work.
used :root in css to setup colors schema from project and also font sizes.
What challenges did you encounter, and how did you overcome them?pixel perfect, size of the fonts
Great use of semantic tags and structure of your HTML document.
Your CSS code show good knowledge of modern CSS features. I like how you use CSS variables for values that are shared and common in the project such as colours and font sizes. Although the CSS looks great it could be further optimised by setting the font-family a an higher level tag such as html and let inheritance do its thing.
Overall it's a great solution and well structured. Keep up the great work!
I like your HTML structure although it could include semantic HTML such as a main tag and article for your blog preview which better describes the content you're displaying. The class names could be more descriptive. So instead of box you could have used post or post__container. The use of BEM naming methodology of block__element--modifier is often seen in industry, so it's a good way to name your classes.
Having multiple style sheet files for each component is a great to way to structure your project especially as it gets big. I will play the devil's advocate here, in a very small project like this, a single style sheet would suffice.
Great use of CCS variables for colours, shows that you are aware of modern CSS features. I can also see you using CSS Grid which again supports what I previously said.
For the box shadow you could have used the box-shadow property as you could have done it all in one line.
I'm proud of how it looks and how I worked on the project.
What challenges did you encounter, and how did you overcome them?None~
What specific areas of your project would you like help with?Any feedback is welcome to make this better! I'm always looking to improve my skills.
I like the way you've structured your HTML content, the only improvement I would suggest is to try to use more semantic tags which help search engines understand your content better. For example, wrap your page content in a main tag and use article for the blog card as it better describes its content.
Your CSS is clean and I like how you use CSS variables for values that are shared across the projects such as colours, fonts, and sizings. One thing I would suggest would be to group all your selector rules in one instead of grouping it by let's say Typography and Layout. This is a better practice and you'll often see it in code bases as it makes it easier to identify all the styles for that particular selector instead of navigating up and down the CSS stylesheet.
Proud of completing this in few hours and my myself.
What challenges did you encounter, and how did you overcome them?The problem that i faced was making avatar image and text beside it to go in center but later i figured it could be done through flexbox so thats how i did it.
What specific areas of your project would you like help with?I think i had a problem with image and when i gave it min-height it wouldn't work also border radius was not working with min-height. That's something i couldn't figure out.
Consider using the article within main tag for your content as it's more semantic and helps define your content.
Excellent use of CSS selectors.
Consider using CSS variables for colours and other values that might be used more than once.
Overall, great work!
