All comments

alihaydar28•30
@alihaydar28Submitted almost 2 years ago
I found putting some spacing between text and card a bit challenging so I hope anyone can help. also any feedback would be great since i'm still a beginner
QR code using flexbox in CSS
3
Jeroen Leijnse•1,420
@jrleijnsePosted almost 2 years ago
Hey there! Great job completing your first challenge! 🎊

I have some suggestions for your code that might interest you.

HTML 📄:

Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.

If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to frontendmentor.io

CSS 🎨:

Removing the margin-top from the <h1> element and removing all margin from the <p> element and then adding some padding to the <div class="text"> should fix your issue.

To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

For more information on this topic, you can read the following article: PX or REM in CSS? 📘

To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example: @media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.

For more information on this topic, you can read the following article: Media queries 📘

An easy way to quickly and automatically center your <main> element inside the <body> of your page, is by setting the following properties onto the <body> element inside your CSS like so: body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }

I hope you find my suggestions useful, and above all: the solution you provided is very good!

Keep it up and happy coding! 😃
Marked as helpful
1
takieeldeen•30
@takieeldeenSubmitted almost 2 years ago
QR Box
2
Jeroen Leijnse•1,420
@jrleijnsePosted almost 2 years ago
Hey there! Great job completing your first challenge! 🎊

I have some suggestions for your code that might interest you.

HTML 📄:

Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.

If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to frontendmentor.io

CSS 🎨:

For a better file structure (especially when you start building bigger and bigger projects), place your CSS code in a separate file (for example: style.css) and move the code located within the tag inside your HTML to the style.css file. Afterwards, don't forget to link the CSS file to your HTML file using the <link> tag and placing it inside of your <head> tag in your HTML. For example: <link rel="stylesheet" href="./style.css"/>.

To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example: @media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.

For more information on this topic, you can read the following article: Media queries 📘

I hope you find my suggestions useful, and above all: the solution you provided is very good!

Keep it up and happy coding! 😃
0
Khazri71•60
@Khazri71Submitted almost 2 years ago
Qr Code HTML5 and CSS3
1
Jeroen Leijnse•1,420
@jrleijnsePosted almost 2 years ago
Hey there! Great job completing your first challenge! 🎊

I have some suggestions for your code that might interest you.

HTML 📄:

Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.

If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to frontendmentor.io

CSS 🎨:

To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

For more information on this topic, you can read the following article: PX or REM in CSS? 📘

An easy way to quickly and automatically center your <main> element inside the <body> of your page, is by setting the following properties onto the <body> element inside your CSS like so: body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }

I hope you find my suggestions useful, and above all: the solution you provided is very good!

Keep it up and happy coding! 😃
Marked as helpful
0
kingAuthor1212•10
@kingAuthor1212Submitted almost 2 years ago
qr-code { HTML, CSS }
1
Jeroen Leijnse•1,420
@jrleijnsePosted almost 2 years ago
Hey there! Great job completing your first challenge! 🎊

I have some suggestions for your code that might interest you.

HTML 📄:

If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to frontendmentor.io

Try using the font that is provided in the style-guide file. You can do this by generating the font using the link in the styling-guide and paste the <link> inside of the <head> in your <HTML>.

CSS 🎨:

For a better file structure (especially when you start building bigger and bigger projects), place your CSS code in a separate file (for example: style.css) and move the code located within the tag inside your HTML to the style.css file. Afterwards, don't forget to link the CSS file to your HTML file using the <link> tag and placing it inside of your <head> tag in your HTML. For example: <link rel="stylesheet" href="./style.css"/>.

To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

For more information on this topic, you can read the following article: PX or REM in CSS? 📘

To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example: @media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.

For more information on this topic, you can read the following article: Media queries 📘

I hope you find my suggestions useful, and above all: the solution you provided is very good!

