The latest articles on DEV Community by Pramith Chathuranga (@pramith). https://dev.to/pramith https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F982279%2Fa785e754-34da-42d0-af5e-52a1e99396b0.jpeg https://dev.to/pramith en Pramith Chathuranga Thu, 01 Dec 2022 05:33:34 +0000 https://dev.to/pramith/resources-for-creating-websites-16ip https://dev.to/pramith/resources-for-creating-websites-16ip <h2> Fonts And Typography </h2> <ol> <li><a href="https://fonts.google.com/" rel="noopener noreferrer">Google Fonts</a></li> <li><a href="https://www.fontsquirrel.com/" rel="noopener noreferrer">Fontsquirrel</a></li> <li><a href="https://transfonter.org/" rel="noopener noreferrer">CSS @font-face generator - Transfonter</a></li> <li><a href="https://www.creativebloq.com/graphic-design-tips/best-free-fonts-for-designers-1233380" rel="noopener noreferrer">The best free fonts</a></li> </ol> <h2> Images,Videos And Illustrations </h2> <ol> <li><a href="https://unsplash.com/" rel="noopener noreferrer">Unsplash</a></li> <li><a href="https://www.pexels.com/" rel="noopener noreferrer">Pexels</a></li> <li><a href="https://coverr.co/" rel="noopener noreferrer">Coverr</a></li> <li><a href="https://pixabay.com/" rel="noopener noreferrer">Pixaby</a></li> <li><a href="https://undraw.co/illustrations" rel="noopener noreferrer">unDraw</a></li> <li><a href="https://www.drawkit.com/" rel="noopener noreferrer">DrawKit</a></li> <li><a href="https://www.uifaces.co/" rel="noopener noreferrer">UI Faces</a></li> </ol> <h2> Testing, Optimization And Deployment </h2> <ol> <li> <a href="https://pagespeed.web.dev/?utm_source=psi&amp;utm_medium=redirect" rel="noopener noreferrer">Google PageSpeed Insights</a> - A simple tool to check how well your website works. Chrome DevTools can also use it (Lighthouse).</li> <li> <a href="https://validator.w3.org/" rel="noopener noreferrer">HTML Validator by W3C</a> - Check to see if your HTML markup is correct and doesn't have any mistakes. Official W3C tool.</li> <li> <a href="https://jigsaw.w3.org/css-validator/" rel="noopener noreferrer">CSS Validator by W3C</a> - Check to see if your CSS code is correct and doesn't have any mistakes. Official W3C tool.</li> <li> <a href="https://www.netlify.com/" rel="noopener noreferrer">Netlify</a> - #1 platform of choice for hosting static webpages. They offer a generous complimentary package!</li> <li> <a href="https://imagecompressor.com/" rel="noopener noreferrer">Optimizilla</a> - Another tool that can reduce the size of up to 20 JPEG and PNG images while keeping their quality.</li> <li> <a href="https://realfavicongenerator.net/" rel="noopener noreferrer">Real favicon Generator</a> - This tool makes favicons for your website on all platforms from an image you upload.</li> <li> <a href="https://www.webpagetest.org/" rel="noopener noreferrer">WebPageTest</a> - Free website performance test from real browsers at consumer connection speeds with optimization advice.</li> </ol> <h2> CSS Resources </h2> <ol> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" rel="noopener noreferrer">CSS3 Reference by MDN</a></li> <li><a href="https://css-tricks.com/" rel="noopener noreferrer">CSS-Tricks</a></li> <li><a href="https://tympanus.net/codrops/css_reference/" rel="noopener noreferrer">CSS3 Reference by Codrops</a></li> <li><a href="http://caniuse.com/" rel="noopener noreferrer">Can I Use?</a></li> </ol> <h2> Javascript Resources </h2> <ol> <li> <a href="https://github.com/getify/You-Dont-Know-JS" rel="noopener noreferrer">You-Dont-Know-JS</a> </li> <li><a href="https://javascript.info/" rel="noopener noreferrer">The Modern JavaScript Tutorial</a></li> <li><a href="https://www.patterns.dev/posts/classic-design-patterns/" rel="noopener noreferrer">Learning JavaScript Design Patterns</a></li> </ol> webdev javascript html css