Latest solutions
newsletter-sign-up using react+typescript+tailwindcss+email validator
#react#typescript#tailwind-cssSubmitted 5 months ago
Latest comments
- @praveen952@PiotrPlotast
Hey, well done on completing the challange! If you're just starting out keep going! I see you applied very basic css reset and that's good, for bigger projects you could look at: andy bells css reset. The one thing I'd change is
h2
font-size
to fit in two lines. To add some accessibility(some may prefer bigger font size as their browsers default)padding
could be applied withrem
orem
units, besides that very well done! - @Mahmoudamin11@PiotrPlotast
Hi, first of all congrats on completing the challange! I'll advice you:
- Instead of
<div class="header">
you could use<header>
tag. It's part of semantic html(I see you know what it is). - instead of 2 different imgs for mobile and desktop view use
<picture>
tag element withsrcset
andmedia
attributes. MDN article on picture element. - there's a bug on the website, when i click anywhere nav buttons dissapear, you should work on this issue
-do not use
px
units as much and especially for anything related to font as it breaks accessibility(read about realtive units, the most important areem
rem
and less importantch
). For instancefont-size: 16px;
should befont-size: 1rem;
as it scales with users browser font size and px don't. - you could clean up unnecessary comments in your css because there's a lot of unused styles.
- read about mobile first approach(trust me it's easier in the end)
- socials icons should be links
- read about aria-attributes for mobile nav menu
Marked as helpful - Instead of
- @zoedarkweather@PiotrPlotast
Hey, great job completing the project! I've done it recently as well so the tips from me would be:
- add
placeholder
to the email input html element with the text Your email address... - adjust some margins between
h1
andp
- instead of wrapping
h1
andp
in adiv
you could just useh1
andh2
semantic structure - font size on the button could be bigger.
- If you need any help write it in the reply :)
- add
- @williamc712@PiotrPlotast
When you need to change image depending on the size of the screen you should use
picture
html element. Here is helpful article on mdn: The picture element - @NxumaloDev@PiotrPlotast
Hi, here's some advice from me:
- In your project if you have images uploaded and want them to display properly in your GitHub page, the source of the image should start with ./ and not with / ->
<img src="./images/image-product-desktop.jpg" alt="" class="desktop">
. - If your image changes depending on the screen size you should use
picture
html element. - You should do mobile-first approach for your web pages(it's easier trust me).
- Font size shouldn't be in
px
units, instead search forem
andrem
units. - Read about Semantic HTML
Marked as helpful - In your project if you have images uploaded and want them to display properly in your GitHub page, the source of the image should start with ./ and not with / ->
- @Unanimous-1001@PiotrPlotast
Hello, in this project you don't need to worry about your js experience due to the fact that this is html and css only project which means it's static page with no js needed. Flex is by far the easiest way to do layouts, I'd recommend watch/read about it and its properties. In this particular project
flex-direction: column;
could be helpful for the layout of your component. You should avoid using px units withfont-size
, instead read/watch about relative units likeem
andrem
. Overall you did a good job. Stay strong and keep learning! ;)