DEV Community

Cover image for Simple workflow for a tiny project
Rio Cantre
Rio Cantre

Posted on

Simple workflow for a tiny project

I have been doing small projects to practice my skills, and adding the GitHub actions gave me some insights into why every project needs to check updates and errors.

My Workflow

This workflow will check if the dependencies installed are clean, cache/restore them, build the source code and run tests across different versions of node.

Submission Category:

Wacky Wildcards

Yaml File or Link to Code

name: Node.js CI

    branches: [ main ]
    branches: [ main ]


    runs-on: ubuntu-latest

        node-version: [12.x, 14.x, 16.x]

    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test
Enter fullscreen mode Exit fullscreen mode

GitHub logo RioCantre / nft-preview-card

A simple react project rendering preview of a NFT card.

Frontend Mentor - NFT preview card component solution

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

Table of contents


The challenge

Users should be able to:

  • View the optimal layout depending on their device's screen size
  • See hover states for interactive elements




My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow
  • React - JS library

What I learned

I learned how to add another layer on hover state of an image. I structured first the HTML elements and use CSS styling to accomplish the ideal design.

See the code snippets below:

    <div className="hero-image">
Enter fullscreen mode Exit fullscreen mode


I haven't got a grip on the GitHub actions to be part of every project. This Hackathon reminds me to explore what's out there, behind every corner, and discover a treasure. I would research and do more about this since it's convenient once you gain the flow of its principal concept.

Top comments (0)