@scorpion61
Submitted
Tried to implement the css Flexbox and grid layout on this project. You are welcome to review. Thanks.
Looking to hire developers?
@sonickonic
@scorpion61
Submitted
Tried to implement the css Flexbox and grid layout on this project. You are welcome to review. Thanks.
@sonickonic
Posted
Hey 👋 Congrats on submitting your first challenge! Nice work the :hover
effect is super cool! 🚀
On a widescreen, the cards are extremely wide did you consider max-width
property?
Don't forget to correct the HTML ISSUES, they are easy to solve)
@JALCH-1512
Submitted
I think my code is more complex than it should be. I would appreciate any advice to improve it, as I would also like you to tell me what good practices I can implement in my code. :)
@sonickonic
Posted
Hey Javier! Nice work the screenshot looks awesome! 😎
Your code looks good overall, I have just a few observations:
<p>
elements, where different HTML elements may be more appropriate.<p>
defines a paragraph. The best use for it will be in the "Join our community" section, instead of the <div>
.<p>
twice, a <h2>
for the heading and <ul>
for the list of features will suit better for semantic and accessibilitymargin:0;
to a specific element.* { margin:0; padding:0; }
Have you tried a Mobile-first approach? It's quite a common workflow, you starting with the mobile version and switch to min-width
media queries instead of max-width
. It helps to simplify the CSS code)
@eriandev
Submitted
@sonickonic
Posted
Nice work, it looks great and scales down really good to mobile. Well done! 👍
Please give feedback on my solution.
@sonickonic
Posted
Congrats on submitting your first solution! it looks amazing!
You've currently got two h1 elements, it will be better to use it once as it can cause accessibility issues. Two ways to solve it:
Although it is a pixel perfect solution for the wide-screen, the mobile version is slightly off. Try next time to use min-width media queries instead of max-width. Starting from the mobile-first can lead to more simple solution)
Good job!