Federico Martinez• 820
@fdmarti
Submitted
W. Brett Egbert
@crossinguard
All comments
- W. Brett Egbert• 80
@crossinguard
Posted
Solid submission! You code is easy to follow, your submission looks good at all realistic screen sizes, and it matches pretty well to the expected output.
The font is different from the style guidelines, but that seems intentional. I would recommend still using 2 fonts to keep a bit of the visual diversity in the headings, even if you don't use the challenge's suggested fonts.
Additionally, while your mobile-sized solution looks good, it is missing what I consider to be the most interesting part of this challenge (from a dev standpoint). As the size gets smaller, the recipe image should lose its padding and instead go edge-to-edge. Similarly, a distinct card and its rounded borders shouldn't be present on the mobile version. If you are looking for an extension, I would try and figure out how to get both of those design elements incorporated.
0 - ha308ing• 90
@ha308ing
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud that I didn't lose my sight while differentiating black pixels from black pixels. Next time I should take a spare pair of eyes.
Child components depend on the card context, hence not much reusable I guess
What challenges did you encounter, and how did you overcome them?
Avatar url had absolute url and didn't load, took a while to find it out 🤪
What specific areas of your project would you like help with?
I'd like to find out, how to make a child component (like avatar, links list) kind of dual, so it could work with whole card context and without context?
W. Brett Egbert• 80@crossinguard
Posted
Nearly identical, great job!
Small detail but the location and links are slightly off for the font weight (bold/700 vs semi-bold/600). Both are used in the card design, which a fun treat on top of the black pixel adventure you just went through.
One other consideration is the font size being fixed in place. Your card looks great at all sizes, has the correct font sizes, and handles browser zoom just fine. However, changing the font size in the browser settings does not interact with your card. Another small detail but worth thinking about.
Marked as helpful
1 @Eberesundayikechukwu
Submitted
What are you most proud of, and what would you do differently next time?
im proud of my css skills as at now, and i will improve in the responsiveness.
What challenges did you encounter, and how did you overcome them?
the responsiveness but i relaxed and tackle it
What specific areas of your project would you like help with?
mobile responsiveness.
W. Brett Egbert• 80@crossinguard
Posted
The overall design is getting pretty close, with easily readable and well-organized code!
In
index.html, I noticed you start with an H2 header (for the "Learning" category), then use an H1 header for the blog topic. While you are using them visually in terms of H2 = big text and H1 = bigger text, there is also a logical flow to how they should be used. H1 is the highest, and should appear first. Each H2 is a subset of H1, and each H3 is a subset of its H2. Headers are a giant hierarchy, and that hierarchy informs screen readers and other non-visual interactions. My recommendation would be to make the H1 a general title outside of the blog card (and possibly make it thoughtfully disappear), then change the category tag to a standard paragraph.Responsive is tough, especially when we start dealing with oddities like an ancient iPhone held in landscape mode...which I use. One thing that helped me is to remember that HTML is responsive by default. It is only once we start giving it fixed design choices that the responsiveness starts breaking. Options like
height: 100vh,position: absolute/relative,width: 30%, and media queries all have a place, but depending on the combination can end up hurting responsiveness rather than unlocking it. In your case, the 100vh combo with absolute positioning makes the card cut off for small landscape screen sizes. The media queries make certain sizes look near-perfect while others look distorted. That distortion often happens worst right before a media query is set to kick in.I find that putting temporary outlines on my working areas helps me to really understand how much room elements are taking up as I resize my screen. Watch how those outlines squish or expand as you resize your screen in responsive design mode. If you can get your main card sizing solid across all sizes, then the information and images nested inside can reference their size off of the card to be equally solid.
0- Miarinaly• 80
@Mys1337
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of finishing this project as it is my first step into front-end development. Next time, I will check upon more advices of other developer more.
What challenges did you encounter, and how did you overcome them?
I had trouble with the responsive design when we use a mobile phone size screen. I look up for some code example to know how to do it (I've never used specific css condition for responsive design)
What specific areas of your project would you like help with?
I want to learn more about better HTML semantics and more CSS about responsivity
W. Brett Egbert• 80@crossinguard
Posted
The solution looks pretty good at the two specific sizes but loses its structure when resizing. For example, right at your media query's break point of 768px, the QR code goes from tiny to huge in relation to everything else. In this particular challenge the mobile and desktop designs have the same dimensions so a media query should not be needed.
A few fixed sizes that won't change between the mobile and desktop views can help lock your structure in when resizing to various displays. For example, in the Figma file both mobile and desktop components are 320px wide. Currently, your component size is based on
width: 32%making everything resize unpredictably depending on the user's unknown screen size.Additionally, I would encourage you to review the style guide and reference images as a few colors and font sizes appear off. For example, the header font color is black rather than the "dark blue" specified.
Marked as helpful
0
