All comments

Maikl-k•10
@Maikl-kSubmitted about 1 year ago
frontend mentor is cool
qr-code
1
_nehal💎•6,710
@NehalSahu8055Posted about 1 year ago
Hello Coder 👋

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

To dynamically center the card. Don't use margins

USING FLEXBOX

body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; ... }

Every site must have one h1 element describing the main content of the page.

So, Add a level-one heading

<h1>Improve you frontend skills by building projects</h1>

Don't use multiple <p> for the single descritption use only one.

Use Semantics for the proper design of your code.

<body> <main>... main content goes here ...</main> <footer>... .attribution div goes here ... </footer> </body>

For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

I hope you find this helpful.

Happy coding😄
1
Ana Inocêncio•30
@heyannliSubmitted about 1 year ago
Product Card Solution
2
_nehal💎•6,710
@NehalSahu8055Posted about 1 year ago
Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

Use Semantics for the proper design of your code.

<body> <main>... main content goes here ...</main> <footer>... .attribution div goes here ... </footer> </body>

It would be better if you use source media for switching to screen sizes(mobile or desktop) for image.

<picture> <source media="(min-width:800px)" srcset="yourimage.jpg"> <img src="yourimage.jpg" alt="description"> </picture>

For non-decorative images give meaningful and descriptive alt like alt= "Gabrielle Chanel Perfume bottle surrounded by leaves.".

Use semantic element for strike-through <s>$169.99</s>

If you want to dive into accessibility for this project check this link

I hope you find this helpful.

Happy coding😄
0
rachidnaitlahaj•20
@rachidnaitlahajSubmitted about 1 year ago
Feedbacks are welcomed
product-preview-card-component-main
3
_nehal💎•6,710
@NehalSahu8055Posted about 1 year ago
Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

To properly center the card

USING FLEXBOX

body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; ... }

Use Semantics for the proper design of your code.

<body> <main>... main content goes here ...</main> <footer>... .attribution div goes here ... </footer> </body>

It would be better if you use source media for switching to screen sizes(mobile or desktop) for image.

<picture> <source media="(min-width:800px)" srcset="yourimage.jpg"> <img src="yourimage.jpg" alt="description"> </picture>

For non-decorative images give meaningful and descriptive alt like alt= "Gabrielle Chanel Perfume bottle surrounded by leaves.".

Use semantic element for strike-through <s>$169.99</s>

If you want to dive into accessibility for this project check this link

I hope you find this helpful.

Happy coding😄
Marked as helpful
0
Gean-Junio•20
@Gean-JunioSubmitted about 1 year ago
Solução do desafio usando HTML e CSS.
1
_nehal💎•6,710
@NehalSahu8055Posted about 1 year ago
Hello Coder 👋

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

Every site must have one h1 element describing the main content of the page.

So, Add a level-one heading

<h1>Improve you frontend skills by building projects</h1>

Use Semantics for the proper design of your code.

<body> <main>... main content goes here ...</main> <footer>... .attribution div goes here ... </footer> </body>

For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

I hope you find this helpful.

Happy coding😄
Marked as helpful
0
beowulf1958•1,450
@beowulf1958Submitted about 1 year ago
What are you most proud of, and what would you do differently next time?
learning to use Sass variables
What challenges did you encounter, and how did you overcome them?
I had a bit of trouble with centering the card at first; check on solutions to other challenges by other people and was able to finally get it centered
What specific areas of your project would you like help with?
my h1 breaks the line differently than the design jpg
QR Code version 2 semantic HTML
2
_nehal💎•6,710
@NehalSahu8055Posted about 1 year ago
Hello Coder 👋

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

Use min-height:100vh instead of height:100vh To dynamically center the card

For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

I hope you find this helpful.

Happy coding😄
Marked as helpful
1
JesnerW•210
@JesnerWSubmitted about 1 year ago
flexbox + moder css :D
1
_nehal💎•6,710
@NehalSahu8055Posted about 1 year ago
Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

It would be better if you use source media for switching to screen sizes(mobile or desktop) for image.

<picture> <source media="(min-width:800px)" srcset="yourimage.jpg"> <img src="yourimage.jpg" alt="description"> </picture>

