All solutions

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

This project was great to get more hands-on practice with grid. I have a preference for flexbox since I'm more comfortable with it. So doing more projects focusing on grid will help me choose the best tool for the job.

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

N/A

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

N/A

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

This project was a lot of practicing what I already knew (which is always a good experience). But, as always, I did learn something new.

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

• I got some more practice with grid. Compared to flexbox I'm not confident with this one. I had some issues with the layout since I completely forgot that place-items: center; exists. Got there in the end!

• I also learned how to use the data-* attribute to write shorter and cleaner CSS.

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

N/A

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

For this project, I continued working with utility classes and began learning about the CUBE CSS methodology. It's still very new to me, so keep your expectations low.

I also learned...

• ... that margin-inline & margin-block (or padding) is a thing. I'm never going back to just margin!

• ... about the visually-hidden class. I still don't fully understand all of the attributes though.

• ... a little more about how to write accessible code.

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

I think accessibility is quite difficult to understand fully. It's probably because I'm not disabled, I never had to use a screen reader or similar. Maybe I need to experiment more before I can fully grasp it.

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

I would love it if someone could skim through my code and give feedback on the CUBE CSS methodology (I'm certain that I missed a few things), as well as if there are any ways for me to improve my code related to accessibility.

I'm also wondering if it's okay to leave section, div, etc. without a class or aria-label for accessibility? All of my "empty" elements looked so empty in the accessibility tree.

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

My biggest takeaway from this challenge is CSS utility classes. I took another approach than I usually do and focused on using utility classes to reduce repeated CSS. It is a smaller project, and it won't ever grow. However, I tried to write my code so that the project could expand without causing issues in the future.

This mind shift was difficult in the beginning. But overall, I like this approach more than what I did before. The code is more fluid, easier to read, and to change (if needed).

Note for the future:

• Place the utility classes last in the CSS code - it should overwrite everything else.
• I used utility classes for color, background-color, font-weight, font-size, font-family, and spacing (named flow). Other styling I did in the CSS file.*
• Use "|" to differentiate utility classes and other classes.

*Mixing utility classes with CSS feels like a good idea. My HTML won't be full of a million classes, and I don't have to repeat basic styling in my CSS file.

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

N/A

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

I want to continue to focus on trying out this utility class approach. It feels like a more professional way to write code - but I'm not 100% sure.

• Is this a good way (understandable, easy to work with, etc.) to write code?
• I'm curious about how professionals usually structure their code and why. Is it in this way? Does it vary a lot depending on the individual and workplace?

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

I've been trying to research more about responsive units and accessibility. I've changed a few things in how I write the code compared to what I did before my research. And I think that I've improved a bit.

I want to use grid more in the future. It's also important to me to continue to learn about best practices and accessibility.

Units like rem and em are still a little unclear to me. I understand what they do. But I don't fully understand when to use what and why. I need to do some more research!

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

During this project, I learned about the 62.5% Font Size Trick. After reading about this topic I understood that this trick is not as great as it sounds. Grace Snow wrote a great article about why. A few articles recommended using CSS variables instead. I can see the advantage of this, especially if I'm using utility classes for the project.

Speaking of utility classes. I just learned that they exist. They don't seem useful for small projects like this one, but I will definitely use them in the future.

I have also been researching when to use grid or flexbox since I'm almost exclusively using flexbox right now. Kevin Powell made an amazing video diving deep into this.

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

I would love to read more about utility classes, responsive units, and accessibility. If someone has some good articles on these topics, please send them my way!

I would also appreciate if someone could answer the following:

• Is there anywhere in my code where it could have been beneficial to use grid instead of flexbox?
• Is it a good idea to set up utility classes and a more comprehensive CSS reset for smaller projects like this one?
• Are there any accessibility improvements I could make to my project?

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

I'm proud of how easy it was for me to write the HTML and CSS. Need to try out a harder challenge soon!

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

I'm bad at estimating the time it takes for me to complete a project. I tend to do other things, lose focus, or have a difficult time beginning the project.

In the future, I want to improve my focus so I can complete the project closer to the estimated timeframe.

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

Any suggestions and comments on how I can improve are welcome!

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

I'm very proud of the progress I've made in learning Git and GitHub. I didn't even know Git existed a few days ago. These tools are very useful, and I'm looking forward to developing my skills with them.

I'll make sure to use responsive instead of absolute link paths next time so I don't have to redo it.

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

I didn't know why my image wasn't showing up on GitHub pages, the Frontend Mentor Discord Community helped me out (I was using absolute link paths).

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

Since I'm still a beginner, I would greatly appreciate it if someone could skim through my code and look for improvements related to accessibility and best practices. I want to ensure that I write as good of a code as possible.