Newbie-QR-Code-attempt

Frontend Mentor - QR code component solution

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.

Table of contents

• Overview
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

QR code component challenge is a newbie challenge meant to test one’s understanding of HTML and CSS.

Links

• Solution URL: (https://www.frontendmentor.io/solutions/qr-code-component-attempt-using-html-and-css-ZmprOf1hjl)
• Live Site URL: (https://stain-i.github.io/Newbie-QR-Code-attempt/)

My process

• I started out by writing the HTML code to put up and arrange all the sections.
• Thereafter I embarked on styling the sections in CSS.
• In CSS i started with givng the body a light gray color as in the design provided.
• Then creating a class for the entire content i.e “index-QR-content”, to style the general content.
• I narrowed down the styling to specific parts within the class. I started with the h1 tag, followed by the paragraph tag.

Built with

• HTML
• CSS

What I learned

• As a beginner with, the QR code component being my real first challenge, it helped reinforce my understanding of the basics of HTML, writing and organizing a HTML page. In addition to that, it enabled me practice the basic styling for text in CSS i had grasped from the learning resources i had used.
• Currently, i have abit of grasp on the HTML structuring as well as well text styling in CSS.

<div class="QR-banner">
            <img src="images/image-qr-code.png" alt="QR-code">
        </div>
    <h1>Improve your front-end <br> skills by building projects</h1>

.index-QR-content {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  color: hsl(212, 45%, 89%);
}

Continued development

Styling text in CSS is an area that I am keen to improve on. CSS Styling for images needs more work and practice, which I will develop along as i undertake more challenges and exhaust more learning resources. In regards to HTML, I am keen on improving the developments I have made on structuring and grouping content, as well as proper applications of tags, elements and useful characters.

Useful resources

• Video tutorial - This tutorial helped deepen my understanding of HTML structuring as well as introducing me to CSS. The systematic guidance with freedom to use your own material helped me create an a simple responsive website albeit being on the exact values to use.

Author

• Frontend Mentor - @stain-i