All comments

Blagoj•130
@Bagataa
Submitted about 2 years ago
Responsive Testimonials Grid Section
1
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
or
```
body { min-height: 100vh; display: grid; place-content: center; }
```
- You will find an About Section on the right when we open the GitHub repository link. There, also include a live preview link of your project. Someone should check your live project while interacting with code.

**I hope you will find this Feedback Helpful.**
```
Ricky Reza•40
@rickyreza12
Submitted about 2 years ago
Result Summary Component using Tailwind CSS
#tailwind-css
2
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- You don't have to use srcset in the img tag while already using src property.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
- Why does alt attribute matter? Read here.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
or
```
body { min-height: 100vh; display: grid; place-content: center; }
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.

**I hope you will find this Feedback Helpful.**
```
Marked as helpful
StinkyCodeMACHINE•480
@StinkyCodeMACHINE
Submitted about 2 years ago
Product preview card component
2
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- Copy the font URL from google fonts correctly and replace the font's link to solve the error.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
- Why does alt attribute matter? Read here.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
or
```
body { min-height: 100vh; display: grid; place-content: center; }
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.

**I hope you will find this Feedback Helpful.**
```
Marked as helpful
Raul-madero•110
@Raul-madero
Submitted about 2 years ago
Responsive summary
2
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
- Why does alt attribute matter? Read here.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
or
```
body { min-height: 100vh; display: grid; place-content: center; }
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.

**I hope you will find this Feedback Helpful.**
```
Marked as helpful
Taylor Kennedy•30
@tayken05
Submitted about 2 years ago
A responsive Profile section page made for all devices with HTML, CSS
#accessibility#sass/scss#bem
1
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
- Why does alt attribute matter? Read here.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
or
```
body { min-height: 100vh; display: grid; place-content: center; }
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.

**I hope you will find this Feedback Helpful.**
```
Marked as helpful
mylesh•90
@myles-portfolio
Submitted about 2 years ago
Order summary component
1
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
- Why does alt attribute matter? Read here.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
or
```
body { min-height: 100vh; display: grid; place-content: center; }
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.

**I hope you will find this Feedback Helpful.**
```
Mohamed Abdelaziz•10
@33b3ziz
Submitted about 2 years ago
using positioning and transform properties
2
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
- Why does alt attribute matter? Read here.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
or
```
body { min-height: 100vh; display: grid; place-content: center; }
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.

**I hope you will find this Feedback Helpful.**
```
HemanthBear•40
@Bearboy27
Submitted about 2 years ago
My first project Card component HTML CSS
1
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
- Why does alt attribute matter? Read here.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
or
```
body { min-height: 100vh; display: grid; place-content: center; }
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.

**I hope you will find this Feedback Helpful.**
```
projectgreenhat•20
@projectgreenhat
Submitted about 2 years ago
Result landing page using HTML and CSS
1
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- Check your challenge design while you are developing your solution to it.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
- Why does alt attribute matter? Read here.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
or
```
body { min-height: 100vh; display: grid; place-content: center; }
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.

**I hope you will find this Feedback Helpful.**
```
Marked as helpful
Matheus Chrispim Pelegrin•30
@MatheusChrispim
Submitted about 2 years ago
QR Code Component
#accessibility
1
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi MATHEUS CHRISPIM PELEGRIN!, congrats🎉 on completing the challenge. Better take care about following points.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
- Why does alt attribute matter? Read here.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
or
```
body { min-height: 100vh; display: grid; place-content: center; }
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.

**I hope you will find this Feedback Helpful.**
```
Marked as helpful
Ong Jun hong•20
@MaxOng94
Submitted about 2 years ago
qr-code-image with flexbox
2
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- Maintain a <title> tag in your page by default in HTML semantic.
- Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
- Why does alt attribute matter? Read here.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
```
or
```
body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.
I hope you will find this Feedback Helpful.
Marked as helpful
Simon•450
@CarlosSimon02
Submitted about 2 years ago
Result summary component using plain CSS
2
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
- Why does alt attribute matter? Read here.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
} 
```
or
```
body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.
I hope you will find this Feedback Helpful.
Marked as helpful
Camili•30
@camiligomes
Submitted about 2 years ago
Frontend Mentor - QR code component w/ HTML & CSS
2
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- Always check Frontend mentor Report Generator issues after submitting the project for removing errors and warnings.
- Maintain your <h1> and <p> tag elements to text-align: center; and it will match the same design.
- Also, Check your background-color.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
or
```
body { min-height: 100vh; display: grid; place-content: center; }
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.

**I hope you will find this Feedback Helpful.**
```
therapy181•20
@therapy181
Submitted about 2 years ago
QR Code Simple Solution by a Newbie
2
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
- Why does alt attribute matter? Read here.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
```
or
```
body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.
I hope you will find this Feedback Helpful.
Ezibliss•60
@Ezibliss
Submitted about 2 years ago
Product Preview
1
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
**Hello Ezibliss! Congrats🎉 on finishing the challenge. Here is my feedback on your code:
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}
```
or
```
body{
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
}
```
- Maintain padding on your container.
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.
I hope you will find this Feedback Helpful.
Julian Agustin Miño•30
@JMinio
Submitted about 2 years ago
RESPONSIVEV & INTERACTIVE DASHBOARD
1
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate!, congrats🎉 on completing the challenge. Better take care about following points.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- Use the alt (alternate text) attribute as mentioned in your Accessibility Report. alt attribute is used for Screen readers applications.
- Why does alt attribute matter? Read here.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- For proper centering the container(whole card) vertically and horizontally you can also use the following simple block of code use code:
```
body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}
```
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.
I hope you will find this Feedback Helpful.
Jaloliddin•20
@jaloliddinmirzo
Submitted about 2 years ago
I was fouled from Display Flex
1
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hello mate! congrats on completing the challenge. Here is my feedback on your solution.
- An <img> tag must contain a valid src to have the image on your page. Make sure you provided a valid one.
- Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings.
- To avoid accessibility issues "All page content should be contained by landmarks" use code as :
```
 <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
```
(why does <main> matter? Read here )
- When we open the GitHub repository link, you will find an About Section on the right side. There, also include a live preview link of your project. It is better for someone to check your live project while interacting with code.
I hope you will find this Feedback is Helpful.
Marked as helpful
timberstream•40
@timberstream
Submitted about 2 years ago
QR code using VS code
4
Sumanth Chandana•720
@sumanth-chandana
Posted about 2 years ago
Hi mate! congrats on completing the challenge. I have suggestions from my side that may help you:
- Use background-color on the whole body, not on the container.
- An <img> must contain an alt attribute by default so that screen readers might know the element present over there.
- Use @media queries to resize the HTML elements in your page, for more on that click here
I hope my feedback will help you.
Marked as helpful

Sumanth Chandana

All comments

Responsive Testimonials Grid Section

Result Summary Component using Tailwind CSS

Product preview card component

Responsive summary

A responsive Profile section page made for all devices with HTML, CSS

Order summary component

using positioning and transform properties

My first project Card component HTML CSS

Result landing page using HTML and CSS

QR Code Component

qr-code-image with flexbox

Result summary component using plain CSS

Frontend Mentor - QR code component w/ HTML & CSS

QR Code Simple Solution by a Newbie

Product Preview

RESPONSIVEV & INTERACTIVE DASHBOARD

I was fouled from Display Flex

QR code using VS code