This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
This challenge involves making a QR card component with a QR code picture in the upper half and a header and description text in the lower half. The card is centered, both vertically as well as horizontally, in the screen and has a very light shadow behind it.
I started with visualizing roughly how many tags I'll be using, and the colors (whether it will be hard-coded or be through variables).
I then looked through what resources I had available in the style-guide.md file (should have done this first, will keep this in mind next time), and copied them to my CSS file.
I then started with coding the HTML file and putting the unstyled elements in to make a rough skeleton while also styling them side by side.
First I created the card component and re-sized it as close to the preview image as possible. Then I began with the QR code picture, fixed its size, and then finally started the text section. After this, I used the provided colors for BG and texts, while going through the finer details, like border radius, margins, box shadow, etc.
In the end, I moved my CSS file to 'assets/styles' from assets to structure it a bit more
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
This was my first attempt at coding something in front end on my own outside of work since 2 years. Following are some of the things I learned and experienced:
-
I had read many good things online about using rem (or root em) instead of px when defining sizes. This was my first time actually experiencing it. I had coded the whole challenge and at the final stage found my component's size a bit too big. Since I had coded this rem, I just had to manipulate the font-size in the :root pseudo class and everything adjusted on its own.
-
I found that matching my component's size and looks exactly to the preview image's was too time-consuming. It would have been much quicker if I had access to the Figma files. This shows the power Figma/Sketch or any design files have when coding, they provide you with a direction, a blueprint when you get stuck while coding, preventing you from thinking too much about trivial details.
-
The developer in the video I watched for this challenge's Netlify deployment said that the body's height should be calculated as calc(100vh - 1px) as this converts the units to px. This is done because using vh as height on mobile screens causes the components to re-adjust when the height changes, causing a jittery/shaky effect. I, however, didn't do this because I didn't see that jittery effect on my system, even in the mobile screen mode in the browser.
-
When I last deployed something on my own (~ 2 years ago), Heroku was the most famous tool for that. Nowadays, it's Vercel and Netlify seem to be more popular. I will be deploying my code on Netlify after a quick read-through of Vercel vs Netlify. It seems that Netlify is better for client-side, static applications, while Vercel is good for server-side rendering and back-end work.
-
I learned that :root pseudo class and html selector target the same element () in the document tree, but the :root pseudo class has a higher specificity.
-
I also learned the difference between importing multiple stylesheets in your html file vs using @import to import multiple stylesheets into a CSS file and importing that single stylesheet in your html file. Importing multiple stylesheets is useful for providing alternate stylesheets when you want to ensure that your app works on multiple browsers (Chrome, Firefox, Safari, etc.), while @import is useful when you want to use multiple stylesheets on an HTML page while including only a single link in the document's head.
Edit:
-
I knew it's a good practice to use CSS resets, but only realized it's importance after trying to implement the feedbacks. According trying to implement one feedback (Should use meaningful tags wherever possible (like h1 for headings, p for paragraphs, etc.)), I needed to replace a div with a h1, but found that h1 by default has some top and bottom margin. I added a CSS reset after this. (However, I'm still using content-box for now).
-
I knew about accessibilty but never really implemented it before. The generated solution report advised that all the content should be inside landmark elements (
, , , ) which are special regions on the page to which screen readers and other assistive technologies can jump. Implementing these landmark elements should increase the accessibility through screen readers.
:root{
`
`
`
`
font-size: 14.5px;
}
Helped me re-adjust the size of the component by making changes in just 1 place- I've had a lot of practice with Flexbox. For the upcoming projects, I will pick up CSS Grid.
- Since this was a small project there was not much need for file structure management, but for bigger projects in the future, I want to be able to structure files according to the standards followed by developers so that anyone can easily go through and understand my code.
- I'll also start using Vue in the upcoming levels, and will also try my hand at Nuxt.js when I want to play with server-side rendering.
- QR Code Component - Frontend Mentor Challenge - This helped me learn that mobile screens can get shaky if I use vh for height which is dynamic, instead of px, which is static.
- MDN Web Docs - :root - This is the official MDN documentation describing the :root pseudo class and how it's different from the html selector.
- What's the Difference Between @import and Link for CSS? - This is where I learned when to use multiple vs when to use @import.
- Frontend Mentor - @mehra-sourav
- Twitter - @Souravmehra
[@vanzasetia] https://www.frontendmentor.io/profile/vanzasetia [@juanpb96] https://www.frontendmentor.io/profile/juanpb96
A big shout out to Vanza and Juan who helped me improve my code through feedback and suggestions, by helping me think things through in a new way and helping me get unstuck where I was stuck.