The latest articles on DEV Community by Aakash A (@tsrcodes). https://dev.to/tsrcodes 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%2F369830%2F4bcd4cdb-72f9-41b8-8c0b-3ea11388d8bd.png https://dev.to/tsrcodes en Aakash A Sat, 16 May 2020 09:09:12 +0000 https://dev.to/tsrcodes/an-intro-to-materialize-css-4goh https://dev.to/tsrcodes/an-intro-to-materialize-css-4goh <p>Hey Devs !! ☺️ Welcome !!<br> How's everything? Good!</p> <h1> Getting Started with Materialize CSS </h1> <p>If you’re in love with Google’s Material design, Materialize CSS is a framework you’ll enjoy &amp; it follows the famous 12-column grid format established by Bootstrap.</p> <h2> Ways to use Materialize: </h2> <ul> <li><p><a href="https://materializecss.com/getting-started.html" rel="noopener noreferrer">Local Installation</a> − Download &amp; include it in your HTML code .</p></li> <li> <p><a href="https://materializecss.com/getting-started.html" rel="noopener noreferrer">CDN Based Version</a> − Access Directly from the Content Delivery Network (CDN).</p> <h3> <a href="https://cdnjs.com/" rel="noopener noreferrer">cdnjs.cloudflare.com</a> </h3> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fcwl038sjt5r0lai3o0ll.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fcwl038sjt5r0lai3o0ll.png" alt=" CDN " width="800" height="474"></a><br> provides content for the latest version.</p> </li> </ul> <p>Here I'll add my Insta Post,If You Like it Give ❤️ !!<br> </p> <div class="instagram-position"> <iframe id="instagram-liquid-tag" src="https://www.instagram.com/p/CAN9xlMpCTb/embed/captioned/"> </iframe> </div> <br> 💜 Thank You for Reading 🙌<br> Be Happy 😊 &amp; Always Smile 😇 <p>Add ME on <a href="https://www.instagram.com/TsrCodes" rel="noopener noreferrer">Instagram</a> | <a href="https://www.Facebook.com/TsrCodes" rel="noopener noreferrer">Facebook</a> |<a href="https://www.twitter.com/TsrCodes" rel="noopener noreferrer">Twitter</a> | <a href="https://www.youtube.com/channel/UCb9J-aPbN-WQ7eE4WU6yXcg" rel="noopener noreferrer">Youtube</a></p> html css materializecss frameworks Aakash A Fri, 15 May 2020 08:16:42 +0000 https://dev.to/tsrcodes/change-the-background-color-using-javascript-html-css-546n https://dev.to/tsrcodes/change-the-background-color-using-javascript-html-css-546n <p>Hey Devs !! Welcome.In this new Post<br> you'll see a beginner friendly project on javascript,<br> to change the background color on click , <a href="https://tsrcodes.blogspot.com/2020/05/change-background-color-using_15.html" rel="noopener noreferrer">Blog</a><br> Here I'll add my Code Snippets below ! 😍</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fqg846fi105n5f30xqksj.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fqg846fi105n5f30xqksj.png" alt="HTML Snippets" width="800" height="621"></a></p> <p>Then we import our Fav google Fonts <br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fr7ehlf4ck8u1qdfsq8xr.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fr7ehlf4ck8u1qdfsq8xr.png" alt="Google Font" width="800" height="99"></a></p> <p>Here's Our Styling, Basic Styles<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F352vau23lodyezbeqwgb.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F352vau23lodyezbeqwgb.png" alt="CSS Snippets" width="800" height="779"></a></p> <p>Now Style Our Logo Class,Nav &amp; Container<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F1l82x9123ny72v7bvnhv.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F1l82x9123ny72v7bvnhv.png" alt="CSS Snippets" width="800" height="897"></a></p> <p>&amp; styling our button with little hover effects<br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fkzd9xoiu9gyvr32xtx4j.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fkzd9xoiu9gyvr32xtx4j.png" alt="CSS Snippets" width="800" height="1054"></a></p> <p>Here's Our Fun Part [ JS ]</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F9eg64lofd5gm43zb6bjh.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F9eg64lofd5gm43zb6bjh.png" alt="JS" width="800" height="1015"></a></p> <p>Here's the another method </p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fgf5f6zgapu8q09uw73q2.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fgf5f6zgapu8q09uw73q2.png" alt="JS" width="800" height="621"></a></p> <p>Here I'll add my youtube Video Down here,Kindly Check it <br> <iframe width="710" height="399" src="https://www.youtube.com/embed/Ewv6mOYntwQ"> </iframe> </p> <p>° Playground link -1 : <a href="https://codepen.io/TsrCodes/pen/JjYezXM" rel="noopener noreferrer">CodePen</a><br> ° Playground link -2 : <a href="https://codepen.io/TsrCodes/pen/dyYQrXK" rel="noopener noreferrer">CodePen</a></p> <p>💜 Thank You for Reading 🙌<br> Be Happy 😊 &amp; Always Smile 😇</p> <p>Add ME on <a href="https://www.instagram.com/TsrCodes" rel="noopener noreferrer">Instagram</a> | <a href="https://www.Facebook.com/TsrCodes" rel="noopener noreferrer">Facebook</a> |<a href="https://www.twitter.com/TsrCodes" rel="noopener noreferrer">Twitter</a> | <a href="https://www.youtube.com/channel/UCb9J-aPbN-WQ7eE4WU6yXcg" rel="noopener noreferrer">Youtube</a></p> html css javascript projects