_nehal💎

@NehalSahu8055

All comments

Maikl-k• 10
@Maikl-k
Submitted 6 months ago
frontend mentor is cool
qr-code
1
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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
@heyannli
Submitted 6 months ago
Product Card Solution
2
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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
@rachidnaitlahaj
Submitted 6 months ago
Feedbacks are welcomed
product-preview-card-component-main
#itcss
3
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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-Junio
Submitted 6 months ago
Solução do desafio usando HTML e CSS.
1
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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• 630
@beowulf1958
Submitted 6 months ago
QR Code version 2 semantic HTML
#accessibility
2
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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
P
JesnerW• 210
@JesnerW
Submitted 6 months ago
flexbox + moder css :D
1
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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
P
Sarah Cooper• 30
@SarahCooper-TC
Submitted 6 months ago
Can you use Display: block instead of Display: flex for this?
QR-Code CSS/HTML
#accessibility#web-components
2
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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-hub
Submitted 6 months ago
Easy as falling off a log :)
Identify the problem. The first step is to know which problem you need
1
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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
@Raiquen248
Submitted 6 months ago
I waiting for more!
My First Challenge from Frontend Mentor HTML and CSS
1
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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
@YeniUvwo
Submitted 6 months ago
Responsive layout using CSS flexbox
#accessibility#progressive-enhancement
1
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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-Nakul
Submitted 6 months ago
Responsive QR Card template with felx-box and grid
#react#vite
1
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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
@tushargola1
Submitted 6 months ago
Qr code responsive
1
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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
YoniDev• 20
@YoniiDev
Submitted 6 months ago
Desde mi perspectiva este diseño quedo bien hecho, pero a la vez me pregunto: ¿Habrá algo que se pueda mejorar en mi código? saludos developers!
Results summary component [HTML+CSS+SASS+FLEXBOX+BOX MODEL+MEDIAQUERY]
#sass/scss
1
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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
1
Marisa Phungbunphra• 20
@marisamie
Submitted 6 months ago
Hi I'm beginning for front-end developer this is my QR Code Payment create by use HTML and CSS if you have any suggestion pls feel free to comment me I want to practice more an more :)
HTML and CSS for QR Code Payment
#contentful#cube-css#webflow#wordpress#accessibility
3
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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😄
0
Joey• 10
@joelbaah
Submitted 6 months ago
Unsure about the attribution styling.

Open to suggestion on how I can improve my overall code & best practices.

Thanks!
QR Code Component
1
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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
1
julian• 90
@lspacka
Submitted 6 months ago
I must say, CSS and especially responsive design are still my weakest points. any feedback on improving on these areas would be most appreciated, or just any feedback in general. Thanks!
QR code component with HTML and CSS
2
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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
2
Kashyxp-patel• 70
@Kashyxp-patel
Submitted 6 months ago
The css is not that organised. If you have any good resources to learn responsive design ping me up....
Product-card-component using html and css.
2
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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😄
0
LDX_DEV• 190
@ledoux25
Submitted 6 months ago
Please check up my code and live site and feedback to help improve
Responsive product review card using flex and scss
#accessibility#sass/scss
2
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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
0
Kenneth Yashim• 50
@kzamani44
Submitted 6 months ago
Hey guys I just completed my 3rd project. Please feel free to check it and send your feedback. Thanks
Modern & Sleek UI product review component
1
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months ago
Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

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

.container { /* 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; ... }

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

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
Shiva Gurung• 30
@Swotantra55
Submitted 6 months ago
Growing the height of the imageContainer div when the contents of the productInfo div increases was something I found challenging.

Does my design look too big? Should I reduce the size of the image and fonts?
Responsive product Card
1
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months 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 cursor:pointer for interactive elements like button here also give some opacity down on hovering.

Headings should always follow sequential order h1, h2, h3, h4..... Also here only one heading is required for 'Gabriel Essence .....' if you are not considering accessibility.

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

I hope you find this helpful.

Happy coding😄
Marked as helpful
1
bks999• 30
@bks999
Submitted 6 months ago
I had some issues with the images that didn't show properly with tag img, and I had to change it to content: url()..
Responsive product preview card
1
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months ago
Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design.

Using margins to center the card is bad practice as it will not dynamically center it , To properly center the card

USING FLEXBOX

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

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
Alex• 1,310
@AlexKolykhalov
Submitted 6 months ago
Hello my friends!

Features:

Controlled by keyboard and Tab

Theme selector

Animated click event

If you find some bugs, please report me. Any comments are welcome.
Calculator App solution HTML+CSS+JS
1
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months ago
Hey Alex!

Overall your solution looks great

I was just checking then I found out that when I divide lets say 9/5 then it gives 1,8 it should be 1.8

Happy Coding
0

Code Heart• 100

@Vpan23

Submitted 6 months ago

Design for a card

Stats preview card component

#accessibility

_nehal💎• 6,730

@NehalSahu8055

Posted 6 months ago

Hello Coder 👋.

Congratulations on successfully completing the challenge! 🎉

Few suggestions regarding design

For Image use
HTML

<picture class="main__picture-header">
      <source media="(min-width: 600px)" srcset="./images/desktop-header.webp">
      <img src="./images/mobile-header.webp" alt="give a proper alt" class="main__header-image" width="540" height="446">
    </picture>

CSS

.main__picture-header {
    background: var(--soft-violet);
}

.main__header-image {
    mix-blend-mode: multiply;
    opacity: .75;
    object-fit: cover;
}

I hope you find this helpful.

Happy coding😄

Marked as helpful

Owaisrafique74• 10
@Owaisrafique74
Submitted 6 months ago
Q1)Should I avoid using % bcz I had a lot of trouble with it and if no where should I use it? Q2)When should we use max-width? Q3)Is it okay to use fit-content? I haven't seen people using it
Creating QR code component using Css Flexbox and Fit-content
3
_nehal💎• 6,730
@NehalSahu8055
Posted 6 months ago
Few suggestions regarding design.

Use min-height:100vh instead of height:98vh to your body 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😄
2

_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

Modern & Sleek UI product review component

Responsive product Card

Responsive product preview card

Calculator App solution HTML+CSS+JS

Stats preview card component

Creating QR code component using Css Flexbox and Fit-content