All solutions

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

I successfully implemented a custom theme, and I enjoy the end design! I'm also getting used to BEM notation, which I appreciate.

Nonetheless, I feel like I've used far too many grids. Thankfully, the website lacks unexpected overflows. I may check other solutions for diverse approaches.

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

No challenges encountered. I've made a very similar site before.

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

Any alternate ways of making the layout are welcome, I used display: grid pretty much everywhere.

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

I experimented with background gradients and box shadows for this challenge, which resulted in pretty cool designs! I'd like to implement these in my next personal projects.

Additionally, I hope to use BEM notation more frequently in the future. It makes it so much easier to understand what's going on when you return to an old project.

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

I hadn't worked much with box shadows before, so I had to look up the documentation for help. Nonetheless, there wasn't anything too complex to solve.

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

Using background-attachment: fixed caused an empty bar at the bottom when scrolling down on mobile. Despite searching extensively, I couldn't find a fix, so I had to disable fixed on mobile and use scroll instead.

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

In this project I implemented:

• BEM notation
• Custom CSS properties
• Media queries
• Mobile-first approach
• Semantic HTML
• Responsive design
• Grid areas

If I had to change something, I'd like to analyze the given design beforehand to figure out the least extensive route instead of jumping right into the CSS, this way I may be able to write less code than it's really needed.

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

It was my first time using grid areas, but they were very straightforward so everything turned out fine!

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

I'd be interested in seeing different approaches to this challenge that contain less CSS.

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

Following Kevin Powell's approach for reference, I was able to implement:

• BEM notation
• Variable custom CSS properties
• Visually hidden elements for accessibility
• Data icons

I wouldn't want to do anything differently so far, I'd like to take into account the things I learned for future projects. Moreover, analyzing other people's code was highly beneficial!

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

The margins of the html and body tags were conflicting with my grids, so I had to change a few properties:

• Changed the height of the html, body selector from height: 100%; to min-height: 100svh.
• Swapped the outer margin for a padding property.

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

I'm curious about the distinct behaviors of the body and html tags if anyone has resources about them!