Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Live Site URL: https://article-card-emjogale.vercel.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox and grid layout
- Mobile-first workflow
I should write the README file alongside working on the project and not leave it until after I've finished! Later when I revisited the project to improve the functionality (see continued development below) I learnt that it is good practice to avoid contamination in files and to keep the CSS and Javascript to their own files.
I need to improve a lot on the implementation of the javascript aspects and also the css needs improvement - the active states aren't working correctly yet - certainly in some of the smaller screen sizes. I sought out some advice on the fact that the way I first implemented the active states was by changing the style property within the javascript file. This meant you had to click the button twice before the active state appeared. I sought some advice on this and was told that it is best to keep CSS out of the Javascript file - this was very good advice. I realised a much better way was to toggle a class which was defined in the CSS file.
- Frontend Mentor - @emjogale
- Twitter - @emmagale2635