@hmark94
Submitted
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.
Looking to hire developers?
@WebDevMirza
@hmark94
Submitted
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.
@WebDevMirza
Posted
Hi,
To validate a form in react, you can use formik
and yup
package. They are easy to use and have enough resources in docs on how to apply to a project.
Thank you.
Marked as helpful
@uepzues
Submitted
@WebDevMirza
Posted
Hi,
I skim through your code line by line. I want to share my views.
HTML
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:
<h1></h1>
with small font size to solve Page should contain a level-one heading
warning.alt
text for image to solve Images must have alternate text
error.CSS:
main {
........................
........................
letter-spacing: 0.05em;
line-height: 1.6;
}
Apart from this, the rest of the part is great.👍 I hope, this might help you. 👍👍👍
Thank you.
Hi, I'm Tiago. This is my solution for the product preview card component
Built With:
Feel free to To give sugestions/ feedback. Thank you!
@WebDevMirza
Posted
Hi,
Congratulation on this solving this project.
alt
text inside source
tag.alt
tag in img
.<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 helpful
@danilo-easy33
Submitted
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.
@WebDevMirza
Posted
Hi,
Congratulation on completing this project. You have already found a problem regarding bg-image.
HTML:
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 SchoolCSS 🙂
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%);
}
Apart from this, the rest of the part looks nice.👍
Marked as helpful
@KaiqueNeres
Submitted
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.
@WebDevMirza
Posted
Hi,
Congratulation on completing this project. You have already found a problem regarding bg-image.
HTML:
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 SchoolCSS 🙂
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%);
}
Apart from this, the rest of the part looks nice.👍
Marked as helpful
@GautamArora7
Submitted
@WebDevMirza
Posted
Hi,
I found several issues where you can improve your code.
HTML:
<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<h1></h1>
with small font size to solve Page should contain a level-one heading
warning.CSS
p {
font-size: 15px;
text-align: center;
color: hsl(220, 15%, 55%);
padding: 10px 25px;
}
.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.
@Chanawin-kmpn
Submitted
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.
@WebDevMirza
Posted
Hi,
HTML:
button
for navigating to another page, <a></a>
is the best approach. button
is mainly use for submitting data to the server.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
button {
cursor: pointer;
}
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 helpful
@felipecarpes
Submitted
QR Code component: responsive card containing QR Code that redirects to frontend mentor page
@WebDevMirza
Posted
Hi,
I found an area where you can improve your code.
HTML:
<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<h1></h1>
with small font size to solve Page should contain a level-one heading
warning.alt
text for image to solve Images must have alternate text
error.CSS
.qr-img {
height: 250px;
width: 100%;
border: 1px #000 solid;
border-radius: 0.625rem;
}
border: 1px #000 solid;
since the provided design has no border..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.👍👍
@WebDevMirza
Posted
Hi,
I found an area where you can improve your code.
<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 SchoolApart from this, the rest of the part is great.👍
Marked as helpful
@AgeOfUltra
Submitted
Any suggestion and advices are accepted!🥲
@WebDevMirza
Posted
Hey,
Good work on that. On desktop version, it looks great. But in mobile version, the design is not the same as it should be.
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 helpful
@uepzues
Submitted
@WebDevMirza
Posted
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 helpful
@carllouislabutong
Submitted
Im just having a hard time on media queries for phone size
@WebDevMirza
Posted
Hey,
container
and set max-width: 375px
margin: 0 auto
to centerhtml part is good. You can make better css by improving. I hope this might help you. Thank you.
I still have a little difficulty with the rem and em measurements, but I believe I will improve with time. Thank you very much.
@WebDevMirza
Posted
Hi,
What a nice strategy to handle this project! I appreciate the way you are writing css. Nice and easy to understand to anyone.
px
to rem
or em
. Then, I shrink the unit only 1 rem = 16px
1.25rem = 20px
1.5rem = 24px
1.75rem = 28px
and 0.25rem = 4px
0.375rem = 6px
0.5rem = 8px
and so on. I think you get the idea that I have use for simplicity.Hope this might help you. Thank you. Keep the good work on.
Marked as helpful
@darkboldman
Submitted
@WebDevMirza
Posted
Hi,
I have noticed that you missed the :hover
effect on button and icons. You may add some color, transitions on hover state. Hope this might help you. The design also misses left and right spacing.
main, header, footer{
max-width: 1440px;
width: 80%;
margin: 0 auto;
}
Apart from that, rest of the section is good Keep the good work on.
Thank you.
Marked as helpful
@andressalazar08
Submitted
Hello everyone, this is my solution to the three column card challenge. I appreciate in advance the comments to improve. Happy coding!!.
@WebDevMirza
Posted
Hmm,
Great Works! You can do more stuff to improve the css. I have noticed that there is no hover effect in button.
Hopes, this might help you.
Apart from these, overall design is okay. Congratulation on that.
Thanks.
Marked as helpful
@PrayagTandon
Submitted
Created my first project using mobile-first approach. Any suggestions to improve further on this method would be helpful to me.
I used CSS Flexbox to layout the components. Is that a good approach or should I use CSS Grid or Float to layout the components?
@WebDevMirza
Posted
Hi,
Your design looks good in mobile version. But in large screen desktop, the right side of design is not the same that should be. My suggestion is to add the following code in css:
@media (min-width: 40em)
.text-box {
padding: 4.8rem 2.4rem 3.2rem;
max-width: 350px;
}
The design is not fully responsive. You made some mistakes in applying flexbox stuff. Apart from this, overall design is great. Congratulation.
Thanks.
@lexsac
Submitted
I found spacing decisions and layout the most challenging. For example, I've read that it's best to shy away from declaring font-size in pixels, but saw pixel size in the Figma design file. What is best practice?
I had the same questions around layout - how exact does spacing between items need to be?
@WebDevMirza
Posted
Hello, congratulations on completing this project successfully.
Your query was how to use units in css. Well, there are two types of unit available in css. One is absolute unit and the other one is relative. If you design a responsive layout, you should go for relative unit. Both em
and rem
are relative unit based on parent and root font size respectively.
rem
is the best for font-size.bootstrap
and tailwind
use these relative units, even in margin and padding.NB: This does not mean that px
is useless. Use it when you feel it.
Thank you.
Marked as helpful
@vishnu-suderson
Submitted
this is my first project i had done it is not so difficult. i got stuck in the responsive web
@WebDevMirza
Posted
Hello,
Good work on the very first project. I have noticed several issues though. But it can be mitigated. Some of my suggestions are as follows:
rem
or em
unit instead of %
or px
to make responsive design.button
for better user experience.Your html
has better readability. It is really nice to read through. Good Job on html and flexbox related stuff.
Thank you.
@s4nd0
Submitted
I'd love to hear your comments on my solution
@WebDevMirza
Posted
Hello,
I have examined your code and found some issue. The design is not vertically centered. use min-height:100vh
and align-items: center
on flexbox. Font size of h1 is too big. Making it smaller would be the best approach to handle.
Thank you.
Marked as helpful
I had a problem putting the cart icon inside the button.
@WebDevMirza
Posted
Hi,
Nice work! To insert cart icon inside the button, you may use font awesome
. Then add the following code:
<button><i class="fa-light fa-cart-shopping"></i>Add to cart</button>
Do not forget to add <link />
of font awesome in <head>
.
Thank you. Hope, this might help you.
@Chanawin-kmpn
Submitted
I'm still not sure about the alignment of objects using display margin and padding as to when I can use them. And I think I still don't have the ability to complete the responsive part, it seems to be the height part when it is minimized and also some parts are not fully displayed.
@WebDevMirza
Posted
Hi, Good works on that. I've checked your code and I've two suggestions on the basis of that code:
rem
em
etc for responsive UI/UX design.Thanks. Hope this might help you.
@alencardotpy
Submitted
Check out this new project! feedback accepted.
@WebDevMirza
Posted
Hi,
Good works. But I have experienced some issue on large screen above 1440px. The component is not centered well although it looks good on small screen laptop. Hence, my suggestion is to add the following code on body
tag (inside media query):
body{
min-height: 100vh; //instead of height:auto
display: flex;
justify-content: center;
}
Hope this might help you. Thank you.
Marked as helpful