@Akunamo
Latest solutions
Latest comments
- @Kristiana12
Hey @Akunamo,
I did the same challenge, and I got a headache too, for almost a week. But I also learned a lot and would like to share my knowledge with you:
About the layout:
- When using
position: absolutewith left/right in %, you should be careful because they might not look that good on bigger screens. Making an extra breaking point with fixed values should solve that problem. - About the logo, what you did was clever, but in the files, there was a logo SVG file, which you could have used to spare you some code and time
- You could add some hover and active effect on your submit button
About the Form:
- I would read the HTML issues listed and fix them. (you learn a lot through mistakes)
- Input type number, unfortunately, does not support maxlength and pattern attributes. I switched to input
type=" text"cause I couldn't find another solution. - I would consider adding some more conditions, for example: no numbers allowed on the cardholder's name field, where you expect numbers (month, year, CVC), maybe also show errors. (I used regular expressions to solve this problem via js)
- And also restrict the maxlength of the inputs, via
type=" text" maxlength="2"
I hope some of these suggestions might help you and give you some new ideas for your project!
Happy Coding!
Marked as helpful - When using
- @Athlla@Kristiana12
hi Athilla 👋🏻
I really like the result on the desktop and mobile version! Well done!! 👏
Here are some suggestions that you could improve in your solution:
- It seems you forgot the background image for the first card
- In the desktop version it has a lot of white space, try implementing a 2 column grid there.
- try using more HTML semantic elements, it helps the screen readers to better view the website and also is better for search engines to better understand what your website is about, for example instead of
pyou can useblockquote.
Keep up the good work and happy coding :)
- @GabrielaParedes27@Kristiana12
Hey there Gabriela,
nice outcome!!
A couple of things that I think you could improve are:
-
you can use more HTML semantics, for your buttons for example do not use 'div' but 'button' instead. Also instead of
div class=cardyou can usemain. -
Do not use pixels, instead use rem or em units. If I have trouble reading the text cause the font is too small and I want to scale the website, I will not be able to because pixels are not scalable, rem and em units are.
Keep up the good work :)
Marked as helpful -
- @robpan38@Kristiana12
Hey,
good job on this one!! The result looks pretty amazing!!
There are a couple of suggestions I would like to give you to improve your code:
-
instead of using 'div class=main' use the 'main' HTML semantic, that way you can get rid of one of the accessibility issues.
-
'--font: Poppins; --fallbackFont: sans-serif;' it is not necessary to separate them just use this one: '--font: 'Poppins', sans-serif' if the browser does not support the font Poppins then it applies the sans-serif automatically
-
try not to repeat yourself, for example you use for each 'img' the exact same code snippet, just do this '.supervisor img, team-builder img, .karma img, .calculator img`.
On the other hand try implementing flexbox at `.supervisor, .team-builder, . karma, .calculator' it is easier to place the items then you don't have to 'position: absolute' and write so much code.
- i would have done one more breaking point where they stand two next to each other cause at some point when you decrease the screen size they look too squeezed.
Happy coding :)
-
- @FluffyKas@Kristiana12
Good job, the outcome looks great!! I noticed you have used 'h1' for the titles, it is better when you use
h2orh3. There should only be one h1 per website because they are important for the SEO, that means they tell google what your page is all about and appears in the search results accordingly. Keep up the good work! Happy Coding :)
