@anoshaahmedSubmitted almost 3 years ago
I would appreciate constructive criticism.
Julian Krüger
@juliankrugerAll comments
- @juliankrugerPosted almost 3 years ago
Hi Anosha,
there is not really much to criticize, this looks great! One thing you could add to really get the color of the image right is a pseudo-element. An ::after or ::before css-class that sits right above the image with the same background-color and a low opacity.
Another suggestion for future challenges: The design works perfectly on the two screen sizes set by the challenge, but in between it is not responsive anymore. What might help is mobile-first approach. Design it for mobile screens first and then later add the complexity of the desktop design. The dev tools of your browser help displaying all the screen sizes. I would not rebuild this just for that, though but maybe keep it in mind in the future.
A nice free course for that is Conquering Responsive Layouts by Kevin Powell. It takes 21 days and only presents you a very small challenge each day including some break days.
Hope that helps!
Greetings
Marked as helpful1 - @teecarter16Submitted almost 3 years ago
I was struggling with the box-shadow, any tips are appreciated.
@juliankrugerPosted almost 3 years agoHi Tyra,
nice job on the challenge, looks good!
Regarding the box-shadow: The challenge presented a very subtle shadow and your solution is already on the right track. There are four values: the first value, x-offset is 0, because you only want to push the shadow down a bit, not to the side. The second one is the y-offset, which pushes it down. That is correct.
Then the blur-radius and the spread-radius become important: A nice tip for a subtle box-shadow is a negative spread-radius. Your fourth value, the spread-radius, is 0, you could try a negative value, like the same or half of the third value and adjust the second and third values along the way. Try around a bit, you also used two colors, maybe try it with one first.
Another tip: You can look into the report on the solution page, it tells you about HTML and Accessibility issues. It might seem like a lot at first but there are usually easy fixes and there is a lot to learn about HTML structure and Accessibility. This site takes great care of you in that regard. (One easy fix, for example: You replace the bottom div-tag with a footer-tag)
I hope that helps, have a nice day! :)
Greetings!
1 - @itushSubmitted almost 3 years ago
I enjoyed coding the media query part the most of this challenge.
I'd really appreciate if you could answer the following:
What did I do wrong? What did I do right? How can I improve? Thanks in advance :)
@juliankrugerPosted almost 3 years agoHi Tushar,
this might look as much but trust me, it's not! The second paragraph is more important and easy to fix.
Your design looks really good and it's close to the challenge. The image is a bit stretched and with varying screen size it gets squished. (Looks fine on the two targeted screen sizes, though) A possible solution is to use the image as a background-image in CSS. With background-blend-mode you can also take control of the coloring a bit more and with background-position you can control the position.
Anyway, the more important issues at hand (that are also way easier to fix) are the Accessibility and HTML issues in your report.
Accessibility: That div at the bottom should be a footer, it helps the semantic structure of the page and boosts accessibility.You also used the <main>-tag, that is nice!
HTML: The article tags are misused as stated in the report. This is some data that is for itself just a single statement, it doesn't contain a heading. An article should be something that could be viewed on its own completely, like the whole card for example - with a heading and more content. But on the upside: You didn't fall into the trap turning the big texts of the data into headings. These are maybe paragraphs or items of a list of features. Wrapping the "1k+" and the "companies" in one tag was the right move, but the tag should be a <p>- or <li>-tag in my opinion.
I hope that helps, have a great day!
Greetings!
1 - @MariAleCasSubmitted almost 3 years ago
Hi everyone, What advice do you have for optimising my code?
@juliankrugerPosted almost 3 years agoHi Maria,
that actually looks really nice! You got really close with the color and the properties, it looks good. The mobile version is a bit slim and also it holds its size as the screen gets bigger. It would be nice if it kinda grew naturally to a certain point to that it looks nice on a tablet for example. With that issue I think usually a mobile-first approach helps: Design it for mobile first, add desktop complexity later. I wouldn't suggest rebuilding this, though, but maybe consider it for future challenges.
The only real issues at hand are the 3 accessibility issues in the report. One advice for the one with the h3 headings: I'd say these are not even headings, they only look like headings. For example, "10k+" taken for itself is not a heading from a content perspective. I'd personally assign them to paragraphs with spans to style them differently. But that's probably up for debate. If these are used as headings, though, the heading would be the whole "10k+ companies".
Greetings!
Marked as helpful1
