Skip to content
OverviewSolutions
5
Comments
35
Mayank Arora
@mayankdrvr

All 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.

  • Mayank Arora•430
    @mayankdrvr

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

    Here are a few observations-

    1. Avoid using <div> element in html file and use semantic html elements throughout the code for better web accessibility.
    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. Using noopener and noreferer in <a> elements is a good security practice with cross browser compatibility.
    4. The h1 should be used for SEO, but it should be used only once.

    Awesome solution and keep it up.

    Marked as helpful
  • Mayank Arora•430
    @mayankdrvr

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

    Here are a few observations-

    1. Below 390px 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%;
    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. Using noopener and noreferer in <a> elements is a good security practice with cross browser compatibility.
    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 waltertaya 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 can only be utilized once on a single page, yet in your code, it is employed multiple times.
    3. Below 909px width of screen, your design is not responsive. In contemporary web development, the standard approach involves beginning with mobile-first content construction. This entails styling for small screens initially and subsequently employing media queries to adapt the design for larger screens, thus emphasizing performance and responsiveness. Try to create a design using css flexbox column-wise for small screen and then add media queries to design using css flexbox row-wise for larger screens.
    4. Add some padding between the contents inside the containers and the border of the containers.
    5. Hovering over "Learn more" buttons is supposed to change the button color with a small delay in transition.
    6. Setting min-height: 100vh; on the body element in your CSS is a common technique used to ensure that the body of your web page takes up at least the full height of the viewport (the visible area of the browser window). This is often used to create layouts where the content expands to fill the entire screen, which can be particularly useful for single-page applications or websites with a full-screen design.
    7. Using css reset is also a good practice. A CSS reset is a set of CSS rules or styles that are applied to your web page at the beginning to reset or neutralize the default browser styles. This is done to ensure a more consistent starting point for your own CSS styles, as different browsers have different default styles for elements like headings, paragraphs, lists, etc. By resetting these defaults, you have more control over how your website appears across various browsers.
    8. 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.

  • Mayank Arora•430
    @mayankdrvr

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

    Here are a few observations-

    1. Below 348px width of screen, the text and container gets partially hidden and the text does not wrap. Maybe, you can make it more responsive by setting the maximum width of container to be upto 100% of width of body. See if using this CSS property in image styling can make the image more responsive- max-width: 100%;
    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. Setting min-height: 100vh; on the body element in your CSS is a common technique used to ensure that the body of your web page takes up at least the full height of the viewport (the visible area of the browser window). This is often used to create layouts where the content expands to fill the entire screen, which can be particularly useful for single-page applications or websites with a full-screen design.
    4. Using css reset is also a good practice. A CSS reset is a set of CSS rules or styles that are applied to your web page at the beginning to reset or neutralize the default browser styles. This is done to ensure a more consistent starting point for your own CSS styles, as different browsers have different default styles for elements like headings, paragraphs, lists, etc. By resetting these defaults, you have more control over how your website appears across various browsers.
    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.

  • Mayank Arora•430
    @mayankdrvr

    Congratulations Ibson Barboza de Oliveira 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. In this challenge, the icons are purely ornamental, so the alt tag should be empty (alt="") to indicate to screen readers that they should be disregarded.
    3. The h1 heading can only be utilized once on a single page, yet in your code, it is employed multiple times.
    4. Below 920px width of screen, your design text gets partially hidden. In contemporary web development, the standard approach involves beginning with mobile-first content construction. This entails styling for small screens initially and subsequently employing media queries to adapt the design for larger screens, thus emphasizing performance and responsiveness. Try to create a design using css flexbox column-wise for small screen and then add media queries to design using css flexbox row-wise for larger screens.
    5. Add some padding between the contents inside the boxes and the border of the boxes.
    6. 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.

  • Mayank Arora•430
    @mayankdrvr

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

    Here are a few observations-

    1. It is good practice to use semantic html elements for better web accessibility instead of simply using <div> tags.
    2. In this challenge, the icons are purely ornamental, so the alt tag should be empty (alt="") to indicate to screen readers that they should be disregarded.
    3. Hovering over "Learn more" buttons is supposed to change the button color with a small delay in transition.
    4. Below 335px width of screen, the text and card gets partially hidden, the text does not wrap and the card 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%;

    Awesome solution and keep it up.

    Marked as helpful
  • Mayank Arora•430
    @mayankdrvr

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

    Here are a few observations-

    1. It is good practice to use semantic html elements for better web accessibility instead of simply using <div> tags.
    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. In this challenge, the icons are purely ornamental, so the alt tag should be empty (alt="") to indicate to screen readers that they should be disregarded.
    4. Hovering over "Learn more" buttons is supposed to change the button color.
    5. The h1 heading can only be utilized once on a single page, yet in your content, it is employed multiple times.
    6. Below 475px width of screen, your design text gets partially hidden. In contemporary web development, the standard approach involves beginning with mobile-first content construction. This entails styling for small screens initially and subsequently employing media queries to adapt the design for larger screens, thus emphasizing performance and responsiveness. Try to create a design using css flexbox column-wise for small screen and then add media queries to design using css flexbox row-wise for larger screens.
    7. Add some padding between the contents inside the boxes and the border of the boxes. Use relative dimensions like rem wherever possible.

    Awesome solution and keep it up.

    Marked as helpful
  • Mayank Arora•430
    @mayankdrvr

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

    Here are a few observations-

    1. Below 363px 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%;
    2. It is good practice to use semantic html elements for better web accessibility instead of simply using <div> tags.
    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. 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>

    Updated CSS styling of html elements for a more responsive design(changes in comments)-

    /* @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap'); */

