All solutions

What are you most proud of, and what would you do differently next time?

I am most proud of the following:

• implementing a mobile first, responsive, CSS grid layout. I feel that it works quite nicely!
• further practicing the usage of Sass in my projects

(also, I added some glowing hover effects to the cards for that extra ✨polish✨. I think it looks really cool, you should check it out should you get the chance! 😎)

What challenges did you encounter, and how did you overcome them?

I struggled a bit at first with the grid layout, as I was a bit rusty in implementing it. Nothing that Google couldn't help with, and honestly the implementation was pretty smooth thanks to proper structure ahead of time.

What specific areas of your project would you like help with?

I'd love some tips regarding proper semantic html elements. I still struggle in confidently choosing the proper elements for my page structure.

... the sizing isn't perfect on all the elements, but it's close enough (and I don't have pro for the design docs yet 😭) so I'm just going to leave it as is and keep grinding more projects out.

What are you most proud of, and what would you do differently next time?

I am proud of setting up and using Sass for the first time - I attempted it about a year ago when I was much newer to dev, with no luck then. Much easier setup this time. :)

Also picked up the BEM naming convention for css, it makes it much easier to understand my css as I work through it. Still need some more practice with this.

What challenges did you encounter, and how did you overcome them?

Getting the formatting of the card correct. It wasn't scaling properly when shifting to desktop view, so I ended up gutting the project after the initial commit and starting fresh. It's not perfect, but looks much better now!

What specific areas of your project would you like help with?

(ignore this, I assumed that the card was larger than it actually was)

Some help with the scaling of the desktop card would be nice - I would like it to be maybe 90% of it's current size, but couldn't get the image to scale properly. It might be due to my img container formatting.

What are you most proud of, and what would you do differently next time?

I am proud of my html structure - it may not be the best, but I tried to keep it as organized as was within my ability. Next time, I would structure my site out sooner, so as to keep the css cleaner.

Also, I used rem instead of px for my scaling. :)

What challenges did you encounter, and how did you overcome them?

Styling both list bullet points, as well as tables, was relatively new to me. I just haven't had the need to style them leading up to this project. Thankfully, with the help of Google, it was pretty simple to figure out.

Also had a fun moment with the card width not filling the screen on mobile ratios. Turned out I was setting the card width in the media query, but was using max-width for the card earlier in the project, which overrode the query. Using max-width for both fixed the issue.

What specific areas of your project would you like help with?

My scaling seems to be a bit off... I used a base font size of 16px, and yet it looks smaller than the solution comparison. Any feedback about that would be appreciated!

There are also a couple places where the spacing or font-weights might be off, I plan on going back through at some point to clean that up.

What are you most proud of, and what would you do differently next time?

Not much to say on this one, though I am proud of the focused styling of the links.

What challenges did you encounter, and how did you overcome them?

As mentioned above, the styling of the focused links. The idea was for the links to display the same whether hovering over them, or tabbing through them. I went with the following solution:

li:hover {
    opacity: 80%;
    cursor: pointer;
}

li:has(a:focus) {
    opacity: 80%;
}

a:focus {
    outline: none;
}

What specific areas of your project would you like help with?

The background image I used loads slowly, most likely due to the resolution. I plan on returning and fixing this. I'd like a way to load higher res images as needed based on the screen resolution.

On the topic of resolutions, I should probably switch from px to rem if I will be developing for resolution compatibility sake.

What are you most proud of, and what would you do differently next time?

I am most proud of achieving mobile responsiveness with the card, however, I would probably look for a cleaner way to achieve the scaling text next time.

What challenges did you encounter, and how did you overcome them?

I had an issue with the svg image not scaling to the size of the card - it worked fine until shrinking the bounds of the screen, whereupon the card would not adjust it's size. It was able to do this if I removed the svg, and thus determined it was an image scaling issue. I ended up using the following solution:

.article-illustration {
    max-width: 100%;
    border-radius: 8px;
}

For the scaling text, I used the clamp tool as follows:

h1 {
    font-size: clamp(1.2rem, 5.5vw, 1.5rem);
    font-weight: 900;
}

p {
    font-size: clamp(0.8rem, 3.6vw, 1rem);
}

This works, however it was a bit clumsy trying to find the right vw amounts to get them both to shrink consistently with each other.

What specific areas of your project would you like help with?

I would appreciate a better solution for the responsive text, thanks!

What are you most proud of, and what would you do differently next time?

I am proud of remembering the fundamentals, as I haven't touched web dev for a few months. I can't think of anything I would've done differently for this (it is just a simple card after all).

What challenges did you encounter, and how did you overcome them?

I forgot how to create proper responsive images, and did some research into how to do so. I ended up going with this approach:

img {
    max-inline-size: 100%;
    block-size: auto;
    border-radius: 12px;
}

max-inline-size was a new one for me, I've never done responsive images with that line before. I quite like it!

What specific areas of your project would you like help with?

N/A