The latest articles on DEV Community by Kanishka Priyashantha (@kanishkasubash). https://dev.to/kanishkasubash https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1151444%2F54cfd731-ab70-4607-a495-fbf8e0f7028e.png https://dev.to/kanishkasubash en Kanishka Priyashantha Fri, 10 Nov 2023 06:42:26 +0000 https://dev.to/kanishkasubash/responsive-testimonials-grid-section-solution-using-css-grid-layout-58h https://dev.to/kanishkasubash/responsive-testimonials-grid-section-solution-using-css-grid-layout-58h <p>You can see my solution here: <a href="https://www.frontendmentor.io/solutions/responsive-testimonials-grid-section-solution-using-css-grid-layout-os54ySJ__7">https://www.frontendmentor.io/solutions/responsive-testimonials-grid-section-solution-using-css-grid-layout-os54ySJ__7</a></p> <p>Live Preview: <a href="https://kanishkasubash.github.io/testimonials-grid-section/">https://kanishkasubash.github.io/testimonials-grid-section/</a></p> <p>View Source Code: <a href="https://github.com/kanishkasubash/frontend-mentor-challenges/tree/main/testimonials-grid-section">https://github.com/kanishkasubash/frontend-mentor-challenges/tree/main/testimonials-grid-section</a></p> <p><strong>🛠️ Built With:</strong></p> <ul> <li>Semantic HTML5 markup</li> <li>BEM</li> <li>Flexbox</li> <li>CSS Grid</li> <li>Mobile First Approach</li> </ul> <p><strong>📦Features:</strong></p> <ul> <li>Responsiveness (Mobile/Tab/Laptop/Desktop).</li> </ul> <p><strong>🔖What I am learned:</strong></p> <ul> <li>BEM</li> <li>CSS <strong>Flexbox</strong> &amp; <strong>Grid</strong>. <a href="https://blog.logrocket.com/css-flexbox-vs-css-grid/#css-grid-layout-flexbox-alignment">Link</a> </li> </ul> <p><strong>💡Any suggestions on how I can improve are welcome!</strong></p> Kanishka Priyashantha Sat, 02 Sep 2023 07:03:41 +0000 https://dev.to/kanishkasubash/responsive-social-media-dashboard-with-theme-switcher-scss-js-4fgb https://dev.to/kanishkasubash/responsive-social-media-dashboard-with-theme-switcher-scss-js-4fgb <p>I've just completed a front-end coding challenge from @frontendmentor! 🎉</p> <p>This is my solution for the <strong>Social Media Dashboard with Theme Switcher</strong>.</p> <p>You can see my solution here: <a href="https://www.frontendmentor.io/solutions/responsive-social-media-dashboard-with-theme-switcher-scss-js-SlFQ0A6SQ4">https://www.frontendmentor.io/solutions/responsive-social-media-dashboard-with-theme-switcher-scss-js-SlFQ0A6SQ4</a></p> <p>Live Preview: <a href="https://kanishkasubash.github.io/social-media-dashboard/">https://kanishkasubash.github.io/social-media-dashboard/</a></p> <p>View Code: <a href="https://github.com/kanishkasubash/frontend-mentor-challenges/tree/main/social-media-dashboard/build">https://github.com/kanishkasubash/frontend-mentor-challenges/tree/main/social-media-dashboard/build</a></p> <p><strong>🛠️ Built With:</strong></p> <ul> <li>Semantic HTML5 markup</li> <li>SASS/SCSS</li> <li>Node.JS</li> <li>GULP.JS</li> <li>Vanilla JS</li> <li>Mobile First Approach</li> </ul> <p><strong>📦Features:</strong></p> <ul> <li>The user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.</li> <li>Responsiveness (Mobile/Tab/Laptop/Desktop).</li> <li>Toggle button for custom Theme Change.</li> <li>Hover Effects</li> <li>Animations</li> </ul> <p><strong>🔖What I am used:</strong></p> <ul> <li>Toggling Button <a href="https://www.w3schools.com/howto/howto_css_switch.asp">Link</a> </li> <li>prefers-color-scheme. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">Link</a> </li> <li>Window: localStorage property. <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">Link</a> </li> <li>CSS <strong>Flexbox</strong> &amp; <strong>Grid</strong>. <a href="https://blog.logrocket.com/css-flexbox-vs-css-grid/#css-grid-layout-flexbox-alignment">Link</a> </li> </ul> <p>💡Any suggestions on how I can improve are welcome!</p> codenewbie frontend scss tutorial Kanishka Priyashantha Fri, 01 Sep 2023 13:06:56 +0000 https://dev.to/kanishkasubash/frontend-mentor-challenges-qr-code-component-tailwind-css-39h8 https://dev.to/kanishkasubash/frontend-mentor-challenges-qr-code-component-tailwind-css-39h8 <p>By building realistic projects, that take coding skills to the next level.</p> <p>Codepen: <a href="https://codepen.io/collection/Wvgmev">https://codepen.io/collection/Wvgmev</a></p> <p>Frontend Mentor: <a href="https://www.frontendmentor.io/profile/kanishkasubash">https://www.frontendmentor.io/profile/kanishkasubash</a></p> codepen beginners html tailwindcss