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.
- Solution URL: Repositório Github
- Live Site URL: Github Pages | Vercel
- Semantic HTML5 markup
- CSS custom properties
- Reset CSS
- Flexbox
- Mobile-first workflow
In this challenge, I tried to practice the concept of HTML5 semantic structuring, aiming to make the content clearer both for programmers and for browsers and other engines that process this information.
<body>
<main>
<section>
<header>
<h1>Title</h1>
<img>
</header>
<p>Contents</p>
</section>
</main>
<footer>
<p>Description</p>
</footer>
</body>Also, I first used the "Reset CSS". The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
I intend to develop more pages using only HTML and CSS to consolidate the concepts of "HTML5 Semantic" and "Flexbox".
- MDN Reference - MDN Web Docs has the most up-to-date and accurate information and the content is presented in an easy-to-understand manner;
- Reset CSS - The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on;
- Linkedin - Mayke Willans
- Frontend Mentor - @maykew