Skip to content
Submitted 7 months ago

QR Code Card

kepper104•90
@kepper104
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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
    @JoramirJrPosted 7 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
    1
    kepper104•90
    @kepper104Posted 7 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 ;)

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord