Latest solutions
ADVICE GENERATOR APP USING SVELTE/SVELTEKIT, TAILWIND, DAISYUI, VITE
#accessibility#animation#fetch#svelte#tailwind-cssSubmitted over 2 years ago
Latest comments
- @ookamidigital@omar-jalal
-
Hey nice design, here's how you can fix the image you need to give it background-size: contain; and background-repeat: no-repeat;
-
You shouldnt use alot of divs in the HTML it's a bad practice for SEO and WAI-ARIA reasons search about them for more info, and you can't put a <p> inside a <button> too.
-
You can't skip or repeat a head tag you always start from <h1> because every page needs it and you keep ascending from there if you need to add more.
-
You need to wrap everything in the page in <main> tag
-
Use <picture> tag instead of importing the image in the css so you can switch between the desktop and mobile image versions responsively!
-
Hope that was helpful, happy coding!
Marked as helpful -
- @dzakwanpxr@omar-jalal
- Hey your design is awesome but here a little tip to make it even better, make a class for transition and add it to every interactive element to make your design more smooth you can make it like this for example:
.smooth { transition: all ease-in-out .25s; }
-
and you shouldn't use div so often but if you have to you need to use role="" attribute for accessibility reason, for more info search for: WAI-ARIA.
-
and you should add media query for mobile layout and desktop layout in css file.
-
HAPPY CODING!
- @rakibhossainraju@omar-jalal
Hi, your design is awesome and accurate but you can improve it even more! -Use normalize.css to remove elements default values instead of doing it manually. -Use <picture> to switch between different photos in mobile layout instead of display: none/block. -Use Rem and Em instead of Px for media queries to make your website more accessible.