For non-decorative images give meaningful and descriptive alt like alt= "Gabrielle Chanel Perfume bottle surrounded by leaves.".

Use semantic element for strike-through <s>$169.99</s>

Use <button></button> for button as it a semantic element

If you want to dive into accessibility for this project check this link

I hope you find this helpful.

Happy coding😄
Marked as helpful
0
Sarah Cooper•30
@SarahCooper-TCSubmitted about 1 year ago
Can you use Display: block instead of Display: flex for this?
QR-Code CSS/HTML
2
_nehal💎•6,710
@NehalSahu8055Posted about 1 year ago
Hello Coder 👋

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

Use min-height:100vh instead of height:100vh To dynamically center the card

body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; ... }

Use Semantics for the proper design of your code.

<body> <main>... main content goes here ...</main> <footer>... .attribution div goes here ... </footer> </body>

For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

I hope you find this helpful.

Happy coding😄
Marked as helpful
1
syfe-hub•20
@syfe-hubSubmitted about 1 year ago
Easy as falling off a log :)
Identify the problem. The first step is to know which problem you need
1
_nehal💎•6,710
@NehalSahu8055Posted about 1 year ago
Hello Coder 👋

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

To dynamically center the card use min-height:100vh instead of height:100vh

body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; ... }

Use Semantics for the proper design of your code.

<body> <main>... main content goes here ...</main> <footer>... .attribution div goes here ... </footer> </body>

For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

I hope you find this helpful.

Happy coding😄
Marked as helpful
0
Raiquen248•30
@Raiquen248Submitted about 1 year ago
I waiting for more!
My First Challenge from Frontend Mentor HTML and CSS
1
_nehal💎•6,710
@NehalSahu8055Posted about 1 year ago
Hello Coder 👋

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

Don't use margins to center the card, To dynamically center the card

USING FLEXBOX

body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; ... }

Use Semantics for the proper design of your code.

<body> <main>... main content goes here ...</main> <footer>... .attribution div goes here ... </footer> </body>

For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

I hope you find this helpful.

Happy coding😄
Marked as helpful
0
Yeni•180
@YeniUvwoSubmitted about 1 year ago
Responsive layout using CSS flexbox
1
_nehal💎•6,710
@NehalSahu8055Posted about 1 year ago
Hello Coder 👋

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

Don't use paddings or margins for centering the card as it will not dynamically center the card remove this and use either flex or grid for the same

To properly center the card

USING FLEXBOX on the parent element

body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; ... }

You are wrapping main and footer inside a div its unnecessary to do this.

For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

I hope you find this helpful.

Happy coding😄
Marked as helpful
0
Nakul•140
@Official-NakulSubmitted about 1 year ago
Responsive QR Card template with felx-box and grid
1
_nehal💎•6,710
@NehalSahu8055Posted about 1 year ago
Hello Coder 👋

Congratulations on successfully completing the challenge! 🎉

Regarding your image issue

Since you are using your site with vite your images will not work unless you put your qr-image inside public folder

Tip : You can generate a new screenshot after making the necessary changes

I hope you find this helpful.

Happy coding😄
0
Tushar•200
@tushargola1Submitted about 1 year ago
Qr code responsive
1
_nehal💎•6,710
@NehalSahu8055Posted about 1 year ago
Hello Coder 👋

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

To dynamically center the card

USING FLEXBOX

body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; ... }

Every site must have one h1 element describing the main content of the page.

So, Add a level-one heading

<h1>Improve you frontend skills by building projects</h1>

Use Semantics for the proper design of your code.

<body> <main>... main content goes here ...</main> <footer>... .attribution div goes here ... </footer> </body>

For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

I hope you find this helpful.

Happy coding😄
0

_nehal💎

All comments

qr-code

Product Card Solution

product-preview-card-component-main

Solução do desafio usando HTML e CSS.

QR Code version 2 semantic HTML

flexbox + moder css :D

QR-Code CSS/HTML

Identify the problem. The first step is to know which problem you need

My First Challenge from Frontend Mentor HTML and CSS

Responsive layout using CSS flexbox

Responsive QR Card template with felx-box and grid

Qr code responsive