Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
116
Jeroen Leijnse
@jrleijnse

All comments

  • alihaydar28•30
    @alihaydar28
    Submitted over 2 years ago

    QR code using flexbox in CSS

    3
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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
  • takieeldeen•30
    @takieeldeen
    Submitted over 2 years ago

    QR Box

    2
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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! 😃

  • Khazri71•60
    @Khazri71
    Submitted over 2 years ago

    Qr Code HTML5 and CSS3

    1
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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
  • kingAuthor1212•10
    @kingAuthor1212
    Submitted over 2 years ago

    qr-code { HTML, CSS }

    1
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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! 😃

  • David Potter•105
    @siriusdave
    Submitted over 2 years ago

    QR-code-component

    1
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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! 😃

  • Adafin Titus Olayemi•70
    @Pinnacle007
    Submitted over 2 years ago

    Responsive QC code, using html and css

    1
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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! 😃

  • Jen Gori•170
    @jengori
    Submitted over 2 years ago

    QR code component

    1
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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
  • JULIA FERNANDES TIBES•20
    @juliatibes
    Submitted over 2 years ago

    QR code component

    1
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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! 😃

  • Joachim van der Pol•60
    @JoachimvdP
    Submitted over 2 years ago

    QR component challenge

    2
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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
  • Ghanim Ali•150
    @Takinda
    Submitted over 2 years ago

    QR code component

    1
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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
  • Zach Eritson•50
    @eritson254
    Submitted over 2 years ago

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

    1
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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
  • Abdelmonem Elmongy•10
    @MONEMALI9
    Submitted over 2 years ago

    HTML5 CSS3 CLASS DIV

    1
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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! 😃

  • Yassin Chamlal•10
    @yassi22
    Submitted over 2 years ago

    QR CODE Solution with flexbox and css

    1
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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

    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
  • Princess Tonayon•10
    @princess-ctrl
    Submitted over 2 years ago

    Resonsive QR code component using CSS Box sizing

    #accessibility#styled-components#webflow
    2
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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
  • Michael Owusu Agyebeng•40
    @MichaelAgyebeng
    Submitted over 2 years ago

    qr-code-component-main

    1
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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 or other unites. 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! The solution you provided is very good!

    Keep it up and happy coding! 😃

    Marked as helpful
  • Javier Alejandro•170
    @javier1793-op
    Submitted over 2 years ago

    QR code component

    #sass/scss
    2
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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 📘

    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
  • AlexisMtzSa•60
    @AlexisMtzSa
    Submitted over 2 years ago

    Order Summary Card using FlexBox

    1
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 2 years ago

    Hey there! Great job completing this challenge! 🎊

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

    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
  • nehrachetan83•10
    @nehrachetan83
    Submitted over 2 years ago

    Media Quries, google font

    2
    Jeroen Leijnse•1,420
    @jrleijnse
    Posted over 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? 📘

    • 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! 😃

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub