Skip to content
OverviewSolutions
5
Comments
35

Mayank Arora

@mayankdrvrIndia430 points

I have an engineering degree in Electronics as well as in Material Science and I have transitioned to web development as my career.

I’m currently learning...

I am currently learning HTML, CSS, JS and JS related full stack frameworks through building real projects and receiving feedback from experienced professionals in the community.

Latest solutions

Latest comments

  • Mayank Arora•430
    @mayankdrvr

    UPDATE:

    1. I have refactored this challenge using Vite as Create React App(CRA) is deprecated.
    2. All issues resolved in Accessibility report & HTML validation report on challenge submission page on FEM.
    3. The styling has been updated according to the feedback received on FEM discord to make the site responsive.
    4. Source code and preview site has been updated.
  • Mayank Arora•430
    @mayankdrvr

    Congratulations @corolaweb023 for completing this challenge. Your design matches the solution very well and your code is following good practices.

    Here are a few observations-

    1. The <h1> element should be used for SEO atleast once, but it should be used only once per page.
    2. Try to use the Block Element Modifier(BEM) naming method as a good practice of naming classes for referencing html elements in the css file.
    3. Avoid using <div> element in html file and use semantic html elements throughout the code for better web accessibility.
    4. Using noopener and noreferer in <a> elements is a good security practice with cross browser compatibility.
    5. Use the page background color given in the starter files.

    Awesome solution and keep it up.

    Marked as helpful
  • Mayank Arora•430
    @mayankdrvr

    Congratulations @binkivans for completing this challenge. Your design matches the solution very well.

    Here is an observation-

    1. Below 840px width of screen, the text and card gets partially hidden, the text does not wrap and the image does not resize. Maybe, you can make it more responsive by setting the maximum width of container to be upto 100% of width of its parent container(body). See if using this CSS property in image styling can make the image more responsive- max-width: 100%;
    2. Avoid using <div> element in html file and use semantic html elements throughout the code for better web accessibility.
    3. Try to use the Block Element Modifier(BEM) naming method as a good practice of naming classes for referencing html elements in the css file.
    4. The h1 heading should be used not more than once for SEO and better page rankings in every web page. Use <h1> for the heading text and <p> for the description.

    Modified css file(excluding BEM naming)-

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: hsl(212, 45%, 89%);
    max-width: 100%;
    font-size: 15px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    width: 320px;
    height: 497px;
    background-color: white;
    display: flex;
    flex-direction: column;
    border-radius: 30px;
}

img {
    max-width: 100%;
    margin: 20px;
    border-radius: 25px;
}

.text1 {
    font-weight: 700;
    font-size: 1.3rem;
    margin-top: 12px;
    margin-bottom: 12px;
    text-align: center;
}

.text2 {
    font-weight: 400;
    text-align: center;
    color: hsl(220, 15%, 55%);
    margin-bottom: 30px;
}

    Awesome solution and keep it up.

  • Mayank Arora•430
    @mayankdrvr

    Congratulations @corolaweb023 for completing this challenge. Your design matches the solution very well.

    Here are a few observations-

    1. Try to use the Block Element Modifier(BEM) naming method as a good practice of naming classes for referencing html elements in the css file.
    2. Below 400px width of screen, the text and card gets partially hidden, the text does not wrap and the image does not resize. Maybe, you can make it more responsive by setting the maximum width of card to be upto 100% of width of its parent container. See if using this CSS property in image styling can make the image more responsive- max-width: 100%;
    3. Using noopener and noreferer in <a> elements is a good security practice with cross browser compatibility.
    4. Avoid using <div> element in html file and use semantic html elements throughout the code for better web accessibility.
    5. Google Fonts provides the option to load fonts via <link> tags or an @import statement. The <link> code snippet includes a preconnect resource hint and therefore will likely result in faster stylesheet delivery than using @import version. Importing google fonts in the html head section is a good practice instead of importing them in the css file-
    <head>
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&family=Outfit:wght@400;700&display=swap" rel="stylesheet">
</head>

    Awesome solution and keep it up.

    Marked as helpful
  • Mayank Arora•430
    @mayankdrvr

    Congratulations @NovaMakeIt for completing this challenge. Your design matches the solution very well.

    Here are a few observations-

    1. Below 323px width of screen, the text and card gets partially hidden, the text does not wrap and the image does not resize. Maybe, you can make it more responsive by setting the maximum width of card to be upto 100% of width of its parent container(body). See if using this CSS property in image styling can make the image more responsive- max-width: 100%;. Use min-height: 100vh; in body styling for body to take up all the space of the viewport.
    2. Avoid using <div> element in html file and use semantic html elements throughout the code for better web accessibility.
    3. Using noopener and noreferer in <a> elements is a good security practice with cross browser compatibility.
    4. Try to use the Block Element Modifier(BEM) naming method as a good practice of naming classes for referencing html elements in the css file.
    5. Use relative dimensions like rem wherever possible.

    Modified html body(i have left BEM naming for your practice)-

      <div class="card">
    <img src="./images/image-qr-code.png" alt="A QR code" class="qr-code" />
    <h2 class="heading">Improve your front-end skills by building projects</h2>
    <p class="description">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>

    Modified css file-

    * {
    margin: 0;
    padding: 0;
    font-size: 15px;
    box-sizing: border-box;
}

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

.card {
    width: 320px;
    height: 497px;
    border-radius: 20px;
    background-color: hsl(0, 0%, 100%);
    box-shadow: 5px 5px 5px rgba(90, 89, 89, 0.2);
    max-width: 100%;

}

.qr-code {
    padding: 16px 16px 0px 16px;
    max-width: 100%;
    border-radius: 0.625rem;
}


.heading {

    margin: 10px 34px 0 34px;
    font-size: 20px;
    text-align: center;
    font-weight: 700;
    color: hsl(218, 44%, 22%);
}

.description {

    margin: 20px 30px;
    font-size: 15px;
    text-align: center;
    font-weight: 400;
    color: hsl(220, 15%, 55%);
}

.attribution {

    text-align: center;
    margin-top: 20px;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

    Awesome solution and keep it up.

    Marked as helpful
  • Mayank Arora•430
    @mayankdrvr

    Congratulations @Ashiqur2279 for completing this challenge. Your design matches the solution very well.

    Here are a few observations-

    1. Try to use the Block Element Modifier(BEM) naming method as a good practice of naming classes for referencing html elements in the css file.
    2. The h1 heading should be used not more than once for SEO and better page rankings in every web page.
    3. Putting all your stylling in a separate .css file is a good practice.
    4. Using noopener and noreferer in <a> elements is a good security practice with cross browser compatibility.
    5. Avoid using <div> element in html file and use semantic html elements throughout the code for better web accessibility.

    Awesome solution and keep it up.

View more comments