Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codewithalamin/project-tracking-intro-component
Minimalist project tracking intro component built with HTML, CSS, and JavaScript.
https://github.com/codewithalamin/project-tracking-intro-component
codepapa360 css frontend-web frontendmentor html javascript
Last synced: 5 days ago
JSON representation
Minimalist project tracking intro component built with HTML, CSS, and JavaScript.
- Host: GitHub
- URL: https://github.com/codewithalamin/project-tracking-intro-component
- Owner: CodeWithAlamin
- License: mit
- Created: 2023-05-25T10:31:09.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-05-25T17:23:00.000Z (over 1 year ago)
- Last Synced: 2024-10-30T10:38:27.682Z (17 days ago)
- Topics: codepapa360, css, frontend-web, frontendmentor, html, javascript
- Language: HTML
- Homepage: https://project-tracking-intro-codepapa360.netlify.app/
- Size: 329 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Project tracking intro component
Challenge from [Frontend Mentor](https://www.frontendmentor.io/profile/CodeWithAlamin)
[🚀Live Site](https://project-tracking-intro-alamin.netlify.app/)
|
[💡Frontend Mentor](https://www.frontendmentor.io/solutions/responsive-project-tracking-intro-component-nrBDDE7zbl)
A minimalist project tracking intro component created as a practice project from FrontendMentor. This solution was built using HTML, CSS, and JavaScript, showcasing responsive design and frontend development skills.
## The challenge
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Create the background shape using code
## Built with
- Semantic HTML5 markup
- Mobile-first workflow
- CSS custom properties
- CSS Grid
- JavaScript
- NPM
- [Webpack - a module bundler](https://webpack.js.org/)
## Installation
- Clone this repo:
```sh
git clone https://github.com/CodeWithAlamin/Project-tracking-intro-component.git
```
- Install dependencies:
```sh
npm install
```
- Build command:
```sh
npm run build
```
- Live server:
```sh
npm start
```
## Author
👤 Alamin
- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)
- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)
- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)
- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)
Feel free to contact me with any questions or feedback!
## Show your support
Give a ⭐️ if you liked this project!
## Acknowledgments
Special thanks to Frontend Mentor for providing such an amazing platform to practice and improve my frontend skills. The challenges and projects available on the website were both fun and challenging, and helped me learn a lot in a short amount of time.
## License
This project is licensed under the [MIT](https://github.com/CodeWithAlamin/Project-tracking-intro-component/blob/main/LICENSE.md) license, which means you can use, modify, and distribute the code as you wish. If you have any questions or feedback, feel free to reach out. Thank you for considering my code!