Keep it up and happy coding! 😃
0
David Potter•105
@siriusdaveSubmitted almost 2 years ago
QR-code-component
1
Jeroen Leijnse•1,420
@jrleijnsePosted almost 2 years ago
Hey there! Great job completing your first challenge! 🎊

I have some suggestions for your code that might interest you.

HTML 📄:

Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.

If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to frontendmentor.io

CSS 🎨:

To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

For more information on this topic, you can read the following article: PX or REM in CSS? 📘

To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example: @media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.

For more information on this topic, you can read the following article: Media queries 📘

I hope you find my suggestions useful, and above all: the solution you provided is very good!

Keep it up and happy coding! 😃
0
Adafin Titus Olayemi•70
@Pinnacle007Submitted almost 2 years ago
Responsive QC code, using html and css
1
Jeroen Leijnse•1,420
@jrleijnsePosted almost 2 years ago
Hey there! Great job completing your first challenge! 🎊

I have some suggestions for your code that might interest you.

HTML 📄:

If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to frontendmentor.io

Try using the font that is provided in the style-guide file. You can do this by generating the font using the link in the styling-guide and paste the <link> inside of the <head> in your <HTML>.

CSS 🎨:

To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

For more information on this topic, you can read the following article: PX or REM in CSS? 📘

To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example: @media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.

For more information on this topic, you can read the following article: Media queries 📘

An easy way to quickly and automatically center your <main> element inside the <body> of your page, is by setting the following properties onto the <body> element inside your CSS like so: body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }

I hope you find my suggestions useful, and above all: the solution you provided is very good!

Keep it up and happy coding! 😃
1
Jen Gori•170
@jengoriSubmitted almost 2 years ago
QR code component
1
Jeroen Leijnse•1,420
@jrleijnsePosted almost 2 years ago
Hey there! Great job completing your first challenge! 🎊

I have some suggestions for your code that might interest you.

HTML 📄:

If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to frontendmentor.io

Try using the font that is provided in the style-guide file. You can do this by generating the font using the link in the styling-guide and paste the <link> inside of the <head> in your <HTML>.

CSS 🎨:

To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

For more information on this topic, you can read the following article: PX or REM in CSS? 📘

To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example: @media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.

For more information on this topic, you can read the following article: Media queries 📘

An easy way to quickly and automatically center your <main> element inside the <body> of your page, is by setting the following properties onto the <body> element inside your CSS like so: body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }

I hope you find my suggestions useful, and above all: the solution you provided is very good!

Keep it up and happy coding! 😃
Marked as helpful
0
JULIA FERNANDES TIBES•20
@juliatibesSubmitted almost 2 years ago
QR code component
1
Jeroen Leijnse•1,420
@jrleijnsePosted almost 2 years ago
Hey there! Great job completing your first challenge! 🎊

I have some suggestions for your code that might interest you.

HTML 📄:

Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.

If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to frontendmentor.io

Try using the font that is provided in the style-guide file. You can do this by generating the font using the link in the styling-guide and paste the <link> inside of the <head> in your <HTML>.

CSS 🎨:

To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

For more information on this topic, you can read the following article: PX or REM in CSS? 📘

I hope you find my suggestions useful, and above all: the solution you provided is very good!

Keep it up and happy coding! 😃
0
Joachim van der Pol•60
@JoachimvdPSubmitted almost 2 years ago
This is my solution to the Frontend Mentor QR component coding challenge. I initially started a junior project, but felt like it would be more appropriate to start smaller as I have very little experience.

Most of the challenge was pretty straightforward, but I struggled to get the component centered vertically. I wanted to use flexbox to do this, but I wasn't able to get it to work. Eventually I found a solution: setting the display on the body to flex, and centering it from there. In order to properly center it however, I did need to give the body a height of 100vh. It feels counterintuative to specify a height for the body. Are other solutions that are less complicated?
QR component challenge
2
Jeroen Leijnse•1,420
@jrleijnsePosted almost 2 years ago
Hey there! Great job completing your first challenge! 🎊

