@Danil-ShevchenkoSubmitted about 2 months ago
Rodri
@rcsilva211All comments
- @vknirSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Learning grids was challenging, I was able to get the basics of it.
What specific areas of your project would you like help with?I was not able to control the behavior of quoted texts in this example. Any feedback on that would be much appreciated.
@rcsilva211Posted 2 months agoOverall is well done! I'd only suggest adding a max-width on the grid container in order to not have it as a huge grid for bigger screens. That's just a personal opinion though :)
Marked as helpful1 - @zbuli-tSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
responsive web design make the card different positions
@rcsilva211Posted 2 months agoThe code is bit messy, but the result is there. Personally, I'd use grid or flex to align them instead of static values. Keep it up :)
0 - @Ashwini202213Submitted 2 months ago@rcsilva211Posted 2 months ago
In desktop, the width of the card is a bit too big. Other than that, amazing work!
0 - @LucieLuBSubmitted 2 months ago@rcsilva211Posted 2 months ago
There's an extra border on the bottom table. You can fix it by applying the
:last-of-typepseudo-class. It should look something like this:tr:last-of-type{ border: 0; }Other than that, great job!
Marked as helpful0 - @codewinchesterSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Mastering responsive layouts has been a pain. But, this project is a true testimony that with consistency, something's gotta give. I wish i took kevin powells "Conquering responsive layouts" course earlier. His insights on how to think responsively is what got me here. Seriously, if you want a break, check it out. I am really glad that this design is responsive across all devices and i wasn't forced to use media queries.
What challenges did you encounter, and how did you overcome them?The major challenge was trying to make it responsive using media queries not knowing there was another approach. I was tuck on this loop for a very long time. Trying different device-width ranges and ending up messing.
What specific areas of your project would you like help with?Probably for my fellow community members to review my code and advice on where i should improve.
@rcsilva211Posted 2 months agoWell done on using only flexbox to make it adjustable to any screen! I think the only thing missing here is the hover state on the social media links (tip: they should be <a href=""> tags). Other than that, fantastic job mate!
0 - @Sudhanshu943Submitted 2 months ago@rcsilva211Posted 2 months ago
The font-size for the texts seems a bit too big compared to the design. Other than that, looks great!
0 - @Paulo-AdrianoSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Me orgulho de ter feito de outra maneira o desafio proposto, mesmo sem ter concluído tudo. não faço faculdade ou nenhum curso dedicado da área, a penas pelo YouTube mesmo, sei que tenho que ir mais afundo para ter conhecimento necessário pra pode conclui.
What challenges did you encounter, and how did you overcome them?Em relação as sombras, vi o código de algumas pessoas, e elas fizeram o desafio totalmente diferente do meu, com assunto que eu ainda não tive oportunidade de estudar.
Estou aberto a feedbacks construtivos!
What specific areas of your project would you like help with?Em relação as sombras, porque eu fiz a centralização baseadas nas position:relative e position:absolute , por hora desconheço formas de centralizar as caixas, ate então as sombras não ficam de jeito nenhum a minha div MAN.
@rcsilva211Posted 2 months agoThe border around the container is missing and the shadow behind the container too. The border is 1px solid hsl(0, 0%, 7%); As for the box-shadow, I suggest you to play with this website to get the end result: CSSMatic - Box Shadow CSS Generator. You can do this mate!
Marked as helpful0 - @IrineuRasteroSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
Being able to code my first page without handholding. I would like to do it faster next time :-D
What challenges did you encounter, and how did you overcome them?The biggest challenge for me was centralizing the main element of the page while making it responsive, as said in the title I overcame this fixing the position to the center of the screen with the following snippet:
What specific areas of your project would you like help with?position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);I would like to know how to get the feel for the size of the things on the preview, this was also one of the things I had difficulty with.
@rcsilva211Posted 3 months agoThe solution itself is great for this example, but from experience and after you've mentioned you fix to center the container, I can share that display: flex already does that for you :)
Here's my snippet:
.container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: hsl(212, 45%, 89%); }When setting the width and height to 100%, the container will occupy the entirety of its parent, in this case being the body. The display: flex will make it can be automatically be arranged keeping in consideration the elements inside; The justify-content: center will make it so it distributes the contents around the container (in this case, will place them to the center); The align-items: center will align all the contents of the flexbox in the vertical axis.
You can check W3Schools for more information about this: CSS Flexbox Container - W3 Schools
Marked as helpful0
