Amon

@A-amon
1,885Points

Do check out my works~ Github: https://github.com/A-amon

Latest Solutions

  • Desktop design screenshot for the Room homepage coding challenge

    HTML, SCSS, JS

    • HTML
    • CSS
    • JS
    Amon1,885
    Submitted

    Any feedback is welcomed!

  • Desktop design screenshot for the Ping single column coming soon page coding challenge

    HTML, SCSS, JS

    • HTML
    • CSS
    • JS
    Amon1,885
    Submitted

    Any feedback is welcomed!

  • Desktop design screenshot for the Base Apparel coming soon page coding challenge

    HTML, SCSS, JS

    • HTML
    • CSS
    • JS
    Amon1,885
    Submitted

    Any feedback is welcomed!

  • Desktop design screenshot for the Four card feature section coding challenge

    HTML, SCSS, JS

    • HTML
    • CSS
    Amon1,885
    Submitted

    Any feedback is welcomed!

  • Desktop design screenshot for the Job listings with filtering coding challenge

    React JS

    • HTML
    • CSS
    • JS
    Amon1,885
    Submitted

    Any feedback is much appreciated!

  • Desktop design screenshot for the Insure landing page coding challenge

    HTML, SCSS, JS - Mobile First

    • HTML
    • CSS
    • JS
    Amon1,885
    Submitted

    Its my second try at mobile-first. My thoughts on mobile-first method is that it feels like it makes the coding a lil less complicated (I might be wrong tho!)

    Anyway, any feedback and suggestion is welcomed!

Latest Comments

    • HTML
    • CSS

    Mobile first Huddle landing page with single introductory section

    3
    Amon1,885 | Posted 2 days agocommented on Mgbojikwe Chukwuebuka's "Huddle landing page with a single introductory section" solution

    Hello! Great work~ The responsiveness works well.

    I have a few suggestions:

    • Wrap the main content into main tag.

    • Increase the vertical padding of Register button.

    • Wrap the logo into a tag.

    Other than that, well done!

    0
    • HTML
    • CSS
    • JS

    Todo App built with React using Sass and Typescript

    8
    Amon1,885 | Posted 3 days agocommented on Jesuloba Abere's "Todo app" solution

    Hello! Great job~

    I have a few suggestions (Don't take my words for these tho! πŸ˜‚) :

    =(props)=>

    It would be:

    = ({isDark, numberOfItemsLeft}) =>

    This ^ is just my preference tho! πŸ˜‚

    1
    • HTML
    • CSS
    • JS

    Mobile First | HTML, CSS, JS

    1
    Amon1,885 | Posted 3 days agocommented on Felipe BerrΓ‘z's "Ping single column coming soon page" solution

    Hello! Great work~ The responsiveness looks good too!

    I have a few suggestions:

    • Everything (font-size and image) looks a little oversized. Maybe, shrink them? πŸ˜‚

    • Putting script element among the code...It's my first time seeing this. πŸ€” Not sure if it's right or wrong but, you can try putting it at the end of body tag, right before closing.

    • I believe your input element should have a label element for it or an aria-label attribute. Check this out: https://stackoverflow.com/questions/9157867/placeholder-vs-label-for-input-in-html5

    • Instead of div for each social media icon, they should have been a tags.

    • Instead of setting styles directly inside JS, add/remove or toggle class instead.

    I learnt about using title tags inside svg. Awesome! πŸ˜€

    0
    • HTML
    • CSS
    • JS

    TodoList with React JS

    2
    Amon1,885 | Posted 3 days agocommented on Shadow Hunter's "Todo app" solution

    Hello! Nicely done~ πŸ˜€

    I have a few suggestions:

    • I noticed the text in your .todoList__controls are wrapped up in between 768px and 1024px (based on devtools) πŸ€”

    • About the React code, don't trust my word on my suggestions though. Use it if you feel it makes sense. πŸ˜‚

    • The Todo.js seems really messy. You can split the header (todo logo and light/dark mode toggle) and list item into their own components. 🧱🧱

    • One alternative I could think of now to prevent mixing up the UI code and the logic would be, instead of doing the comparison whether the list item is part of the filtered items among the UI code e.g. todoList.filter(...) and let itemsReference = ... It would be better to have a function to do it. For example, having a function when one of the filter buttons is clicked. Inside it, you could filter the todoList state. When the state changes, the list item should update accordingly to it. This way, you should only need 1 loop. πŸ˜€ I hope you get what I'm trying to say.

    • You can put null (If I remember correctly πŸ˜‚) if you want to just add/remove .current__filter class. This way, you just need one class to do the job.

    • .mobileFilters inline styles seem more suitable to be done using CSS media queries.

    1
    • HTML
    • CSS
    • JS

    [2nd] Sign-up Form w/ CSS grid, JS - Newbie

    9
    Amon1,885 | Posted 3 days agocommented on Sloth247's "Intro component with sign-up form" solution

    Hello! Looks great~ It's responsive too.

    I have a few suggestions for you πŸ˜€:

    • Why do you have wrap a line inside h1 with span tag?πŸ€” You can try using br tag to break the line of the same sentence. (Don't abuse it tho! Check out https://forum.freecodecamp.org/t/should-you-ever-use-the-br-tag/440252/2 for how to use it semantically.)

    • Try to not set styles directly in JS if possible. Add/remove or toggle class instead. E.g. Adding .error class to show error-related styling.

    • Instead of having an unused empty label, set the aria-label attribute on input element. (Doing this allows you to remove the label element)

    • The alt text for your error icon might not be appropriate πŸ€”, because imagine if the screen reader reads out "Exclamation" or something else to users. Maybe, "Warning", etc. would be better. Or if you wish to hide it, just leave the alt empty. Check this out: https://dev.to/nadiarasul/do-icons-need-alt-attributes-5g52

    1