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
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [12.x, 14.x, 16.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npm ci
- run: npm run build --if-present
- run: npm test
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
Overview
The challenge
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
Screenshot
Links
- Solution URL: https://github.com/RioCantre/nft-preview-card
- Live Site URL: https://nft-preview-card-project.netlify.app/
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">
<…Conclusion
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)