Accuratly recreated the design using CSS grid.
LiamHilton
@LiamHiltonAll comments
- @paddypeanutSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?@LiamHiltonPosted about 2 months ago
This seems like a great way to input @media screen for specific classes! great work!
@media screen and (max-width:64rem) { .grid-container { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 18rem); max-width:50rem; } }
@media screen and (min-width: 64rem) { .grid-container { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(4, 9rem); max-width: 70rem; }
.card-2 { grid-column-start: 2; grid-row-start: 1; grid-row-end: 3; } .card-1 { grid-column-start: 1; grid-row-start: 2; grid-row-end: 4; } .card-4 { grid-column-start: 3; grid-row-start: 2; grid-row-end: 4; } .card-3 { grid-column-start: 2; grid-row-start: 3; grid-row-end: 5; }
}
@media screen and (max-width:42rem) { .grid-container { grid-template-columns: 1fr; grid-template-rows: repeat(4, 18rem); width:90%; max-width:25rem }
0 - @Tgimba1Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I am proud to have been able to use all available resources to complete this project. I am willing to complete similar projects with limited time next time.
What challenges did you encounter, and how did you overcome them?I had an issure spacing giving the same height to the two sister containers. I figures it out bu using Flex:1 for both divs.
What specific areas of your project would you like help with?To improve my knowledge in the application of CSS Flexbox.
@LiamHiltonPosted about 2 months agoReally great effort! after looking at your code i will give a few improvements to help with workflow.
- creating a separate CSS link to ensure you have clean code and you can change between windows. This also maintains that if you are building a big website in the future and have a lot of code its easy to locate. Also good practice for once you start to build additional pages for your website as you will repeat the process of a new css file for that particular page. (hopefully that makes sense)
I have found Split up or down to be incredibly useful to visualise all code in front of me on my HTML and CSS too. (if your monitor is in vertical mode)
example:
<!-- my CSS -->
<!-- google fonts --><link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap" rel="stylesheet" />
I will add a link for css-tricks which is a great resource and add flexbox for you.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-stack overflow is also great for asking questions> https://stackoverflow.com
-MDN Web developer is great for information too. https://developer.mozilla.org/en-US/
Have a great day.
0