Skip to content
Submitted over 1 year ago

QR code component

Amoo Babatunde•230
@Khoded1
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

All feedback is WELCOME, Thank you in advance guys

Community feedback

  • Chamu•13,130
    @ChamuMutezvaPosted over 1 year ago

    Hi Amoo

    Here are some few suggestions regarding your project:

    1. using semantic html where ever possible is advised. Just as an example an element such as the main element can be used in place of the div with the class container. According to MDN HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. In my opinion , a site should at least a main element according to how I understand this explanation. When you string together a bunch of <div> and <span> elements, search engines and assistive technologies have no structure to guide them. They see only a collection of generic content.
    2. Research on CSS modern reset stylesheets, it is important to reset your styles in order to have a site that can look generally the same when viewed from different browsers.
    3. Take note of how the site is displaying towards the bottom, the site is not centered horizontally . This can be done using flex, using margins and padding to center an element can be tricky to keep it responsive
    4. Let the content decides the height of the element , without setting explicit sizes. For example .displays has a height set at 550px, this can have effects is the size is not big enough to accommodate the children - causing an overflow or having some large white space if the contents cannot fill the parent size especially as the screen grows wider.

    If you have questions please do not hesitate to ask me

    Marked as helpful
    2
    Amoo Babatunde•230
    @Khoded1Posted over 1 year ago

    @ChamuMutezva Thank you very much for the enlightment, also i need help with line 2, 3 and 4., most esp line 4, i do get problem with that most of the time....

    please kindly help

    0
    Chamu•13,130
    @ChamuMutezvaPosted over 1 year ago

    @Khoded1

    • Point 2: here is Andy Bell CSS Modern css stylsheet
    • Point 3: I have made some changes to your css to look like below, please asign classes to your elements and use them for styling
    * {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}

body {
font-family: 'Outfit', sans-serif;
background-color: hsl(212, 45%, 89%);
text-align: center;	
min-height: 100vh;	
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
}

.container {
max-width: 20rem;
}

img {
// use a class
/* height: 300px;
width: 300px; */
border-radius: 20px;
margin-top: 20px;
}

.displays {
background-color: hsl(0, 0%, 100%);
/* height: 550px;
width: 350px; */
margin: auto auto;	
border-radius: 20px;
}
.flex {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
margin: auto auto;
text-align: center;
padding-top: 32px;
padding-bottom: 32px;
}

h3 {
// use a class
font-size: 1.2rem;
font-style: bold;
margin: 0;
justify-items: center;
color: hsl(218, 44%, 22%);	
padding-bottom: 32px;
}
p {
// use a class
justify-content: center;
font-size: 1rem;
color: hsl(220, 15%, 55%);
padding-bottom: 32px;	
}
    Marked as helpful
    0
    Amoo Babatunde•230
    @Khoded1Posted over 1 year ago

    Thank you very much, i'll work on the classes too @ChamuMutezva

    0
  • andresantos2460•150
    @andresantos2460Posted over 1 year ago

    Very good, but careful with padding and margins!

    Marked as helpful
    0

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