.container {
  width: var(--site-width);
  min-height: 100vh;
  /* makes container responsive */
  margin: 0 auto;
  background-color: var(--light-gray);
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card .img {
  margin-bottom: 24px;
  max-width: 100%;
  /* makes image responsive */
}

.card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  /* adds image borders */
}

    Awesome solution and keep it up.

    Marked as helpful
  • Mayank Arora•430
    @mayankdrvr

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

    Here are a few observations-

    1. Below 335px 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%;
    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 for better web accessibility.

    Updated CSS styling of html elements for a more responsive design(changes in comments)-

    .wrapper {
	width: 32em;
	max-width: 100%;
	/* makes wrapper responsive */
	display: flex;
	flex-direction: column;
	margin: 15em auto;
	padding: 1.25rem;
	background-color: white;
	border-radius: 2rem;
}

img {
	max-width: 100%;
	/* makes wrapper responsive */
	margin: 1rem;
	/* makes all image margins equal */
	border-radius: 1em;
}

    Awesome solution and keep it up.

    Marked as helpful
  • Mayank Arora•430
    @mayankdrvr

    Congratulations Simón for completing this challenge. Your design matches the solution very well.

    Here is an observation-

    1. Below 340px 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%;
    2. Avoid using <div> element in html file and use semantic html elements throughout the code for better web accessibility. Using noopener and noreferer in <a> elements is a good security practice with cross browser compatibility.
    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. Importing google fonts in html head section is a good practice instead of importing them in 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 Aedan for completing this challenge. Your design matches the solution very well.

    Here are a few observations-

    1. Below 300px 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%;
    2. 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.

  • Mayank Arora•430
    @mayankdrvr

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

    Here are some observations-

    1. Below 332px 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%;
    2. The background color of the page you used is of a different color and does not match the one given in the .jpeg screeshot given in the challenge page and the starter files.
    3. Avoid using <div> element in html file and use semantic html elements throughout the code for better web accessibility. Using noopener and noreferer in <a> elements is a good security practice with cross browser compatibility.

    Awesome solution and keep it up.

    Marked as helpful