Skip to content
OverviewSolutions
24
Comments
5
Kristiana12
@Kristiana12

All comments

  • Aviral•160
    @AkunamoSubmitted about 2 years ago

    Phew this project really gave me a lot of headache, BUT it was all worth the knowledge i gained for the problems i faced. Even though i gave it my all there are many thing that could be improved. I would be really grateful for any advice anyone have for me.

    Responsive using vanilla js and media queries

    1
    Kristiana12•425
    @Kristiana12Posted about 2 years ago

    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:

    1. When using position: absolute with 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.
    2. 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
    3. You could add some hover and active effect on your submit button

    About the Form:

    1. I would read the HTML issues listed and fix them. (you learn a lot through mistakes)
    2. Input type number, unfortunately, does not support maxlength and pattern attributes. I switched to input type=" text" cause I couldn't find another solution.
    3. 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)
    4. 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
    1
  • Kristiana12•425
    @Kristiana12Posted about 3 years ago

    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 use blockquote.

    Keep up the good work and happy coding :)

    1
  • Kristiana12•425
    @Kristiana12Posted about 3 years ago

    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=card you can use main.

    • 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
    0
  • Kristiana12•425
    @Kristiana12Posted about 3 years ago

    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 :)

    2
  • Kristiana12•425
    @Kristiana12Posted about 3 years ago

    Good job, the outcome looks great!! I noticed you have used 'h1' for the titles, it is better when you use h2or h3. 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 :)

    1