All solutions

Any feedback is welcome. Thank you.

Any feedback is much welcomed 🙏

I will very much appreciate some feedback on this, I will be keen on best practices. Thank you.

This was an interesting challenge, I used Vuex to manage the state of my application for the first time.

Questions:

• Any best practices on Vue & Vuex I could use to improve this project?
• I couldn't find a good solution to change attributes in my SVG programmatically inside Vue, any suggestion is welcome.
• Any other feedback is welcome.

I would appreciate any feedback. Thank you

I had fun on this challenge 😊. I practised a lot on layouts and positions. I would appreciate any feedback on this challenge. Thank you

Happy coding!

I have been struggling to create a working font system(sizes), spacing system & z-index system. I would like to hear suggestions on this.

On the challenge, I will appreciate feedback on the implementation, thank you. I can take the punches 🙂

I have been struggling to create a working font system(sizes), spacing system & z-index system. I would like to hear suggestions on this.

On the challenge, I will appreciate feedback on the implementation, thank you.

Any feedback is welcome...

This is my second attempt at this challenge.

I will appreciate any feedback, thank you.

This is a classing grid problem. In my initial solution, yes I used grid and everything was properly organized.

I have made updates to use the full power of grid-areas.

** What I learnt**

• using grid-template-columns: repeat(4, 1fr); yields different results from grid-template-columns: repeat(4, auto); I think auto tries to fit everything nicely by utilizing all the available space whereas 1fr is some form of a unit that is respected by grid.
• z-index can only work if the element is positioned as absolute, relative, sticky or a flex/grid item

I would love some feedback. Thank you.

I have a non-ending problem with positioning background images, I struggled to place these patterns behind the cards. What do you use to position the images:

1. multiple media queries
2. percentages
3. pixels ...

Implementing feedback from the comments below 👇

• Added accessibility on input focus
• Better background images positioning

** What I have learnt**

• You can use box-shadow to add a border around an element, esp when using focus-within
• Prefer background when adding background patterns.
• You can add & position multiple images using background on the same element.
• Normally patterns are for decoration purposes. If you choose to use img tags, avoid setting alt, they may cause confusion to screen-readers.

    background-image: url(img_url), url(img_url);
    background-position: left bottom, right top;
    background-repeat: no-repeat, no-repeat;
    background-size: n, n;

Thanks for the feedback and likes.

Happy coding 😊

I had some trouble implementing the theme-toggler. Apparently, browsers implement the getComputedStyle API differently. I was looking for a neat way of changing the colours without saving them on local storage or in memory.

I am happy to get more ideas on this. Thank you.

I will appreciate some feedback, thank you.

• Update on the solution.

I updated my solution as follows:

 - use ems & rems
    - paddings @media-queries(em)
    - font-sizes, margins .... (rems)
 - use grid-areas
 - use sass in place of css
 - Have fun with basic animations