What are you most proud of, and what would you do differently next time?
I'm proud of getting the solution done and making the grid layout responsive to different screen sizes.
What challenges did you encounter, and how did you overcome them?
This project pushed my knowledge about CSS Grid and I learned a lot about grid template and grid area during the challenge. I recommend this video to anyone struggling with CSS Grid: Learn CSS Grid - A 13 Minute Deep Dive
What specific areas of your project would you like help with?
Any tips about CSS Grid or general code quality are welcome!
What specific areas of your project would you like help with?
Any tips regarding SASS or CSS Grid will be highly appreciated. I would also appreciate feedback about my code quality, if you find anything that could be improved please let me know!
What are you most proud of, and what would you do differently next time?
I learned how to adapt to different screen sizes using CSS Flexbox. I achieved this by separating the image from the rest of the card content inside a flexbox and changing the flex-direction property depending on the screen size.
What challenges did you encounter, and how did you overcome them?
When first styling the page margin I wanted the top margin to grow based on the device width for desktop users, but it can't be too big. At first I used a "fake" margin with divs at the top/bottom of the document to make use of the max-height property in CSS. But later I styled the page margin using padding: min(calc((100svw - 736px) / 2), 8rem); to the document body. The min function takes the first value separated by a comma as the preferred value and the second as the maximum value.
What are you most proud of, and what would you do differently next time?
With this project I was able to better understand concepts like the CSS Box Model and also CSS Grid.
What challenges did you encounter, and how did you overcome them?
Aligning the social buttons was difficult. I started by using Flexbox on button elements but later decided to use Grid instead. This is where I learned more about the Box Model and CSS Grid, I used tags instead and managed to align the elements using CSS Grid
What specific areas of your project would you like help with?
I am looking to get feedback about the quality of the code that I've written, I tried my best to code while following best practices but maybe I missed something. I'm open to feedbacks for accessibility tips and code quality. Any advice will do! Thank you :)
What are you most proud of, and what would you do differently next time?
With this project I was able to learn about using custom fonts using CSS as well as using media query. I also experimented using CSS Flexbox.
This is also my first time using Figma when designing the page and I tried my best to get as close to the design as possible.
What challenges did you encounter, and how did you overcome them?
During this project I had trouble when spacing elements evenly inside the content div when using p and h1 elements. After experimenting with my code for a while, what worked for me was using the following CSS code:
I also had trouble changing the card style when hovering the title. This involves changing the parent element when hovering a child element, in this case the title. What worked for me was using the following CSS selector: .card:has(.title:hover)