saraimess• 10
@saraimess
Submitted
P
Sherrisa Classon
@Sherrisa
All comments
- PSherrisa Classon• 50
@Sherrisa
Posted
Nice work!
It looks like the padding needs a few slight adjustments. I believe the padding between the links is 16px or 1rem if your body font-size is set to 16px and the padding on the card is 40px or 2.5rem.
Your background also looks slightly darker. If you change that value to the grey 800, it should match perfectly.
Are you working with the Figma files? It makes it much easier to figure out the exact values for the CSS properties if you use the Figma files. Here is a great article on working with the Figma files: https://www.frontendmentor.io/articles/figma-for-developers-how-to-work-with-a-design-file-m6CZKZ1rC1.
0 - clickglue• 120
@clickglue
Submitted
What are you most proud of, and what would you do differently next time?
I'm happy to learn how to better analyze and prepare before I start coding. Also, CSS start to become more predictable if you structure it properly and do less trial-and-error.
What challenges did you encounter, and how did you overcome them?
Using flex is a challenge. Also, I'm not sure if I understand the concepts of 'responsive' correctly.
What specific areas of your project would you like help with?
How to implement responsive designs.
PSherrisa Classon• 50@Sherrisa
Posted
Great job! You're project is nicely organized, and your code is easy to read.
For this project, I designed for desktop first and then wrote a media query to adjust the card width and font sizes for mobile. When I examined the Figma files, these were the only values that I saw were different on desktop and mobile. I chose the screenwidth of 576 based on the breakpoints used in Bootstrap.
Here is my code.
@media (width < 576px) { body { font-size: 14px; } .card { width: 327px; } .card-category, .card-publishdate, .card-author { font-size: 12px; } .card-title { font-size: 20px; } }Here is the link to my repository: https://github.com/Sherrisa/blog-preview-card
1 - jvondungen• 10
@jvondungen
Submitted
What are you most proud of, and what would you do differently next time?
Most proud that I figured out how to use Github, create a webpage and get the thing to look something like the sample. Next time I would start with the mobile view and work from there using either Flexbox or Grid (still learning both).
What challenges did you encounter, and how did you overcome them?
I had a lot of difficulty learning how to push files to Github and even get it to work in the first place. Somehow I figured things out with some querying on the web. Also had a lot of trouble getting the spacing to work. I managed this mostly through trial and error, which was very time consuming. Finally had difficulty getting the page to be responsive. I used @media queries, which improved, but didn't totally get it to be responsive. (some sizes didn't look right).
What specific areas of your project would you like help with?
Learning how to get it to be responsive.
PSherrisa Classon• 50@Sherrisa
Posted
Have you tried examining the file in Figma? You can select specific elements and see the exact dimensions. Using Figma would reduce your trial-and-error time. This is a great article on working with design files in Figma: Figma for developers: How to work with a design file.
Also, you could simplify your code by working with either margin or padding on your heading and paragraph elements rather than using both.
Marked as helpful
0
