https://github.com/jdegand/monstercat

Frontend Practice Challenge - Monstercat
https://github.com/jdegand/monstercat

frontend-practice

Last synced: 5 months ago
JSON representation

Frontend Practice Challenge - Monstercat

• Host: GitHub
• URL: https://github.com/jdegand/monstercat
• Owner: jdegand
• License: mit
• Created: 2021-10-19T20:30:12.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2021-10-20T17:39:07.000Z (over 4 years ago)
• Last Synced: 2025-03-15T20:13:01.246Z (over 1 year ago)
• Topics: frontend-practice
• Language: HTML
• Homepage: https://jdegand.github.io/monstercat/
• Size: 469 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
Monstercat




   Solution for a challenge from  Frontendpractice.com.





  


    

      Github Pages

    

     | 

    

      Frontend Practice    

    

  



## Table of Contents

- [Overview](#overview)

  - [Built With](#built-with)

- [Features](#features)

- [Useful Resources](#useful-resources)

## Overview

![](monstercat-desktop.png)

![](monstercat-mobile.png)

### Built With

- Grid

- Flex

## Features

The [challenge](https://www.frontendpractice.com/project/monstercat) was to build an application to complete the following user stories:

- [x] User story: Recreate the layout

- [ ] User story: Create a working play & pause button with your song of choice.

- [ ] User story: Add the sticky audio controls menu in the top right as you scroll down. (Outdated?)

## Useful Resources

- [Monstercat](https://www.monstercat.com/release/MCS1273)

- [Font Awesome](https://fontawesome.com/v5.15/icons?d=gallery&p=2) - Icons

- [Codepen](https://codepen.io/clementGir/pen/RQqvQx) - Cursor blend mode

- [Dev.to](https://dev.to/mattmarquise/how-to-create-a-custom-circular-cursor-for-your-website-4i7p) - circular cursor

- [Forum](https://forum.freecodecamp.org/t/can-we-place-audio-tag-inside-button-tag/247611) - audio tag inside button tag?

- [Catswhocode](https://catswhocode.com/html-audio-tag/) - Audio tag

- [YouTube](https://www.youtube.com/watch?v=b4EgP8f3wkU) - Vivi

- [Drivereasy](https://www.drivereasy.com/knowledge/extract-audio-from-youtube-video/) - Extract Audio from YouTube

- [Stack Overflow](https://stackoverflow.com/questions/54602553/custom-cursor-cant-click-on-dom-elements) - Custome Cursor interaction w/ DOM elements