All comments

Blagoj•130
@BagataaSubmitted about 2 years ago
Responsive Testimonials Grid Section
1
Sumanth Chandana•720
@sumanth-chandanaPosted 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.**
0
Ricky Reza•40
@rickyreza12Submitted about 2 years ago
Result Summary Component using Tailwind CSS
#tailwind-css
2
Sumanth Chandana•720
@sumanth-chandanaPosted 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
0
StinkyCodeMACHINE•480
@StinkyCodeMACHINESubmitted about 2 years ago
Product preview card component
2
Sumanth Chandana•720
@sumanth-chandanaPosted 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
1
Raul-madero•110
@Raul-maderoSubmitted about 2 years ago
Responsive summary
2
Sumanth Chandana•720
@sumanth-chandanaPosted 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
0
Taylor Kennedy•30
@tayken05Submitted 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-chandanaPosted 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
1
mylesh•90
@myles-portfolioSubmitted about 2 years ago
Order summary component
1
Sumanth Chandana•720
@sumanth-chandanaPosted 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.**
0
Mohamed Abdelaziz•10
@33b3zizSubmitted about 2 years ago
using positioning and transform properties
2
Sumanth Chandana•720
@sumanth-chandanaPosted 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.**
0
HemanthBear•40
@Bearboy27Submitted about 2 years ago
My first project Card component HTML CSS
1
Sumanth Chandana•720
@sumanth-chandanaPosted 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.**
0
projectgreenhat•20
@projectgreenhatSubmitted about 2 years ago
Result landing page using HTML and CSS
1
Sumanth Chandana•720
@sumanth-chandanaPosted 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
1
Matheus Chrispim Pelegrin•30
@MatheusChrispimSubmitted about 2 years ago
QR Code Component
#accessibility
1
Sumanth Chandana•720
@sumanth-chandanaPosted 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
0
Ong Jun hong•20
@MaxOng94Submitted about 2 years ago
qr-code-image with flexbox
2
Sumanth Chandana•720
@sumanth-chandanaPosted 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
0
Simon•450
@CarlosSimon02Submitted about 2 years ago
Result summary component using plain CSS
2
Sumanth Chandana•720
@sumanth-chandanaPosted 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
1
Camili•30
@camiligomesSubmitted about 2 years ago
Frontend Mentor - QR code component w/ HTML & CSS
2
Sumanth Chandana•720
@sumanth-chandanaPosted 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.**
0
therapy181•20
@therapy181Submitted about 2 years ago
QR Code Simple Solution by a Newbie
2
Sumanth Chandana•720
@sumanth-chandanaPosted 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.
0
Ezibliss•60
@EziblissSubmitted about 2 years ago
Product Preview
1
Sumanth Chandana•720
@sumanth-chandanaPosted 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.
0
Julian Agustin Miño•30
@JMinioSubmitted about 2 years ago
RESPONSIVEV & INTERACTIVE DASHBOARD
1
Sumanth Chandana•720
@sumanth-chandanaPosted 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.
0
Jaloliddin•20
@jaloliddinmirzoSubmitted about 2 years ago
I was fouled from Display Flex
1
Sumanth Chandana•720
@sumanth-chandanaPosted 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
0
timberstream•40
@timberstreamSubmitted about 2 years ago
QR code using VS code
4
Sumanth Chandana•720
@sumanth-chandanaPosted 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
0

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