P
@163rohanreddy
Latest comments
- @AMALK319
Well Done. Good Luck!
- P@eirosiuss@AMALK319
Well done. Good luck!
- @SortJakke@AMALK319
Well Done
- @dongkp96What are you most proud of, and what would you do differently next time?
I think I am most proud of how I flipped to desktop first vs mobile first process and was able to break down the element design little by little without any excessive confusion. I think I would try not using any margin on the cards to create separation and implement grid right away. I kept getting confused of why the vertical gap between my cards were so big until I found out I had a margin-block-end on them.
What challenges did you encounter, and how did you overcome them?I think my challenge was using CSS grid, I was rusty in the area and had a little difficulty trying to position all the items. I lack fundamental knowledge of what properties were available such as using grid template area vs grid-template columns combined with grid-template rows initially and it confused me when I tried to implement it the latter. I overcame this by doing research on google and playing around with the properties.
What specific areas of your project would you like help with?-Can someone explain how you can use grid-column and grid-row to make certain items span certain areas -Can someone explain how to make sure my project fits the screen and is not oversized or anything? Also to make sure proportions are correct with my solution. I can see that it is bulky compared to the design shown. -How to make text fill out as it is intended to for the entire space of an element?
@AMALK319Well Done
- P@j3dd3rsWhat are you most proud of, and what would you do differently next time?
I managed to apply my CSS grid skills to create the grid and then adapted it to be responsive by changing the amount of columns.
What challenges did you encounter, and how did you overcome them?Getting the 1-2-1 card pattern was something I had the right idea for, but the wrong implementation at first. So after a quick search, I managed to solve that issue and get them to be as expected.
What specific areas of your project would you like help with?Just reviewing if there was a more efficient way to do the card restructure, or if that is the best way to go about it.
@AMALK319Well done
- @Dani234jfWhat challenges did you encounter, and how did you overcome them?
I needed to replace an image based on the window width, so I used a
pictureelement to include both versions and controlled which one was displayed using a media query, as follows:<picture> <source srcset="images/image1.jpg" media="(min-width: 801px)"> <img src="images/image2.jpg" alt="Responsive image"> </picture>@AMALK319Well Done!
