All comments

Maikl-k•10
@Maikl-k
Submitted over 1 year ago
qr-code
1
_nehal💎•6,710
@NehalSahu8055
Posted over 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😄
Ana Inocêncio•30
@heyannli
Submitted over 1 year ago
Product Card Solution
2
_nehal💎•6,710
@NehalSahu8055
Posted over 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😄
rachidnaitlahaj•20
@rachidnaitlahaj
Submitted over 1 year ago
product-preview-card-component-main
#itcss
3
_nehal💎•6,710
@NehalSahu8055
Posted over 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
Gean-Junio•20
@Gean-Junio
Submitted over 1 year ago
Solução do desafio usando HTML e CSS.
1
_nehal💎•6,710
@NehalSahu8055
Posted over 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
beowulf1958•1,890
@beowulf1958
Submitted over 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
#accessibility
2
_nehal💎•6,710
@NehalSahu8055
Posted over 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
JesnerW•210
@JesnerW
Submitted over 1 year ago
flexbox + moder css :D
1
_nehal💎•6,710
@NehalSahu8055
Posted over 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
Sarah Cooper•30
@SarahCooper-TC
Submitted over 1 year ago
QR-Code CSS/HTML
#accessibility#web-components
2
_nehal💎•6,710
@NehalSahu8055
Posted over 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
syfe-hub•20
@syfe-hub
Submitted over 1 year ago
Identify the problem. The first step is to know which problem you need
1
_nehal💎•6,710
@NehalSahu8055
Posted over 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
Raiquen248•30
@Raiquen248
Submitted over 1 year ago
My First Challenge from Frontend Mentor HTML and CSS
1
_nehal💎•6,710
@NehalSahu8055
Posted over 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
Yeni•180
@YeniUvwo
Submitted over 1 year ago
Responsive layout using CSS flexbox
#accessibility#progressive-enhancement
1
_nehal💎•6,710
@NehalSahu8055
Posted over 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
Nakul•140
@Official-Nakul
Submitted over 1 year ago
Responsive QR Card template with felx-box and grid
#react#vite
1
_nehal💎•6,710
@NehalSahu8055
Posted over 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😄
Tushar•200
@tushargola1
Submitted over 1 year ago
Qr code responsive
1
_nehal💎•6,710
@NehalSahu8055
Posted over 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😄
YoniDev•20
@YoniiDev
Submitted over 1 year ago
Results summary component [HTML+CSS+SASS+FLEXBOX+BOX MODEL+MEDIAQUERY]
#sass/scss
1
_nehal💎•6,710
@NehalSahu8055
Posted over 1 year ago
Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.
- Add min-height:100vh to your .seccion_results_summary_component to dynamically center the card.
- Use responsive units(rem, em, %) from next project to increase responsiveness. Explore respective use cases on google.
- Use max-width instead of width to make your design responsive.
I hope you find this helpful.

Happy coding😄
Marked as helpful
Marisa Phungbunphra•20
@chalisamie
Submitted over 1 year ago
HTML and CSS for QR Code Payment
#contentful#cube-css#webflow#wordpress#accessibility
3
_nehal💎•6,710
@NehalSahu8055
Posted over 1 year ago
Hello Coder 👋

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.
- For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".
- Use Semantics for the proper design of your code.
```
<body>
<main>... main content goes here ...</main>
<footer>... .attribution div goes here ... </footer>
</body>
```
- Use responsive units(rem, em, %) from next project. Explore respective use cases on google.
I hope you find this helpful.

Happy coding😄
Joey•10
@joelbaah
Submitted over 1 year ago
QR Code Component
1
_nehal💎•6,710
@NehalSahu8055
Posted over 1 year ago
Hello Coder 👋

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.
- Don't use position 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
```
.qrcard {
    /* position: relative; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-40%,40%); */
}
```
- To properly 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😄
Marked as helpful
julian•340
@lspacka
Submitted over 1 year ago
QR code component with HTML and CSS
2
_nehal💎•6,710
@NehalSahu8055
Posted over 1 year ago
Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.
- Remove margins and add min-height:100vh to your .qr-container to dynamically center the card.
- 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
Kashyxp-patel•70
@Kashyxp-patel
Submitted over 1 year ago
Product-card-component using html and css.
2
_nehal💎•6,710
@NehalSahu8055
Posted over 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😄
LDX_DEV•190
@ledoux25
Submitted over 1 year ago
Responsive product review card using flex and scss
#accessibility#sass/scss
2
_nehal💎•6,710
@NehalSahu8055
Posted over 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>
```
- Use semantic element for strike-through <s>$169.99</s>
- For non-decorative images give meaningful and descriptive alt like alt= "Gabrielle Chanel Perfume bottle surrounded by leaves.".
- If you want to dive into accessibility for this project check this link
I hope you find this helpful.

Happy coding😄
Marked as helpful

_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

Results summary component [HTML+CSS+SASS+FLEXBOX+BOX MODEL+MEDIAQUERY]

HTML and CSS for QR Code Payment

QR Code Component

QR code component with HTML and CSS

Product-card-component using html and css.

Responsive product review card using flex and scss