All solutions

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

This was my first time creating a form from scratch. I learned a lot, including how to create and validate forms, basic form managing in JavaScript, and ARIA attributes that can be good to use with forms.

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

At first, I tried to create the success message using a simple div and position: absolute. But then I remembered the dialog element. This approach made me write less code due to the functions, included in the dialog element. It also made managing the success message easier.

I learned that I can use aria-describedby to get screen readers to read error messages and that I need to use aria-required for required form fields.

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?

Surprisingly, working with JavaScript was not difficult. Although I'm not used to the syntax and had to look up a few things, overall, it went smoothly.

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

I encountered some challenges with positioning the image and the popup for this project. I attempted to make the image adjust its size based on a parenting div, but I struggled with it. The image overflowed its container on mobile, while on larger screens, it appeared too small. Eventually, I opted to move all the styling directly to the image, which I have found to be an easier approach based on my past experience.

Working with position: absolute; elements for the popup was difficult for me as I'm not accustomed to it. It involved a lot of trial and error, and I realized that I need more practice with these kinds of elements. Additionally, I encountered issues with the popup on larger screens because it had to overflow the card. I initially set an overflow: hidden; on the card to automatically adjust the border radiuses of the elements on top of the card, but this approach didn't work due to the popup. Looking back, I could have planned this aspect better to save myself some time.

The biggest challenge I faced was dealing with the popup. It doesn't follow the typical disclosure or modal patterns as it overlaps other elements on the page. I wanted to ensure that the popup didn't render the other content on the page inaccessible, so using a modal pattern was not an option. With assistance from a senior developer, I experimented with the `` element to prevent access to the content behind the popup when it was open. However, I encountered issues with keyboard focus on smaller screens.

Ultimately, I decided to use the inert attribute on the content behind the popup when it was active on mobile. Additionally, I made sure that the focus remained on the button when the popup opened, making it easier to close.

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 learned how to use local JSON data to dynamically populate website content. I used the fetch() API along with the innerHTML property to achieve this. Additionally, I performed a calculation for the total score and made it update dynamically in the HTML based on the JSON data.

If this were a real project, I would have included a method to dynamically calculate the ranking of the results. I considered adding it, but I chose not to because I didn't want to allocate time to create text content for it.

In addition, I learned different methods for creating transitions using the 'background-image' property, which enabled me to create transitions with gradients.

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

I encountered difficulties when adding transitions to the 'background-image' property. After conducting some research, I discovered that you can utilize the background-position to accomplish this.

Another challenge was using local JSON data to dynamically populate website content. I had no idea how to do this when I began the project, and I had to do a lot of research on the fetch() API along with the innerHTML property.

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 challenged myself with this project and decided to learn how to use Sass, Node.js, and how to create package.json files.

As for the actual code, I improved my skills in grid, accessibility, and responsive layouts. The overflow in the hero section was particularly challenging.

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

My biggest challenges were understanding package.json files, organizing and structuring my CSS, and implementing PostCSS. I changed my mind multiple times and had to do a lot of research regarding other people's solutions.

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

I would like some help with reviewing the code. Are there any accessibility issues? Suggestions for code improvement are welcome!

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 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?

This project involved a lot of practicing what I already knew, which is always a valuable experience. However, I did manage to learn something new.

• I practiced using grid more. I'm less confident with it compared to flexbox. I had some layout issues because I forgot about place-items: center;. Managed to figure it out 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?

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?

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 and CUBE CSS methodology 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).

Notes 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?

Basing my code on the CUBE CSS methodology was quite challenging since I'm not used to structuring my code this way. Ultimately, I'm delighted with this approach and excited to learn more about it.

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

I want to continue to focus on trying out this utility class and CUBE CSS approach. It feels like a more professional way to write code - 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.