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
Looking good! Just a few things that need to be changed:
Otherwise, good job!
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!!!!!!!!
The profile pic, name, date, and share button are a bit too low, otherwise it looks good!
Great work!
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.
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).
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!
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
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?
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.
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.
