{"id":19543281,"url":"https://github.com/codewithalamin/coding-bootcamp-testimonials-slider","last_synced_at":"2026-03-19T10:22:20.270Z","repository":{"id":163636386,"uuid":"639090339","full_name":"CodeWithAlamin/Coding-bootcamp-testimonials-slider","owner":"CodeWithAlamin","description":"A responsive coding bootcamp testimonials slider built with HTML, CSS, and JavaScript.","archived":false,"fork":false,"pushed_at":"2024-10-30T12:24:51.000Z","size":1381,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-08T19:11:31.906Z","etag":null,"topics":["codepapa360","codewithalamin","coding-bootcamp","frontend-development","frontend-mentor","responsive-layout","testimonial-slider","web-design"],"latest_commit_sha":null,"homepage":"https://coding-bootcamp-testimonials-alamin.netlify.app/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeWithAlamin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-10T18:33:08.000Z","updated_at":"2024-10-30T12:24:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"76a0f2ce-6222-4e29-b6aa-ac12dce2bff1","html_url":"https://github.com/CodeWithAlamin/Coding-bootcamp-testimonials-slider","commit_stats":null,"previous_names":["codewithalamin/coding-bootcamp-testimonials-slider"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FCoding-bootcamp-testimonials-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FCoding-bootcamp-testimonials-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FCoding-bootcamp-testimonials-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeWithAlamin%2FCoding-bootcamp-testimonials-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeWithAlamin","download_url":"https://codeload.github.com/CodeWithAlamin/Coding-bootcamp-testimonials-slider/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240798309,"owners_count":19859339,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codepapa360","codewithalamin","coding-bootcamp","frontend-development","frontend-mentor","responsive-layout","testimonial-slider","web-design"],"created_at":"2024-11-11T03:18:11.885Z","updated_at":"2026-02-28T20:39:31.995Z","avatar_url":"https://github.com/CodeWithAlamin.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eCoding bootcamp testimonials slider\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003e\n\nChallenge from [Frontend Mentor](https://www.frontendmentor.io/profile/CodeWithAlamin)\n\n\u003c/div\u003e\n\n\u003ch2 align=\"center\"\u003e\n\n[🚀Live Site](https://coding-bootcamp-testimonials-alamin.netlify.app/)\n|\n[💡Frontend Mentor](https://www.frontendmentor.io/solutions/responsive-coding-bootcamp-testimonials-slider-jqGB6z8c87)\n\n\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\nThe \"Coding Bootcamp Testimonials Slider\" is a responsive web component developed for a Frontend Mentor project. This interactive slider showcases coding bootcamp testimonials using HTML, CSS, and JavaScript. Users can easily navigate through testimonials with smooth transitions and a visually appealing design. It demonstrates skills in responsive design, CSS styling, and JavaScript interactivity.\n\u003c/p\u003e\n\n\u003ca align=\"center\" href=\"https://coding-bootcamp-testimonials-alamin.netlify.app/\"\u003e\n\n![Screenshot](./screenshots/Coding-bootcamp-testimonials-slider-CodeWithAlamin.png)\n\n\u003c/a\u003e\n\n## The challenge\n\nUsers should be able to:\n\n- View the optimal layout for the component depending on their device's screen size\n- Navigate the slider using either their mouse/trackpad or keyboard\n\n## Built with\n\n- Semantic HTML5 markup\n- CSS custom properties\n- CSS Grid\n- JavaScript\n- Mobile-first workflow\n- NPM\n- [Webpack - a module bundler](https://webpack.js.org/)\n\n## What I learned\n\nThe \"Coding Bootcamp Testimonials Slider\" project provided me with an opportunity to apply and enhance my skills in CSS and JavaScript. By working on this project, I was able to demonstrate my proficiency in creating responsive layouts, implementing smooth transitions, and utilizing JavaScript for interactivity.\n\nIn terms of JavaScript, I leveraged its capabilities to handle user interactions and control the slider functionality. Through event listeners, I implemented navigation buttons and keyboard controls, enabling users to easily navigate through the testimonials. I also made use of DOM manipulation to dynamically update the slider's content and transition between slides smoothly.\n\nThroughout the development process, I encountered challenges and successfully found solutions. For example, I effectively managed the timing of slide transitions by carefully coordinating the fade-out and fade-in effects using setTimeout().\n\nBy completing this project, I have further strengthened my skills in CSS and JavaScript, gaining hands-on experience in building interactive and dynamic components. It has provided me with valuable insights into creating engaging user experiences and utilizing advanced CSS and JavaScript techniques effectively.\n\nI am proud of the outcome of this project and the opportunity it provided for me to showcase my skills and knowledge in front-end development.\n\n## Installation\n\n- Clone this repo:\n\n```sh\ngit clone https://github.com/CodeWithAlamin/Coding-bootcamp-testimonials-slider.git\n```\n\n- Install dependencies:\n\n```sh\nnpm install\n```\n\n- Build command:\n\n```sh\nnpm run build\n```\n\n- Live server:\n\n```sh\nnpm start\n```\n\n## Author\n\n\u003cb\u003e👤 Alamin\u003c/b\u003e\n\n- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)\n- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)\n- Frontend Mentor - [@CodeWithAlamin](https://www.frontendmentor.io/profile/CodeWithAlamin)\n- Github: [@CodeWithAlamin](https://github.com/CodeWithAlamin)\n\nFeel free to contact me with any questions or feedback!\n\n## Show your support\n\nGive a ⭐️ if you liked this project!\n\n## Acknowledgments\n\nSpecial 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.\n\n## License\n\nThis project is licensed under the [MIT](https://github.com/CodeWithAlamin/Coding-bootcamp-testimonials-slider/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!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Fcoding-bootcamp-testimonials-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithalamin%2Fcoding-bootcamp-testimonials-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithalamin%2Fcoding-bootcamp-testimonials-slider/lists"}