All solutions

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

• I managed to create my own design system using of SCSS. That system comprises a lot of utility classes that replicates TailwindCSS' system. Also, I have watched Kevin Powell's videos for a long time now and the way I use tokens to abstract the different aspects and variables of the system was inspired from him.

• I also learned how to integrate a few PostCSS plugins to Vite's build process such as @fullhuman/postcss-purgecss, postcss-sort-media-queries and autoprefixer so that the final CSS is the most minimum as possible and to also support the vendor prefixes.

• What would I do differently?

I am not really sure. Perhaps, when dealing with SVG backgrounds next time, I may explore a different way of doing it by combining the clip-path and position properties. Also, I will gradually extend and refactor the design system in place as I go more projects.

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

I will only list a few challenges that stood out the most to me:

• Curvy backgrounds: I had to use Adobe XD to get the full content of the curvy backgrounds' SVGs. Otherwise, if I directly copied the SVG code to the HTML, I would only get a subset of the full SVG. I do not know what might be the cause of this anomaly.
• Missing viewBox property for the Social Media icons: The absence of the viewBox property on the icons' SVGs can lead the drawing being hidden despite the width and height of the SVG being set.
• PostCSS setup with Vite: For my case, Vite only started to take into account the configured PostCSS plugins once the PostCSS configurations were put inside its own separate config file postcss.config.js.
• PostCSS effects only for build process: I also wanted the PostCSS plugins to take effect only in the production branch because I didn't want the transformations processes to slow down even more the SCSS pre-processing that is already pretty heavy during development. To achieve that, I just commented the PostCSS plugins configuration in the main while keeping them untouched on the production. That way, only the build process has to take care of all the pre-processing and transformations stuffs that are necessary to the final bundle.

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

I just want to know whether people who tackle those challenges aim for a pixel-perfect solution or not, and if so, I want to know what tools do they leverage for that.

• What did you find difficult while building the project?
• Which areas of your code are you unsure of?
• Do you have any questions about best practices?

Well, this challenge was a good one a practice. I organized my scss files in a certain way but I need to work on a more efficient way of handling that. The html also lacks of aria attributes. The trickiest part was placing the background images at the right position that I failed to reproduce a close version of the bg images to the the ones in the template. What technique did you use for positioning the background images? Also, my navigation bar links box seems to be toggled by default when I view the page on a real mobile device although it is not the case on the mobile view emulator in the browser's dev tools. Have anyone ever faced that issue and what was the solution? Thanks.

What html tags and attributes did you use for the responsive images? Did anyone see that the footer color described in the style guides was not quite the same as the one in the previews?