EONRaider / Article-Preview-Component

Solution for the Article Preview Component challenge on frontendmentor.io

Home Page:https://www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Frontend Mentor - Article Preview Component solution

CodeFactor Grade FrontendMentor

This is a solution to the Article Preview Component challenge. Frontend Mentor challenges help you improve your coding skills by building realistic article-preview-components.

Table of contents

Overview

Screenshot

Article-Preview-Component

Links

My process

  1. I started with the markup on index.html, complying with HTML5 semantic tags and standards as much as possible.
  2. The styling provided by the article-preview-component briefing was implemented first, followed by the classes I came up with on the markup.
  3. I used Figma to acquire all the right dimensions involved in the layout and implemented them in the appropriate CSS classes.
  4. The CSS Cube methodology was used when coding the stylesheet and some of the conventions from BEM were used when naming classes.

Built with

  • Semantic HTML5 markup
  • Cube CSS methodology

What I learned

  • This is my second project using JavaScript. I'm getting more comfortable with the use of event handlers.

About

Solution for the Article Preview Component challenge on frontendmentor.io

https://www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT

License:GNU Affero General Public License v3.0


Languages

Language:CSS 52.4%Language:HTML 40.1%Language:JavaScript 7.5%