Description of the project
In this activity I finalize the project by adding more styling. The puepose is to understand how to use a medium-fidelity wireframes to create a UI.
Built With
- Major languages: HTML, CSS and Javascript
- Linters for HTML & CSS and Javascript5(Webhint, Lighthouse, Stylelint, Eslint)
- npm and webpack
Getting Started
To get a local copy up and running follow these simple example steps in your terminal.
Prerequisites
- Code editor: Vscode or Sublime
- Git
Setup
- Download the Zip file or clone the repo with:
git clone https://github.com/Piercel2022/leaderboard.git
- To access cloned directory run:
cd leaderboard
- Open it with the live server
Link demo
Install, build and run:
To install linters and other project's dependencies run: npm install To build the project run in the terminal: npm run build To run the project, run in the terminal: npm start
Run Test for Linters
For tracking linter errors locally you need to follow these steps:
- For tracking linter errors in HTML files run:
npx hint .
- For tracking linter errors in CSS or SASS files run:
npx stylelint "*/.{css,scss}"
- For tracking linter errors in the Javascript files run:
npx eslint .
Author
- GitHub: https://github.com/Piercel2022
- Twitter: https://twitter.com/pier_celestin
- LinkedIn: https://linkedin.com/in/piercelestinmax
🤝
Contributing
Contributions, issues, and feature requests are welcome!
Feel free to check the issues here.
Show your support
Give a
Acknowledgments
- Hat tip to anyone whose code was used
- Inspiration
- etc
📝
License
This project is (./MIT.md) licensed.
Leaderboard: Final touches
In this activity I finalize the project by adding more styling. The purpose is to understand how to use a medium-fidelity wireframes to create a UI. I improved the look and feel of the application, by adding some styles. The overview of the application running in the webpack server look like the following screenshoot below.
Leaderboard API
In this activity, I create a game that consume the Leaderboad API.
Leaderboard: Project setup
In this activity I have created an npm project with webpack. I just write plain HTML markup with minimum styling. Running on the terminal "npm start", then the browser show you the picture of the project look like the screenshot below
leaderboard project review
Good job on your project :tada:
Here are some optional changes you can do to better your project
:green_circle: better your readme file by giving the users direct commands to copy to make it easy to copy and paste :green_circle: it would be better if you use js modules this would make your project better
cheers :tada: happy cooding