Frontend Mentor - Article preview component solution

This is a solution to the Article preview component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Frontend Mentor - Article preview component solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
  • 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

• Solution URL: https://github.com/andresesaldar/FrontedMentor_ArticlePreviewComponent
• Live Site URL: https://andresesaldar.github.io/FrontedMentor_ArticlePreviewComponent

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• React - JS library
• Sass - CSS language
• Bootstrap - CSS library
• Vite - Webpack alternative

What I learned

Sass nested rules:

.btn-share
    background-color: $core-light
    & img
        @media screen and (max-width: $core-sm-size)
            filter: brightness(0) invert(1)
    &:hover
        background-color: $core-primary
        & img
            filter: brightness(0) invert(1)
    
    @media screen and (max-width: $core-sm-size)
        background-color: $core-primary !important 
        position: absolute
        right: 3rem
        top: 25%

Travis CI integration with github pages:

deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN  # Set in the settings page of your repository, as a secure variable
  keep_history: true
  on:
    branch: main

Continued development

The HTML elements positioning was difficult for me when I work on the share options responsive. I have to learn more about the positioning concepts on HTML/CSS.

Author

• Github - Andres Saldarriaga
• Frontend Mentor - @andresesaldar