I need to prioritize improving the form validation and optimizing the responsive design. Although I'm new to using Tailwind CSS, I'm committed to learning it efficiently to enhance the user experience.
Mirza Monirul Alam
@WebDevMirzaAll comments
- @hmark94Submitted almost 2 years ago@WebDevMirzaPosted almost 2 years ago
Hi,
To validate a form in react, you can use
formik
andyup
package. They are easy to use and have enough resources in docs on how to apply to a project.Thank you.
Marked as helpful1 - @uepzuesSubmitted almost 2 years ago@WebDevMirzaPosted almost 2 years ago
Hi,
I skim through your code line by line. I want to share my views.
HTML
- You use
picture
source
combination to deal with device oriented pictures which is the best in my opinion. 👍 👍
I also found some areas where you can improve your code.
HTML:
- Give a
<h1></h1>
with small font size to solvePage should contain a level-one heading
warning. - Provide an
alt
text for image to solveImages must have alternate text
error.
CSS:
main { ........................ ........................ letter-spacing: 0.05em; line-height: 1.6; }
- Add this two line of code and observe the change. Spacing is important to improve design.
Apart from this, the rest of the part is great.👍 I hope, this might help you. 👍👍👍
Thank you.
0 - You use
- @tiago-roSubmitted almost 2 years ago
Hi, I'm Tiago. This is my solution for the product preview card component
Built With:
- HTML
- CSS
- Flexbox
Feel free to To give sugestions/ feedback. Thank you!
@WebDevMirzaPosted almost 2 years agoHi,
Congratulation on this solving this project.
- You do not need
alt
text insidesource
tag. - Use
alt
tag inimg
.
<picture> <source media="(min-width: 376px)" srcset="images/image-product-desktop.jpg" > <img src="images/image-product-mobile.jpg" alt="Perfume Channel Gabrielle"> </picture>
I hope that it might help you. 👍
Thank you.
Marked as helpful1 - @danilo-easy33Submitted almost 2 years ago
I had difficulty making the background of the body, the image moves with the zoom, and I had difficulty because it came with two images.
@WebDevMirzaPosted almost 2 years agoHi,
Congratulation on completing this project. You have already found a problem regarding bg-image.
HTML:
- Every html should have a
main
tag that you have not applied. Wrap everything inside<main></main>
to solve accessibility WARNING that you have now.main
is used for the unique part of the site where any repeated sections such as nav, sidebar, footer are not allowed. For more info visit W3 School
CSS 🙂
body { background: url(../img/bg-pattern-top.svg) no-repeat right 50vw bottom 40vh, url(../img/bg-pattern-bottom.svg) no-repeat left 50vw top 54vh; background-color: hsl(185, 75%, 39%); }
- This will add the background images at the position that they should be. 🧐
Apart from this, the rest of the part looks nice.👍
Marked as helpful0 - Every html should have a
- @KaiqueNeresSubmitted almost 2 years ago
I had difficulty making the background of the body, as it came with two images, and I could not position myself equal to the challenge.
Initially I had difficulty with the color of the border below the name of the city, because I was not getting the color tone right, but I managed.
@WebDevMirzaPosted almost 2 years agoHi,
Congratulation on completing this project. You have already found a problem regarding bg-image.
HTML:
- Every html should have a
main
tag that you have not applied. Wrap everything inside<main></main>
to solve accessibility WARNING that you have now.main
is used for the unique part of the site where any repeated sections such as nav, sidebar, footer are not allowed. For more info visit W3 School
CSS 🙂
body { background: url(../img/bg-pattern-top.svg) no-repeat right 50vw bottom 40vh, url(../img/bg-pattern-bottom.svg) no-repeat left 50vw top 54vh; background-color: hsl(185, 75%, 39%); }
- This will add the background images at the position that they should be. 🧐
Apart from this, the rest of the part looks nice.👍
Marked as helpful0 - Every html should have a
- @GautamArora7Submitted almost 2 years ago@WebDevMirzaPosted almost 2 years ago
Hi,
I found several issues where you can improve your code.
HTML:
- Wrap everything inside
<main></main>
to solve accessibility WARNING that you have now.main
is used for the unique part of the site where any repeated sections such as nav, sidebar, footer are not allowed. For more info visit W3 School - Give a
<h1></h1>
with small font size to solvePage should contain a level-one heading
warning.
CSS
p { font-size: 15px; text-align: center; color: hsl(220, 15%, 55%); padding: 10px 25px; }
- You can use shadow in
.card
for good appearance:
.card { box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; }
Best of Luck. 👍 Thank you.
0 - Wrap everything inside
- @Chanawin-kmpnSubmitted almost 2 years ago
In this project, I took a previous mistake and made it better in terms of unit usage and layout. If anyone can give advice or improve any part, you can give me a feedback. Thank you.
@WebDevMirzaPosted almost 2 years agoHi,
HTML:
- Instead of using
button
for navigating to another page,<a></a>
is the best approach.button
is mainly use for submitting data to the server. - Wrap the entire
attribution
with<footer></footer>
to solve accessibility warning that you have now.
<footer> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="https://www.frontendmentor.io/profile/Upond">Chanawin Kamolpanus</a>. </div> </footer>
CSS
- add the following code for button for a hand cursor 👆.
button { cursor: pointer; }
- You may add some transition effect for better UX.
button:hover { color: hsl(0, 0%, 95%); border: 2px solid hsl(0, 0%, 95%); background-color: transparent; transition: all 0.25s 0s linear; }
The rest of the part is fine. Well done. Keep the good work on. 😃 👍
Marked as helpful1 - Instead of using
- @felipecarpesSubmitted almost 2 years ago
QR Code component: responsive card containing QR Code that redirects to frontend mentor page
@WebDevMirzaPosted almost 2 years agoHi,
I found an area where you can improve your code.
HTML:
- Wrap everything inside
<main></main>
to solve accessibility WARNING that you have now.main
is used for the unique part of the site where any repeated sections such as nav, sidebar, footer are not allowed. For more info visit W3 School - Give a
<h1></h1>
with small font size to solvePage should contain a level-one heading
warning. - Provide an
alt
text for image to solveImages must have alternate text
error.
CSS
.qr-img { height: 250px; width: 100%; border: 1px #000 solid; border-radius: 0.625rem; }
- No need to use
border: 1px #000 solid;
since the provided design has no border. - You can use shadow in
.card
for good appearance:
.card { box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; }
Apart from this, the rest of the part is great.👍👍
1 - Wrap everything inside
- @pashaprotonSubmitted almost 2 years ago
- I'm not good at HTML and CSS so the most difficulty was understanding is it the right solution or not
- Everything
- Yes, I do have questions about best practices and I would like to get feedback on how I can improve my code
@WebDevMirzaPosted almost 2 years agoHi,
I found an area where you can improve your code.
- Put everything inside
<section></section>
to<main></main>
to solve accessibility WARNING that you have now.main
is used for the unique part of the site where any repeated sections such as nav, sidebar, footer are not allowed. For more info visit W3 School
Apart from this, the rest of the part is great.👍
Marked as helpful1 - @AgeOfUltraSubmitted almost 2 years ago
Any suggestion and advices are accepted!🥲
@WebDevMirzaPosted almost 2 years agoHey,
Good work on that. On desktop version, it looks great. But in mobile version, the design is not the same as it should be.
- Reduce spacing on both side (left and right) for the mobile version.
- Add
cursor: pointer;
on button and icons.
Rest of the part is fantastic. Keep the good work on. Hopes this might help you.
Thank you.
Marked as helpful0 - @uepzuesSubmitted almost 2 years ago@WebDevMirzaPosted almost 2 years ago
Hey,
Great coding on this project! I have noticed something missing on this project. Your card__heading, and .name class have no cursor pointer. My suggestion is to add the following code:
.name:hover, .card__heading:hover { cursor: pointer; }
I hope this might help you. Keep the good work on. 👌 Thank you.
Marked as helpful0 - @carllouislabutongSubmitted almost 2 years ago
Im just having a hard time on media queries for phone size
@WebDevMirzaPosted almost 2 years agoHey,
- use div
container
and setmax-width: 375px
- use
margin: 0 auto
to center - change your strategy for mobile first. Then desktop. It seems easy to use.
- use media query breakpoint at 768px or 640px
html part is good. You can make better css by improving. I hope this might help you. Thank you.
0 - use div