@mellingh
@morshed-murad
Submitted
What are you most proud of, and what would you do differently next time?
it was good
What challenges did you encounter, and how did you overcome them?
best challenge
What specific areas of your project would you like help with?
great
@mellingh
Posted
Looking good! Just a few things that need to be changed:
Otherwise, good job!
@Iamtrieves
Submitted
What are you most proud of, and what would you do differently next time?
This is my first JavaScript code written and although it took me some time to figure it out and alot of help phew i did it
What challenges did you encounter, and how did you overcome them?
JS!!!!!!!!
What specific areas of your project would you like help with?
JS!!!!!!!!
@mellingh
Posted
The profile pic, name, date, and share button are a bit too low, otherwise it looks good!
Great work!
@MuhammadSaadZeb
Submitted
@mellingh
Posted
Nice!
Marked as helpful
@jasoneczek
Submitted
What are you most proud of, and what would you do differently next time?
In this challenge I used a combination of custom properties, a media query and responsive sizing using the clamp() function. With these tools and the Figma file, I was able to achieve the responsive layout, and make smooth sizing transitions for elements like the h1 and the icons, and padding differences inside and between the cards. Next time I might use grid-template-areas instead of using line based placement when working with grid.
What challenges did you encounter, and how did you overcome them?
Getting the sizing to match the design/Figma files as close as possible took some trial and error. First I matched as close as possible to the mobile using static sizing in rem units. When that looked good, I noted what differences I saw in the desktop version. Where I thought it would be a good opportunity to use a function to fluidly transition to different font sizes and/or padding, I tinkered with clamp() and the devtools responsive view until my sizes were matching in both mobile and desktop. By 'sizes', I mean the h1, icons, and spacing (padding, margin, gap).
What specific areas of your project would you like help with?
There were several decisions I made that I had doubts about being the best practice, so I will explain my thought process, and if you see how I can improve please let me know:
I used flexbox in the body, and grid only in the wrapper which contains the 4 cards. I needed just a one-directional vertical alignment to stack my and. Inside my element, I have an which contains my and. I didn't see any need to include those in and complicate the grid.
I do wonder if this is good use of the element. I thought since there is no navigation here, wouldn't be correct.
For the cards I used and for each card. Is this the right situation for use a list for cards, and if so, when is it correct to add the attribute role="list"?
Implementation of the grid itself. It was easy to get the layout here, but it could have been done also using `grid-template-areas'. I like using the shorthand:
.card-1 {
grid-area: 2 / 1 / 4 / 2;
}
But if this is not recommended then I want to correct my ways.
Thank you!
@mellingh
Posted
Looking good! Great work!
@SIRSAMUEL014
Submitted
What are you most proud of, and what would you do differently next time?
GROWTH.
What challenges did you encounter, and how did you overcome them?
I encountered challenge when forming the table and creating the list.
What specific areas of your project would you like help with?
Javascript
@mellingh
Posted
Nice!!
@Mahendran-C
Submitted
What are you most proud of, and what would you do differently next time?
Completed the challenge.
What challenges did you encounter, and how did you overcome them?
given links to full width
What specific areas of your project would you like help with?
what are the major css functions?
@mellingh
Posted
Nice job!!! Looking good!
@GabrielRavaliaLopes
Submitted
What are you most proud of, and what would you do differently next time?
Talvez o responsivo desse site(deixaria melhor rs)
What challenges did you encounter, and how did you overcome them?
No responsivo, mas não consegui superar 100%
What specific areas of your project would you like help with?
Encaixar no responsivo do mobile… ficou meio estranho. Aceito dicas de ajuste.
@mellingh
Posted
Looking good, use:
to get rid of the weird margin on the right of the image.
Also add some more margin on your container div for e.g., (margin: 200px auto;) and some more padding to your container div at the bottom or increase the general height.
@Kreshniki
Submitted
@mellingh
Posted
Looks great, maybe just reduce the font size a bit.
