@NickSokoloffSubmitted 12 months ago
I've used only CSS box model.
Would be nice if someone shares any ideas of how to make it simplier/better with this approach.
Thank you
Ewa
@zalewskaewa7All comments
- @zalewskaewa7Posted 12 months ago
Hi! , congrats on completing this challenge πππ₯³π₯³
Here some tips to improve your solution. π―π
HTML:
Your main content should be conteined in the main tag. More info HERE
Header elements implements six levels h1-h6, with h1 being the most important and h6 being the least important. avoid omitting header levels, your page should start with the header h1 and successively with h2...h6. More info HERE
Your solution is very good, keep it up!
Happy coding π
Marked as helpful0 - @eghosaclintonSubmitted 12 months ago
I have no questions.
However, I am very open to criticism, so please recommend CSS best practices I should consider
Or identify any short-comings with my code or approach to this challenge.
Thanks in advance!
@zalewskaewa7Posted 12 months agoHi! , congrats on completing this challenge πππ₯³π₯³
Here some tips to improve your solution. π―π
HTML:
Your main content should be conteined in the main tag. More info HERE
Header elements implements six levels h1-h6, with h1 being the most important and h6 being the least important. avoid omitting header levels, your page should start with the header h1 and successively with h2...h6. More info HERE
For responsive css you need using flexbox (more information here ) To make your page responsive, do the following:
.container {
width: 90%;
display: flex;
justify-content: center;
align-items: center;
max-width: 300px;
}
Then you don't need media queries in this project.
Your solution is very good, keep it up!
Happy coding π
1 - @kazemghzSubmitted 12 months ago
i'm unsure about responsive in small devices
@zalewskaewa7Posted 12 months agoHi! , congrats on completing this challenge πππ₯³π₯³
Here some tips to improve your solution. π―π
HTML:
Your main content should be conteined in the main tag. More info HERE
Header elements implements six levels h1-h6, with h1 being the most important and h6 being the least important. avoid omitting header levels, your page should start with the header h1 and successively with h2...h6. More info HERE
To make your page responsive, do the following:
.container { /* width: 100vw;
height: 100vh; <- delete this*/
width: 90%; /* <- add this rule */
display: flex;
justify-content: center;
align-items: center;
max-width: 300px; /* <- add this rule */ }
Your solution is very good, keep it up!
Happy coding π
Marked as helpful0 - @ChewingOnCodeSubmitted about 1 year agoWhat are you most proud of, and what would you do differently next time?
I'm most proud that I got it almost 100% exactly like the review without the Figma file
What challenges did you encounter, and how did you overcome them?None really
What specific areas of your project would you like help with?None really at this time
@zalewskaewa7Posted about 1 year agoHello, Your solution is very good.
In the future try also flexbox. Grid and scss is more complicated. Here is very good site to learn flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In file style-guide.md you can see whitch colors to use and another informarions about project.
Color for <p> .card-info change for Grayish blue.
Keep it up and don't give up!
Marked as helpful1