I have some suggestions for your code that might interest you.

HTML 📄:

Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.

CSS 🎨:

To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example: @media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.

For more information on this topic, you can read the following article: Media queries 📘

I hope you find my suggestions useful, and above all: the solution you provided is very good!

Keep it up and happy coding! 😃
Marked as helpful
0
Ghanim Ali•90
@TakindaSubmitted almost 2 years ago
QR code component
1
Jeroen Leijnse•1,420
@jrleijnsePosted almost 2 years ago
Hey there! Great job completing your first challenge! 🎊

I have some suggestions for your code that might interest you.

HTML 📄:

Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.

If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to frontendmentor.io

CSS 🎨:

To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

For more information on this topic, you can read the following article: PX or REM in CSS? 📘

An easy way to quickly and automatically center your <main> element inside the <body> of your page, is by setting the following properties onto the <body> element inside your CSS like so: body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }

I hope you find my suggestions useful, and above all: the solution you provided is very good!

Keep it up and happy coding! 😃
Marked as helpful
1
Zach Eritson•50
@eritson254Submitted almost 2 years ago
JUST A REMARK; THE CHALLENGE HELPED ME PRACTICE MY CSS POSITIONING SKILLS.
A QR code component built with HTML and CSS to showcase a QR code imG
1
Jeroen Leijnse•1,420
@jrleijnsePosted almost 2 years ago
Hey there! Great job completing your first challenge! 🎊

I have some suggestions for your code that might interest you.

HTML 📄:

Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.

If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to frontendmentor.io

CSS 🎨:

To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

For more information on this topic, you can read the following article: PX or REM in CSS? 📘

To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example: @media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.

For more information on this topic, you can read the following article: Media queries 📘

An easy way to quickly and automatically center your <main> element inside the <body> of your page, is by setting the following properties onto the <body> element inside your CSS like so: body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }

I hope you find my suggestions useful, and above all: the solution you provided is very good!

Keep it up and happy coding! 😃
Marked as helpful
0
Abdelmonem Elmongy•10
@MONEMALI9Submitted almost 2 years ago
HTML5 CSS3 CLASS DIV
1
Jeroen Leijnse•1,420
@jrleijnsePosted almost 2 years ago
Hey there! Great job completing your first challenge! 🎊

I have some suggestions for your code that might interest you.

HTML 📄:

Instead of using the <div> tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using <div> you could use the <main> or <section> tag. For the element with the classname attribution you could use the <footer> tag.

If an <img> like in this case the QR-code, leads to a website or links to someplace else, try to provide a more descriptive text of that in your ALT text, for example: QR code that leads to frontendmentor.i

Try using the font that is provided in the style-guide file. You can do this by generating the font using the link in the styling-guide and paste the <link> inside of the <head> in your <HTML>.

CSS 🎨:

To make your project more responsive and adaptable (in this case as well: especially when you start building bigger and bigger projects), I would suggest to use rem instead of px or other units. This basically means that all sizing will be calculated in relation to the root element (rem). To set the standard font-size for the root element, you can provide a font-size inside the HTML element inside your CSS. For example: html {font-size: 15px;}.

For more information on this topic, you can read the following article: PX or REM in CSS? 📘

To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example: @media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.

For more information on this topic, you can read the following article: Media queries 📘

An easy way to quickly and automatically center your <main> element inside the <body> of your page, is by setting the following properties onto the <body> element inside your CSS like so: body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }

I hope you find my suggestions useful, and above all: the solution you provided is very good!

Keep it up and happy coding! 😃
0

Jeroen Leijnse

All comments

QR code using flexbox in CSS

QR Box

Qr Code HTML5 and CSS3

qr-code { HTML, CSS }

QR-code-component

Responsive QC code, using html and css

QR code component

QR code component

QR component challenge

QR code component

A QR code component built with HTML and CSS to showcase a QR code imG

HTML5 CSS3 CLASS DIV