https://kareenapatel-digitalprofilecardmaker.netlify.app/
HTML / CSS / npm / React.js / Node.js / Vite / Font Awesome
While learning React through Bob Ziroll's Scrimba Course (Learn React), I paid tribute to Per Harald Borgen's Learn HTML and CSS course, his Javascript course and Fredrik Ridderfalk's Learn Accessible Web Design course by creating a customisable digital profile card. In this web application users enter their information edited on the card in real time. The way React handles forms was used as an advantage as the application constantly 'listens' for input changes. In addition, users can customise the card's colours in real time.
- Users enter their details in a form. Each input has a label attached to increase accessibility.
- Placeholder text describes an example entry to improve user experience of those using screen readers.
- Users can select a photo from their device to use.
- An icon can be included at the bottom of the card if users chose so.
- Users have freedom over the colours they pick for the header, card background and image border.
- Responsive design so the page can be displayed on different devices.
- Understanding colour input - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
- Scrimba's Learn React - https://scrimba.com/learn/learnreact
- Scrimba's Learn HTML and CSS - https://scrimba.com/learn/htmlandcss
- Scrimba's Learn Javascript (I took the previous version of the course before the firebase module was added) - https://scrimba.com/learn/learnjavascript
- Scrimba's Learn Accessible Web Design - https://scrimba.com/learn/accessibility
- Able to download card as an image
- Ability to change font colour
- Users choosing the colour of the icon (If possible in Font Awesome)
- Changing UI of colour picking input
- Explore React Color package - https://casesandberg.github.io/react-color/
- On mobile devices, the colour input does not change at all