@PaletteJack
Posted
That's awesome, I would say pretty good for your first project using flex! So in my experience, flex works really well at positioning things within a component (like a card or a navbar), but it's harder to get the elements how you want them for page layouts like this. What I think might help you out is to use grid. Grid makes these sectional layouts much easier and you can use it to clearly set columns and rows for content (then you can style the content within using flex). Here's a helpful video from fireship that I found useful: https://www.youtube.com/watch?v=uuOXPWCh-6o
I had a lot of issues with getting the fonts right too. I ended up using font-weight: 900 for the "Barlow" font. From what i've read, there's some inconsistency between browsers and what font weights are available, so the browser will just grab the closest matching one. Tested on Brave, Firefox, Chrome, and Opera. It drove me crazy!
For the colored underline under the "Learn More" parts, what i did for mine was wrap the anchor tag in a div called 'wrapper', then placed one more div right after the anchor tag. After that, I used position: relative; for the wrapper and position: absolute; on the div after the a tag. From there, I just set the background-color and width and height and used top + left to position it under LEARN MORE. This sets it so that it always positions itself relative to the parent tag (the wrapper). Also Z-index to make sure that the words showed up up front.
But congrats on finishing the project! I look forward to seeing the next one
Marked as helpful
