Frontend Mentor - Article Preview Component Solution

This is a solution to the Article Preview Component Challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See the social media share links when they click the share icon

Screenshot

Links

• Live Site URL: https://kens-visuals.github.io/article-preview-component/#
• Solution URL: https://www.frontendmentor.io/solutions/article-preview-comp-with-bem-sass-and-vanilla-js-vtLeoLZH4

My process

Built with

• Semantic HTML5 markup
• CSS Flexbox
• Vanilla JS
• SCSS custom properties
• Mobile-first workflow

Continued development

This was a good chance to practice Vanilla JS, however, I'm looking forward to practice more of it in other projects. I want to code in Vanilla JS as much as possible, before moving on to a JS framework/library

Useful resources

• My DOM Cheatsheet - This is a very basic DOM cheetheet that I made on Notion for such small projects, feel free to use for your next projects.

Author

• Frontend Mentor - @kens-visuals
• Codewars - @kens_visuals
• CodePen - @kens-visuals