Frontend Mentor | QR Code Card coding challenge solution

Solution retrospective

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

I've set up a cool home/landing page that will contain links to all my future projects and put my first project, the QR Code, on it. Nothing I would do differently, it was a pretty small project.

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

Hosting the solution online, as creating a separate repo for each micro-page would be really cumbersome. I made a pretty aesthetically pleasing landing page (really proud of it) and a mono-repo SvelteKit + Tailwind app that will have all the projects in it.

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

As I am using Tailwind, usually my colors are just classes in the HTML. However because of the provided style guide with color codes I had to create separate CSS classes like so:

.text-paragraph-color {
    color: hsl(220, 15%, 55%);
}
.background-color {
    background-color: hsl(212, 45%, 89%);
}

Fortunately, because of Svelte CSS classes encapsulation and syntax, i just put style tags beside main HTML and used the custom color classes alongside Tailwind ones.

Community feedback

Joramir Jr.• 250

@JoramirJr

Posted 5 months ago

Hey, @kepper104!

Your solutions looks great!

One tip I'd give you is to use the tailwind.config file for every style related to your overall project; meaning, styling that tend to be shared throughout the project; one recurrent example of that are font patterns, as is usually described on the style guide.

For example, when it comes to fonts, I import them on my main.css file like so:

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@200;400&family=Bellefair:wght@200;400&display=swap');

Check out the file for the example above

then, on my tailwind.config, I usually do something like the following, as a key/value pair of the 'theme' object:

  fontFamily: {
      'Bellefair-Regular': ["Bellefair", "serif"],
      'Barlow-Condensed-Regular': ["Barlow Condensed", "sans-serif"],
    },

Check out the file for the example above

By gathering/organizing all of the default/shared styling in the tailwind.config file, you will better utilize the capabilities that TailwindCSS has to offer.

Btw, I have also used Svelte on recent projects; great tool!

Hope my tips are helpful!

Marked as helpful

kepper104• 90

@kepper104

Posted 5 months ago

@JoramirJr Wow, thanks so much for the feedback!

The reason I imported fonts inside each +page file separately was that I wanted to atomize each project and make each independent from the main Sveltekit server app. But I guess it indeed would be better to utilize the Tailwind functionality of adding a custom font app-wide and then using auto-generated Tailwind classes.

Thanks for the tip and the examples! Going to now go and change my imports ;)

QR Code Card

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community