Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
17
Navendu
@Ashxarya

All comments

  • Maciej Stolarski•20
    @Alearson
    Submitted over 2 years ago

    Mobile-first solution using CSS Flexbox

    2
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    Make sure you look at the accessibility report you're provided with below your solution.

    HTML 📄:

    As you can see in your accessibility report, you are recommended to use a level-one heading as in h1 for the first text. H tags improve user experience in the sense that they're part of a web page's hierarchical structure. Think of them less as a way to size font and more of a way to show the order of headings, since the size can be manipulated in CSS regardless.

    Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    CSS 🎨:

    For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.

    You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here , similarly, you can search for why you might want to use em values instead of px for padding, margins etc in some cases as well.

    Have a great day/night ^^

    Marked as helpful
  • bastiSaa96•10
    @bastiSaa96
    Submitted over 2 years ago

    Frist Project: QR Code

    2
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    Make sure you look at the accessibility report you're provided with below your solution.

    HTML 📄:

    As you can see in your accessibility report, you are recommended to use a level-one heading as in h1 for the first text. H tags improve user experience in the sense that they're part of a web page's hierarchical structure. Think of them less as a way to size font and more of a way to show the order of headings, since the size can be manipulated in CSS regardless.

    CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.

    You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here , similarly you can search for why you might want to use em values instead of px for padding, margins etc in some cases aswell.

    Have a great day/night ^^

  • Alexander Alves•20
    @AlexDralur
    Submitted over 2 years ago

    Product page w/ button done through website

    1
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    Make sure you look at the accessibility report you're provided with below your solution.

    HTML 📄:

    As you can see in your accessibility report, you are recommended to use a level-one heading as in h1 for the first text. H tags improve user experience in the sense that they're part of a web page's hierarchical structure. Think of them less as a way to size font and more of a way to show the order of headings, since the size can be manipulated in CSS regardless.

    Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page.

    I see you decided to remove the attribution, if in the future you want to add an attribution to your page make sure to use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    Make sure to add alternative text in your images. To do this simply add (alt="") for ex. <img src="icon-music.svg" alt=""> You can either add info about the image in that section or leave it blank depending on what the image is.

    CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.

    You seem to already be using rem values for font-sizes i suggest you watch kevin powells videos on rem em and other units and try and use them for margins, paddings, etc as well instead of pixels.

    for your query on centering The most common way to center such articles is to use

     body {
    display : grid;
    place-items: center;
    }
    
  • Albert Lexter Baterina•10
    @AlbertLexter
    Submitted over 2 years ago

    Frontend Mentor | QR Component

    1
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    Make sure you look at the accessibility report you're provided with below your solution.

    HTML 📄:

    Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

    I see that you decided to remove the attribution from the HTML, if in the future you do want to attribution make sure you use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.

    You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here , similarly you can search for why you might want to use em values instead of px for padding, margins etc in some cases aswell.

    Have a great day/night ^^

  • Guy Dinh•30
    @guyanhdinh
    Submitted over 2 years ago

    My QR Code

    1
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    Make sure you look at the accessibility report you're provided with below your solution.

    HTML 📄:

    As you can see in your accessibility report, you are recommended to use a level-one heading as in h1 for the first text. H tags improve user experience in the sense that they're part of a web page's hierarchical structure. Think of them less as a way to size font and more of a way to show the order of headings, since the size can be manipulated in CSS regardless.

    Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

    Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.

    You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here , similarly you can search for why you might want to use em values instead of px for padding, margins etc in some cases aswell.

    Have a great day/night ^^

    Marked as helpful
  • Ahmad Faaiz•20
    @ahmadfaa1z
    Submitted over 2 years ago

    Product Preview Card Component

    2
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    CSS 🎨: I see that you have made use of variables in your root, you could try adding colours as variables as well for better ease of access in future projects.

    You seem to have used em for font sized in some places, as general rule of thumb font sizes tend to use rem whereas spacing uses rem and em, you can learn more about this here.

    As for your question on mobile first, there are many sources on youtube and other websites. A basic idea is to build your website around the mobile version first and then add a media query of let's say min-width:600px to then make the desktop version. Here is a video on why it might be better to do mobile first.

    Have a great day/night ^^

    Marked as helpful
  • Michel Moreira•300
    @michel-moreira
    Submitted over 2 years ago

    Responsive landing page using CSS Grid and Flexbox

    1
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    Make sure you look at the accessibility report you're provided with below your solution.

    HTML 📄:

    Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

    Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    CSS 🎨: I think for smaller projects like this it's much better to only have one stylesheet rather than multiple to have better ease of access and less clutter.

    Have a great day/night ^^

    Marked as helpful
  • Chris•10
    @zaphod207
    Submitted over 2 years ago

    FM-Barcode-Scanner

    1
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    Make sure you look at the accessibility report you're provided with below your solution.

    HTML 📄:

    As you can see in your accessibility report, you are recommended to use a level-one heading for the first text. H tags improve user experience in the sense that they're part of a web page's hierarchical structure. Think of them less as a way to size font and more of a way to show the order of headings, since the size can be manipulated in CSS regardless.

    I see you decided to remove the attribution, if in the future you decide to place it at the bottom make sure to use the <footer> tag to wrap the footer of the page instead of the <div class="attribution"> you are given in the original file. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    Make sure to add alternative text in your images. To do this simply add (alt="") for ex. <img src="icon-music.svg" alt=""> You can either add info about the image in that section or leave it blank depending on what the image is.

    CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.

    You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here , similarly you can search for why you might want to use em values instead of px for padding, margins etc in some cases aswell.

    Have a great day/night ^^

    Marked as helpful
  • Enyinda Temple•10
    @enyindatemple
    Submitted over 2 years ago

    html and css

    1
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    Make sure you look at the accessibility report you're provided with below your solution.

    Github is case sensitive, perhaps the reason your image is not showing is because your image file is using capital I instead of small i, you can edit this directly in your github repo.

    HTML 📄:

    Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

    Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    Make sure to add alternative text in your images. To do this simply add (alt="") for ex. <img src="icon-music.svg" alt=""> You can either add info about the image in that section or leave it blank depending on what the image is.

    CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.

    You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here , similarly you can search for why you might want to use em values instead of px for padding, margins etc in some cases aswell.

    Have a great day/night ^^

  • Emmanuel Tetteh•20
    @skizzo112
    Submitted over 2 years ago

    QR code component

    3
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    Make sure you look at the accessibility report you're provided with below your solution.

    HTML 📄: As you can see in your accessibility report, you are recommended to use a level-one heading as in h1 instead of a h2 for the first text. H tags improve user experience in the sense that they're part of a web page's hierarchical structure. Think of them less as a way to size font and more of a way to show the order of headings, since the size can be manipulated in CSS regardless.

    Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

    Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    CSS 🎨: You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here, similarly, you can search for why you might want to use em values instead of rem for padding, margins, etc in some cases as well.

    Have a great day/night ^^

    Marked as helpful
  • Vanglepu•40
    @Vanglepu
    Submitted over 2 years ago

    Order summary component

    1
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I think youve done an amazing job, heres some little things that could polish your code some more.

    HTML 📄:

    Everythings seems to be done to a T, you could move your attribution style to your css sheet from your HTML file for better accesibility for yourself.

    CSS 🎨:

    For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.

    Have a great day/night ^^

    Marked as helpful
  • Farsana Rahim•10
    @farsana-fr
    Submitted over 2 years ago

    QR scanner using CSS Layout,and Bootstrap centered with flexbox

    #bootstrap#fresh#styled-components
    1
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    Make sure you look at the accessibility report you're provided with below your solution.

    HTML 📄:

    As you can see in your accessibility report, you are recommended to use a level-one heading as in h1 instead of a h6 for the texts. H tags improve user experience in the sense that they're part of a web page's hierarchical structure. Think of them less as a way to size font and more as a way to show the order of headings, since the size can be manipulated in CSS regardless.

    Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

    Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.

    As for centering : One of the easiest ways to do this is by giving your body (which you seem to have named as frame in your stylesheet) a min-height of 100vh. Then using grid to center everything inside the body. For ex. ``` body {

    min-height: 100vh;
    display: grid;
    place-items: center;
    position: relative;
    

    }```

    For further understanding/alternative methods of centering, you can check out solutions from other people as their code can be accessed by everyone.

    You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here , similarly you can search for why you might want to use em values instead of px for padding, margins, etc in some cases as well.

    Have a great day/night ^^

    Marked as helpful
  • Coderlink•20
    @DayyaanAntunes
    Submitted over 2 years ago

    Card centralized using absolute position

    #materialize-css
    1
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    Make sure you look at the accessibility report you're provided with below your solution.

    HTML 📄:

    As you can see in your accessibility report, you are recommended to use a level-one heading for the first text. Think of them less as a way to size font and more as a way to show the hierarchy of headings, since the size can be manipulated in CSS regardless.

    Use the <main> tag to wrap up all the main content of the page instead of the <div> tag. With this semantic element, you can improve the accessibility of your page.

    Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.

    Have a great day/night ^^

  • kumaara ganapathi N•40
    @kumaarakg
    Submitted over 2 years ago

    solution using css and html

    1
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    Make sure you look at the accessibility report you're provided with below your solution.

    HTML 📄:

    As you can see in your accessibility report, you are recommended to use a level-two heading as in h2 instead of a h5 for "Annual plan". H tags improve user experience in the sense that they're part of a web page's hierarchical structure. Think of them less as a way to size font and more of a way to show the order of headings, since the size can be manipulated in CSS regardless.

    Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

    Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    Make sure to add alternative text in your images. To do this simply add (alt="") for ex. <img src="icon-music.svg" alt=""> You can either add info about the image in that section or leave it blank depending on what the image is.

    CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here.

    You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here , similarly you can search for why you might want to use em values instead of px for padding, margins etc in some cases aswell.

    Have a great day/night ^^

  • Hồ Đắc Minh Quân•110
    @tetinhxuan
    Submitted over 2 years ago

    Order-summary-component

    1
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    HTML 📄:

    Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    As you can see in your accessibility report, you are recommended to use a level-one heading as in h1 instead of header.H1 tags improve user experience in the sense that they're part of a web page's hierarchical structure.

    CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here

    You seem to have also used the mobile background image instead of the desktop background image which may be the reason why it seems off.

    On the topic of mobile, the given style guide suggests using a mobile width of 375px, although you do not have to follow the guide to a T this will help make the website responsive for smaller devices.

    You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here

    Have a great day/night ^^

    Marked as helpful
  • Carlos•10
    @BigCrazyBrain
    Submitted over 2 years ago

    "QR code component" using HTML and CSS

    1
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 😊

    I have some feedback to help you out.

    HTML 📄:

    Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

    Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this here

    You may want to also use rem instead of pixels for font-sizes! You can learn more about this topic here

    Have a great day/night ^^

    Marked as helpful
  • Gautam•90
    @Gautam1201
    Submitted over 2 years ago

    QR-Code Component using HTML and CSS Flexbox

    2
    Navendu•270
    @Ashxarya
    Posted over 2 years ago

    Hi! 👋. Good job on completing the challenge!

    I have some feedback to help you out.

    HTML 📄:

    Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

    Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

    You can also move the attribution style from the HTML into your stylesheet

    CSS 🎨: For ease of access in future projects, you can create variables of different colors at the beginning of your sheet. You can read more here to learn about this.

    Happy Coding!

    Marked as helpful
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