This project is part of the "Essential CSS Concepts" module from the Frontend Career Path course on Scrimba.
Oldagram simulates a social media platform where users can view posts with photos, comments, and likes. Semantic HTML, interactive CSS effects, and JavaScript were used to dynamically render the posts.
✅ Create the first post.
✅ Use semantic HTML.
✅ Add hover effects to the icons.
✅ Use JavaScript to render out all three posts.
❌ Increase the likes when double clicking the post.
🔳 Importing constants from JS files: I used import to manage icons and data from separate files, keeping the code modular and maintainable.
🔳 Defer in JavaScript: I used the defer attribute to ensure the script runs after the DOM is fully loaded.
🔳 Focus-visible: I implemented accessible styles to improve the visibility of focused elements, but only for keyboard users.
🔳 Outline and accessibility: I applied the outline attribute to maintain accessibility without compromising aesthetics, improving the experience for keyboard-dependent users.
🔳 CSS transitions: I added smooth transitions for hover and focus effects on the icons for a better user experience.
🗃️ Frontend Career Path by Scrimba
✨ Frontend Mentor - @medezpvi
✨ X (formerly Twitter) - @medezpvi