All solutions

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

Hi Folks 👋,

Thank you for reading this.

For this project, I decided to work with Sass and BEM. I have not used CSS preprocessors for a while, and I wanted to revisit them with this project.

I really enjoyed working with Sass, especially with mixins. When I started using Sass years ago, I did not really use them. With this project, I used them for components, such as buttons, typographies, etc. It was so enjoyable that I am sure I will be using Sass again in my future projects.

However, I think I need to improve with BEM. Some parts are okay. I think I understand how to use blocks and elements, but I am not so great with modifiers. I will continue working with it in the future to improve my skills.

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

My challenges were related to Sass architecture. I wanted to create a really solid Sass architecture. I don't think it is perfect yet, but practice makes perfect.

I really tried to use as many mixins and variables as I could. I also tried to decouple the logic between partials.

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

I think a review of my Sass architecture and BEM implementation would be great.

Have a nice day,

Tom.

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

Hi Folks 👋,

Thank you for reading this.

For this project, I wanted to do something more than just working with plain CSS and vanilla JavaScript.

This project uses:

• TypeScript - To be honest, there is not too much of it in the project - it's just a single-page app after all - but it was fun and I really enjoyed using it.
• Tailwind - I was waiting for the right first project on Frontend Mentor to use Tailwind. I decided this one was a good one :).
• Vitest - One of my objectives was to start adding unit tests to my Frontend Mentor projects. I have only one test case. I could have added functional tests, but I thought it was a bit overwhelming.
• GitHub Actions - The project is automatically deployed on GitHub with a build phase thanks to GitHub Actions. It's not perfect yet (I have to do a little tweaking for the index.html file).

I am going to take some time to understand more about Vite, especially Vite config for projects without a front-end framework.

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

Not too many: I wished I had more time to work on it, but these last few weeks have been quite busy.

Decoupling the different parts of the TypeScript/JavaScript was fun, and I had to think a bit before implementing it. I rewrote some parts of the code in order not to use DOM objects and only primitives.

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

Let me know if you find incorrect things in the code or bugs. I think having a bit a feedback on the TypeScript code would be great.

Have a nice day,

Tom.

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

Hi folks, Thanks for reading this!

I managed to use the same element for the tooltip on mobile and desktop. I wasn't really sure at first that I could to that but it worked. Quitte happy with that :). It uses the same JavaScript and CSS code.

Next time, I want to be better with ARIA attributes. I know that my code is accessible but I want to do a better job with that.

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

Not many challenges. The only one I have in mind is related to CSS readability. I wrote some nested CSS, which I do like, but some parts could have maybe been better. I am thinking about the tooltip element on desktop.

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

Mostly the HTML and CSS. I am okay with the JS part.

Have a nice day, Tom.

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

I'm generally happy with the use of CSS Grid. I didn't write too much CSS and the layout is working fine.

I tried to make the design as close as possible, especially on desktop but I didn't achieve it. I didn't want to use too many pixel values otherwise the project would have been too "blocked".

I am going to continue studying grid :).

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

The desktop version was the most challenging. With grid template areas, I managed to make the design looks close to the wireframes but it could be improve.

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

Having advice about CSS Grid is always welcome :).

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

Hey, thank you for reading this!

I started to use clamp css function. For a long time, I also used pixels and pourcentages instead of REM. I'm not fully happy about my skills even though it looks okay. I'm probably going to follow one or two courses before reworking on my projects.

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

Most of the time, my challenge are related to choosing the right unit and how to display the more pixel perfect with the less amount of CSS.

I read a few stuff on web.dev: it's a great ressource but I'd like to find other ressources.

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

By giving me advice about my use of CSS unit. Should I use for example ch instead of pourcentages, em, or rem?

Thank you for passing by, Tom.

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

Continuing using REM instead of pixels: quite happy with it. Next time, I'll use more utility classes and to more dry CSS code;

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

I didn't know about ::marker /°

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

Semantic and pixel perfect styling :)

Thank you, Tom!

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

Thanks to @Islandstone89, I decided to switch from pixels to rem. I add to make some caculations but it seems to work on different screen sizes and resolutions.

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

It's the first time in 10 years I use only rem instead of pixels and pourcentages :).

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

I'd like to have to feedback about the project, the code, and how accessible it is.

Thank you, Tom!

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

I'm trying to do the work as pixel perfect as possible :)

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

Some stuff with the resolution and spacing (espiacially between p tags).

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

I just want to be sure that the project displays well on different resolutions and screensizes.

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

I didn't write to many lines of CSS when working on the project.

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

Not too many, maybe the box-shadow :).

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

Just want to be sure that the screen resolutions are okay.

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

I did this challenge a few months ago. I'll probably go back to it shortly to integrate my new knowledge.

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

/

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

/