The latest articles on DEV Community by bleedeleventh (@aycanogut). https://dev.to/aycanogut 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%2F564783%2Fe441122d-c3d2-43ec-a6ce-22803330854d.jpg https://dev.to/aycanogut en bleedeleventh Sun, 10 Oct 2021 07:05:58 +0000 https://dev.to/aycanogut/front-end-resources-1jk2 https://dev.to/aycanogut/front-end-resources-1jk2 <h1> Introduction </h1> <p>This is a collection of (awe)some resources, mostly focused on front-end web development.</p> <ul> <li>Introduction</li> <li>API</li> <li> Data-Structures-and-Algorithms <ul> <li>Algorithm-Challenges</li> <li>Algorithm-Books</li> <li>Algorithm-Websites</li> </ul> </li> <li> Design <ul> <li>Design-Articles</li> <li>Design-Books</li> <li>Colors</li> <li>Design-Systems</li> <li>Fonts</li> <li>Icons</li> <li>Optimization Tools</li> <li>Stock Photos-Illustrations-Mockups</li> <li>Tools-for-Responsive-Design</li> <li>Tools</li> <li>Typography</li> <li>Design-Websites</li> </ul> </li> <li> HTML <ul> <li>Accessibility</li> <li>HTML-Articles</li> <li>Checklist</li> <li>Performance</li> <li>Validation</li> <li>HTML-Websites</li> </ul> </li> <li> CSS <ul> <li>CSS-Articles</li> <li>Architectures-Methodologies</li> <li>CSS-in-JS</li> <li>CSS-Design-Systems</li> <li>CSS-Generators</li> <li>CSS-Videos</li> <li>CSS-Websites</li> </ul> </li> <li> Front-End-Resources <ul> <li>Front-End-Articles</li> <li>Front-End-Challenges</li> <li>Front-end-Surveys</li> <li>Front-End-Websites</li> </ul> </li> <li> Git&amp;Github <ul> <li>Git-Courses</li> <li>Git-Videos</li> <li>Git-Websites</li> <li>Git-Tools</li> </ul> </li> <li> JavaScript <ul> <li>JavaScript-Articles</li> <li>JavaScript-Books</li> <li>JavaScript-Conference-Talks</li> <li>JavaScript-Courses-Practices</li> <li>JavaScript-Tools</li> <li>JavaScript-Websites</li> </ul> </li> <li> React <ul> <li>React-Articles</li> <li>React-Frameworks</li> <li>React-Hooks</li> <li>React-State-Management</li> <li>React-Tools</li> </ul> </li> <li> TypeScript <ul> <li>TypeScript-Articles</li> <li>TypeScript-Courses</li> <li>TypeScript-Challenges</li> <li>TypeScript-Tools</li> </ul> </li> <li> Other-Content <ul> <li>Blogs</li> <li>Other-Books</li> <li>Code-Formatters</li> <li>Developer&amp;Productivity-Tools</li> <li>Discord Communities</li> <li>Documentations</li> <li>Interactive-Games</li> <li> Interview Practices <ul> <li>System Design</li> </ul> </li> <li>Newsletters</li> <li>Podcasts</li> <li>Reddit-Subreddits</li> <li>Roadmaps</li> <li>Online-Curriculums</li> <li>Youtube-Channels</li> <li>Mixed-Content</li> </ul> </li> </ul> <h1> API </h1> <ul> <li> <a href="https://rapidapi.com/collection/list-of-free-apis">RapidAPI</a> - Free Public APIs for Developers</li> <li> <a href="https://any-api.com/">any-api</a> - Documentation and Test Consoles for Over 1400 Public APIs</li> <li> <a href="https://github.com/public-apis/public-apis">public-apis</a> - A collective list of free APIs for use in software and web development</li> <li> <a href="https://apilist.fun/">API list</a> - A collective list of APIs</li> <li> <a href="https://blog.hubspot.com/website/free-open-apis">free-open apis</a> - 30 Free &amp; Open APIs for Marketers &amp; Content Developers</li> <li> <a href="https://jsonplaceholder.typicode.com/">json placeholder</a> - Free fake API for testing and prototyping</li> </ul> <h1> Data-Structures-and-Algorithms </h1> <h3> Algorithm-Challenges </h3> <ul> <li><a href="https://www.codewars.com">CodeWars</a></li> <li><a href="https://www.hackerrank.com">HackerRank</a></li> <li><a href="https://coderbyte.com/">coderbyte</a></li> <li><a href="https://exercism.io">exercism.io</a></li> <li><a href="https://www.algoexpert.io">AlgoExpert</a></li> <li><a href="https://www.hackerearth.com/practice/codemonk/">HackerEarth Codemonk</a></li> <li><a href="https://leetcode.com/">LeetCode</a></li> <li><a href="https://edabit.com/">edabit</a></li> <li><a href="https://neetcode.io/">NeetCode.io</a></li> </ul> <h3> Algorithm-Books </h3> <ul> <li><a href="https://edu.anarcho-copy.org/Algorithm/grokking-algorithms-illustrated-programmers-curious.pdf">grokking algorithms</a></li> <li><a href="http://www.r-5.org/files/books/computers/overviews/patterns/V_Anton_Spraul-Think_Like_a_Programmer-EN.pdf">Think Like A Programmer</a></li> </ul> <h3> Algorithm-Websites </h3> <ul> <li><a href="https://algorithm-visualizer.org/">Algorithm Visualiser</a></li> </ul> <h1> Design </h1> <h3> Design-Articles </h3> <ul> <li><a href="https://thewhitelabelagency.com/pixel-perfect-web-development-5-essential-steps/">Pixel Perfect Web Development: 5 Essential Steps by Daniel Corin Stig</a></li> <li><a href="https://web.dev/learn/design/">Learn Responsive Design! by web.dev</a></li> <li><a href="https://leerob.io/blog/style-guides-component-libraries-design-systems">Everything I Know About Style Guides, Design Systems, and Component Libraries</a></li> <li><a href="https://bradfrost.com/blog/post/atomic-web-design/">Atomic Design</a></li> </ul> <h3> Design-Books </h3> <ul> <li><a href="https://www.softouch.on.ca/kb/data/Atomic%20Design.pdf">Atomic Design</a></li> </ul> <h3> Colors </h3> <ul> <li> <a href="https://coolors.co">coloors</a> - color schemes generator</li> <li> <a href="https://hexcolor.co/">Hex Colors</a> - color palette generator</li> <li> <a href="https://www.canva.com/colors/">Canva Colors</a> - multiple color tools</li> <li> <a href="https://contrast-ratio.com/">contrast ratio</a> - contrast checker</li> <li> <a href="https://color.adobe.com/create/color-wheel">Adobe Color</a> - color wheel and other tools</li> <li> <a href="https://chir.ag/projects/name-that-color/#9AB4D0">Name that Color</a> - color namer</li> <li> <a href="https://abc.useallfive.com/">Accessible Brand Colors</a> - accessibilty checker for colors</li> <li> <a href="https://flatuicolors.com/">Flat UI Colors</a> - color palettes</li> <li> <a href="https://coolors.co/006e90-f18f01-adcad6-99c24d-41bbd9">Coolors Palette Creator</a> - random color palette generator</li> <li> <a href="https://mycolor.space/">mycolor Palette Creator</a> - random color palette generator</li> </ul> <h3> Design-Systems </h3> <ul> <li><a href="https://polaris.shopify.com/">Polaris by shopify</a></li> <li><a href="https://evergreen.segment.com/">Evergreen Segment</a></li> <li><a href="https://eva.design/">Eva Design Assets</a></li> <li><a href="https://vercel.com/design">Vercel</a></li> <li><a href="https://ant.design/">Ant Design</a></li> <li><a href="https://carbondesignsystem.com/">Carbon</a></li> <li><a href="https://github.com/storybookjs/design-system">Storybook</a></li> <li><a href="https://www.radix-ui.com/">Radix</a></li> <li><a href="https://primer.style/">Primer</a></li> <li><a href="https://blueprintjs.com/">Blueprint</a></li> <li><a href="https://atlassian.design/">Atlassian</a></li> <li><a href="https://chakra-ui.com/">chakra</a></li> </ul> <h3> Fonts </h3> <ul> <li> <a href="https://fonts.google.com/">Google Fonts</a> - huge font library</li> <li> <a href="https://fontflipper.com/upload">Font Flipper</a> - random font generator</li> <li> <a href="https://www.fontsquirrel.com/tools/webfont-generator">Font Squirrel</a> - webfont generator</li> <li> <a href="https://onlinefontconverter.com/">Online Font Converter</a> - create @font-face rules and convert fonts online</li> <li> <a href="https://www.fontsinthewild.com/">fonts in the wild</a> - font library</li> <li> <a href="https://github.com/typekit/webfontloader">webfontloader</a> - tool for controling @font-face rules</li> <li> <a href="https://befonts.com/">BEfonts</a> - free fonts for designers</li> </ul> <h3> Icons </h3> <ul> <li> <a href="https://www.flaticon.com/">flaticon</a> - vector icons &amp; stickers</li> <li> <a href="https://fonts.google.com/icons">Material Icons</a> - huge icons library</li> <li> <a href="https://icones.netlify.app/">icones</a> - icon sets</li> <li> <a href="https://tablericons.com/">Tabler Icons</a> - fully customizable free svg icons</li> <li> <a href="https://iconmonstr.com/">iconmonstr</a> - icon library</li> <li> <a href="https://icomoon.io/">IcoMoon</a> - pixel perfect icon solutions</li> <li> <a href="https://heroicons.dev/">heroicons</a> - free icon library</li> <li> <a href="https://heroicons.com/">heroicons</a> - by the makers of tailwindcss</li> <li> <a href="https://icons.getbootstrap.com/">Bootstrap Icons</a> - free icon library</li> <li> <a href="https://fontawesome.com/">Font Awesome</a> - icon library</li> <li> <a href="https://simpleicons.org/">Simlpe Icons</a> - icon library</li> <li> <a href="https://www.iconfinder.com/">Icon Finder</a> - icon library and illustrations</li> <li> <a href="https://css.gg/">700+ CSS Icons</a> - open-source svg and figma ui icons</li> <li> <a href="https://streamlinehq.com/">Streamline</a> - icons and emojis</li> </ul> <h3> Optimization Tools </h3> <ul> <li> <a href="https://squoosh.app/">Squoosh</a> - image optimization</li> <li><a href="https://tinypng.com/">tiny png</a></li> <li><a href="https://imageoptim.com/mac">ImageOptim</a></li> </ul> <h3> Stock Photos-Illustrations-Mockups </h3> <ul> <li> <a href="https://unsplash.com/">Unsplash</a> - royalty free stock photos</li> <li> <a href="https://www.pexels.com/">Pexels</a> - free stock photos &amp; videos</li> <li> <a href="https://pixabay.com/">Pixabay</a> - free images &amp; royalty free stock</li> <li> <a href="https://doodleipsum.com/">Doodle Ipsum</a> - free illustrations and doodles</li> <li> <a href="https://www.ls.graphics/">ls.graphics, Mockups and UI toolsl</a> - mockups, illustration and ui tools</li> <li> <a href="https://purepng.com/">PurePNG</a> - Pure PNG Image Library</li> <li> <a href="https://favpng.com/">FavPNG</a> - Free Transparent PNG Images</li> <li> <a href="https://www.cleanpng.com/">CleanPNG</a> - Free PNG Images</li> <li> <a href="http://www.stickpng.com/">StickPNG</a> - Free PNG Stickers</li> </ul> <h3> Tools-for-Responsive-Design </h3> <ul> <li> <a href="https://www.mydevice.io/">MY DEVICE.io</a> a tool for responsive design, browser features</li> </ul> <h3> Tools </h3> <ul> <li> <a href="https://10015.io/">10015</a> - All Online Tools in “One Box”</li> <li> <a href="https://usecontrast.com/">Contrast</a> - a tool for contrast checker</li> </ul> <h3> Typography </h3> <ul> <li> <a href="https://www.youtube.com/watch?v=HnpsOtIcfbo&amp;feature=emb_title">Typography 101 - Web Design For Beginners by Dev Ed</a> - typography 101 introduction video</li> <li> <a href="https://csswizardry.com/2020/05/the-fastest-google-fonts/">The Fastest Google Fonts by CSS Wizardry</a> - an article about how to enhance performance with google fonts</li> </ul> <h3> Design-Websites </h3> <ul> <li> <a href="https://lawsofux.com/">Laws of UX</a> - best practices for design and user interfaces</li> <li> <a href="https://uxcel.com/">uxcel</a> - ui/ux design courses and skill tests</li> <li> <a href="https://uxtools.co/">Ux Tools</a> - tutorials and methods, skills about design</li> <li> <a href="https://www.designresourc.es/">Design Resources</a> - huge source for all kind of design tools</li> <li> <a href="https://www.uidesigndaily.com/">UI Design Daily</a> - daily design and ui pieces</li> <li> <a href="https://uifreebies.net/">Daily Handpicked Free UI Kits for Your Projects</a> daily design and ui pieces</li> </ul> <h1> HTML </h1> <h3> Accessibility </h3> <ul> <li><a href="https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components">A Complete Guide To Accessible Front-End Components by Vitaly Friedman</a></li> <li><a href="https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/">The Importance Of Manual Accessibility Testing</a></li> </ul> <h3> HTML-Articles </h3> <ul> <li><a href="https://github.com/vasanthk/how-web-works">How Web Works by Vasa</a></li> <li><a href="https://dev.to/simonpaix/7-useful-html-attributes-you-may-not-know-7mn">7 useful HTML attributes you may not know </a></li> <li><a href="https://web.dev/building-an-adaptive-favicon/">Building an adaptive favicon</a></li> </ul> <h3> Checklist </h3> <ul> <li><a href="https://github.com/thedaviddias/Front-End-Checklist">Front-End Checklist by David Dias</a></li> <li><a href="https://www.a11yproject.com/checklist/">Checklist by The A11y Project</a></li> <li><a href="https://frontendchecklist.io/">The Front-End Checklist</a></li> <li><a href="https://github.com/hail2u/html-best-practices">HTML Best Practices</a></li> </ul> <h3> Performance </h3> <ul> <li><a href="https://philipwalton.com/articles/my-challenge-to-the-web-performance-community/?utm_source=stefanjudis&amp;utm_medium=email">My Challenge to the Web Performance Community</a></li> </ul> <h3> Validation </h3> <ul> <li><a href="https://caniuse.com/">Can I use?</a></li> <li><a href="https://caninclude.glitch.me/">Can Include</a></li> <li><a href="https://browserdefaultstyles.com/">Browser Default Styles</a></li> <li><a href="https://validator.w3.org/">W3C Markup Validation Service</a></li> <li><a href="https://whatthetag.com/#/">What the tag ?!</a></li> </ul> <h3> HTML-Websites </h3> <ul> <li><a href="https://htmlcheatsheet.com/">HTML CheatSheet</a></li> <li><a href="https://howhttps.works/">How HTTPS works</a></li> <li><a href="https://howdns.works/">How DNS works</a></li> </ul> <h1> CSS </h1> <h3> CSS-Articles </h3> <ul> <li><a href="https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/">An Interactive Guide to Flexbox by Josh W Comeau</a></li> <li><a href="https://ishadeed.com/article/clip-path">Understanding Clip Path in CSS by Ahmad Shadeed</a></li> <li><a href="https://ishadeed.com/article/defensive-css/">Defensive CSS by Ahmad Shadeed</a></li> <li><a href="https://gist.github.com/fabricelejeune/bcdd3d4725d4e4cea672">Efficient font stack with Sass by Fabrice Lejeune</a></li> <li><a href="https://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps">Responsive Typography With Sass Maps by Jonathan Suh</a></li> <li><a href="https://css-tricks.com/well-documented-css-codebase-look-like/">What Does a Well-Documented CSS Codebase Look Like? by Kaloyan Kosev</a></li> <li><a href="https://css-tricks.com/options-programmatically-documenting-css">The Options for Programmatically Documenting CSS by Kaloyan Kosev</a></li> <li><a href="https://itnext.io/structuring-your-sass-projects-c8d41fa55ed4">Structuring your SASS projects</a></li> <li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/">A Complete Guide to Grid</a></li> <li><a href="https://dev.to/ageekdev/14-css-topics-you-must-know-2e0g">14 CSS Topics You Must Know </a></li> <li><a href="https://www.smashingmagazine.com/2021/09/simplifying-form-styles-accent-color/">Simplifying Form Styles With <code>accent-color</code></a></li> <li><a href="https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/?utm_source=stefanjudis&amp;utm_medium=email">The Large, Small, and Dynamic Viewports</a></li> <li><a href="https://www.joshwcomeau.com/css/understanding-layout-algorithms/">Understanding Layout Algorithms</a></li> </ul> <h3> Architectures-Methodologies </h3> <ul> <li><a href="https://sass-guidelin.es/">Sass Guidelines by Kiltty Giraudel</a></li> <li><a href="http://smacss.com/">Scalable and Modular Architecture for CSS by Jonathan Snook</a></li> <li><a href="https://cssguidelin.es/">CSS Guidelines by Harry Roberts</a></li> <li><a href="https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/">An Introduction To Object Oriented CSS (OOCSS)</a></li> <li><a href="https://matthewelsom.com/blog/simple-scss-playbook.html">A Simple SCSS Architecture by Matthew Elsom</a></li> <li><a href="https://9elements.com/bem-cheat-sheet">BEM Cheat Sheet</a></li> <li><a href="https://portalzine.de/dev/css/sass/organizing-your-css-scss-code/">Organizing Your CSS / SCSS Code</a></li> </ul> <h3> CSS-in-JS </h3> <ul> <li><a href="https://styled-components.com">Styled Components</a></li> <li><a href="https://stitches.dev/">Stitches</a></li> <li><a href="https://cssinjs.org/">JSS</a></li> <li><a href="https://emotion.sh/docs/introduction">Emotion</a></li> </ul> <h3> CSS-Design-Systems </h3> <ul> <li><a href="https://csslayout.io/">Css Layout</a></li> <li><a href="https://smolcss.dev/">SmolCSS</a></li> </ul> <h3> CSS-Generators </h3> <ul> <li><a href="https://generate-css.com/box-shadow-generator/">CSS-GEN box-shadow Generator</a></li> <li><a href="https://generate-css.com/border-radius-generator/">CSS-GEN border-radius Generator</a></li> <li><a href="https://generate-css.com/transform-generator/">CSS-GEN transform Generator</a></li> <li><a href="https://generate-css.com/image-filter/">CSS-GEN image-filter Generator</a></li> <li> <a href="https://cssgrid-generator.netlify.app/">CSS Grid Generator</a> - grid generator</li> <li> <a href="https://markodenic.com/tools/buttons-generator/">CSS Buttons Generator</a> - Button generator</li> <li> <a href="https://box-shadow.dev/">CSS box-shadow generator</a> - box-shadow generator</li> <li> <a href="https://neumorphism.io/#e0e0e0">Neumorphism.io</a> - Generate Sof-UI CSS code</li> <li> <a href="https://getwaves.io/">Make some waves!</a> - Wave generator</li> <li> <a href="https://wweb.dev/resources/css-separator-generator/">CSS Separator Generator</a> - make awkward separators html and css</li> <li> <a href="https://uigradients.com/#Dull">uiGradients</a> - gradient generator</li> <li> <a href="https://larsenwork.com/easing-gradients/">Easing Gradients</a> - gradient generator</li> <li> <a href="https://cssgradient.io/">CSS Gradient</a> - gradient generator</li> <li> <a href="https://gradient-designer.csspost.com/">gradient-designer</a> - gradient generator</li> <li> <a href="https://meshgradient.com/">Mesh Gradient</a> - gradient generator</li> <li> <a href="https://9elements.github.io/fancy-border-radius/">Fancy Border Radius</a> - border-radius generator</li> <li> <a href="https://shadows.brumm.af/">Smooth shadow gradient</a> - box-shadow gradient</li> <li><a href="https://bit.ly/3JxejGt">CSS Scroll Shadows!</a></li> </ul> <h3> CSS-Videos </h3> <ul> <li><a href="https://www.youtube.com/watch?v=_a5j7KoflTs">Sass Tutorial for Beginners - CSS With Superpowers by codeSTACKr</a></li> </ul> <h3> CSS-Websites </h3> <ul> <li><a href="https://css-tricks.com/">css-tricks</a></li> <li><a href="https://cssreference.io/">cssreference.io</a></li> <li><a href="https://cssauthor.com/">cssauthor</a></li> <li><a href="https://moderncss.dev/">Modern Css Solutions by Stephanie Eckles</a></li> <li><a href="https://stylestage.dev/">Style Stage by Stephanie Eckles</a></li> <li><a href="https://every-layout.dev/">Every Layout by Heydon Pickering &amp; Andy Bell</a></li> <li><a href="https://css-irl.info/">CSS { In Real Life } by Michelle Barker</a></li> <li><a href="https://htmlcheatsheet.com/css/">Css CheatSheet</a></li> <li><a href="https://2020.stateofcss.com/en-US/">State of CSS</a></li> <li><a href="https://devhints.io/sass">Sass cheatsheet</a></li> <li><a href="https://github.com/Famolus/awesome-sass">Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources.</a></li> <li><a href="https://wattenberger.com/blog/css-percents">What does 100% mean in CSS?</a></li> </ul> <h1> Front-End-Resources </h1> <h3> Front-End-Articles </h3> <ul> <li><a href="https://www.smashingmagazine.com/guides/">Smashing Magazine - Guides to Web Design and Development </a></li> <li><a href="https://www.thinkful.com/blog/why-learning-to-code-is-so-damn-hard/">Why learning to code is so damn hard?</a></li> <li><a href="https://www.joshwcomeau.com/javascript/terminal-for-js-devs/">The Front-End Developer's Guide to the Terminal</a></li> <li><a href="https://www.joshwcomeau.com/blog/how-to-learn-stuff-quickly/">How To Learn Stuff Quickly</a></li> <li><a href="https://medium.com/@muratcorlu/front-end-may-soon-need-new-sub-disciplines-60a4cde20562">Front-end may soon need new sub-disciplines</a></li> <li><a href="https://zapier.com/blog/think-like-a-programmer/">Learning to Code: How to Think Like a Programmer - Zapier</a></li> <li><a href="https://blog.devgenius.io/how-to-write-maintainable-javascript-code-in-2023-web-or-node-js-d66d8baead67">How to write maintainable JavaScript code in 2023 — Web or Node.js</a></li> </ul> <h3> Front-End-Challenges </h3> <ul> <li><a href="https://www.frontendmentor.io">Frontend Mentor.io</a></li> <li><a href="https://www.codementor.io/projects">DevProjects by codementor.io</a></li> <li><a href="https://www.acefrontend.com/">Ace FrontEnd</a></li> <li><a href="https://www.codewell.cc">codewell</a></li> <li><a href="https://devchallenges.io/">devChallenges</a></li> </ul> <h3> Front-end-Surveys </h3> <ul> <li><a href="https://tsh.io/State-of-Frontend-2022.pdf">State of Frontend 2022</a></li> <li><a href="https://stateofjs.com/en-us/">State of JavaScript</a></li> <li><a href="https://stateofcss.com/en-us/">State of CSS</a></li> </ul> <h3> Front-End-Websites </h3> <ul> <li> <a href="https://web.dev/patterns/">Patterns</a> - A collection of code snippets to help you optimize your web projects.</li> <li><a href="https://thevalleyofcode.com/">The Valley of Code</a></li> <li><a href="https://thisthat.dev/">This vs That</a></li> <li><a href="https://devtoolstips.org/">101 DevTools Tips</a></li> <li><a href="https://github.com/RitikPatni/Front-End-Web-Development-Resources">Front End Web Development Resources by Ritik Patni</a></li> <li><a href="https://github.com/dypsilon/frontend-dev-bookmarks">Front-End Dev Bookmarks by Tim Navrotskyy</a></li> <li><a href="https://rahulism.hashnode.dev/200-ultimate-resources-for-front-end-development-in-2021">200+ Ultimate Resources for Front-End Development in 2021 by Rahul</a></li> <li><a href="https://zerotomastery.io/resources/?utm_source=mailerlite&amp;utm_medium=email&amp;utm_campaign=the_1_question_i_get_asked_by_students&amp;utm_term=2022-06-05">ZTM Free Developer Resources</a></li> </ul> <h1> Git&amp;Github </h1> <h3> Git-Courses </h3> <ul> <li><a href="https://learngitbranching.js.org/">Learn Git Branching</a></li> <li><a href="https://lab.github.com/githubtraining/introduction-to-github">Introduction to GitHub</a></li> </ul> <h3> Git-Videos </h3> <ul> <li><a href="https://www.youtube.com/watch?v=SWYqp7iY_Tc">Git &amp; GitHub Crash Course For Beginners by Traversy Media</a></li> <li><a href="https://www.youtube.com/watch?v=hwP7WQkmECE">Git Explained in 100 Seconds by Fireship</a></li> <li><a href="https://www.youtube.com/watch?v=AMFoJoNh3V4">Getting Started with GitKraken for GitHub Users</a></li> </ul> <h3> Git-Websites </h3> <ul> <li><a href="https://gitexplorer.com/">Git Explorer</a></li> <li><a href="https://dangitgit.com/">Dangit, Git!?!</a></li> <li><a href="https://www.madebymike.com.au/writing/how-to-git/">Git from Beginner to Advanced by MadeByMike</a></li> <li><a href="https://www.atlassian.com/git/tutorials/advanced-overview">Advanced Git Tutorials by Bitbucket</a></li> <li><a href="https://csswizardry.com/2017/05/little-things-i-like-to-do-with-git/">Little Things I Like to Do with Git</a></li> <li><a href="https://ohshitgit.com/">Oh Shit, Git!?!</a></li> </ul> <h3> Git-Tools </h3> <ul> <li> <a href="https://github.com/jesseduffield/lazygit">lazygit</a> simple terminal UI for git commands</li> </ul> <h1> JavaScript </h1> <h3> JavaScript-Articles </h3> <ul> <li><a href="https://www.syncfusion.com/blogs/post/top-6-javascript-es12-features-you-should-use.aspx">Top 6 JavaScript ES12 Features You Should Use</a></li> <li><a href="https://javascript.plainenglish.io/">Javascript in Plain English - New JavaScript content every day</a></li> <li><a href="https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/">Building the DOM faster: speculative parsing, async, defer and preload by Milica Mihajlija</a></li> <li><a href="https://dev.to/ubahthebuilder/the-ultimate-tutorial-on-javascript-dom-js-dom-with-examples-1b47">The Ultimate Tutorial on JavaScript DOM - JS DOM with Examples </a></li> <li><a href="https://dev.to/ashutoshmishra4/some-advanced-and-important-array-methods-in-javascript-day-4-of-javascript30-2ao3">Learn map(), filter(), reduce(), and sort() in JavaScript </a></li> <li><a href="https://dev.to/codedgar/how-to-create-a-dark-theme-system-in-5-minutes-or-less-with-vanilla-js-2922">How to create a dark theme system in 5 minutes or less with vanilla JS. </a></li> <li><a href="https://devdojo.com/shreya/es6-handbook">ES6 Handbook</a></li> <li><a href="https://saharanitaa.hashnode.dev/introduction-to-promises-and-async-and-await-promises-in-javascript">Introduction to Promises and Async and Await Promises in Javascript! ✨</a></li> <li><a href="https://kentcdodds.com/blog/how-i-built-a-modern-website-in-2021">How I built a modern website in 2021</a></li> <li><a href="https://javascript.plainenglish.io/17-life-saving-javascript-one-liners-part1-b0b0b32c9f61">17 Life-Saving JavaScript One-Liners 🔥</a></li> <li><a href="https://2ality.com/index.html">2ality – JavaScript and more</a></li> <li><a href="https://javascript.plainenglish.io/how-to-use-javascript-arrays-like-a-pro-3137b3218fef">How to Use JavaScript Arrays Like a Pro</a></li> <li><a href="https://medium.com/@shadmansaalim321/how-much-javascript-should-you-learn-8c9178ef6f5">How much JavaScript should I learn? 🤔</a></li> <li><a href="https://www.joshwcomeau.com/javascript/statements-vs-expressions/">Statements Vs. Expressions</a></li> <li><a href="https://opensource.com/article/22/9/javascript-glossary">165+ JavaScript terms you need to know</a></li> </ul> <h3> JavaScript-Books </h3> <ul> <li><a href="https://github.com/getify/You-Dont-Know-JS">You Don't Know Javascript by Kyle Simpson</a></li> <li><a href="https://github.com/getify/Functional-Light-JS">Functional Light JavaScript by Kyle Simpson</a></li> <li><a href="https://eloquentjavascript.net/">Eloquent Javascript by Marijn Haverbeke</a></li> <li><a href="https://jsbooks.revolunet.com/">JSbooks - The best free JavaScript resources</a></li> <li><a href="https://exploringjs.com/">Exploring JS: JavaScript books for programmers</a></li> <li><a href="https://www.patterns.dev/">Learning Patterns by Lydia Hallie and Addy Osmani</a></li> <li><a href="https://leanpub.com/javascriptallongesix/read#leanpub-auto-about-javascript-allong">JavaScript Allongé: A strong cup of functions, objects, combinators, and decorators</a></li> </ul> <h3> JavaScript-Conference-Talks </h3> <ul> <li><a href="https://www.youtube.com/watch?v=rtmFCcjEgEw">Becoming a better developer by using the SOLID design principles by Katerina Trajchevska</a></li> <li><a href="https://www.youtube.com/watch?v=Xt5qpbiqw2g">The myth of the “Real JavaScript Developer” by Brenna O'Brien</a></li> <li><a href="https://www.youtube.com/watch?v=zlcnOr81lPc&amp;list=PLTektvstDHecgS_5pW3JKSepAq8IGWgLE&amp;index=1">How to fix the web by Brendan Eich</a></li> <li><a href="https://www.youtube.com/watch?v=pws4qzGn5ak&amp;list=PLTektvstDHecgS_5pW3JKSepAq8IGWgLE&amp;index=2&amp;t=360s">Get better at JavaScript with just JavaScript - Wes Bos</a></li> <li><a href="https://www.youtube.com/watch?v=e-5obm1G_FY&amp;t=1s">Learning Functional Programming with JavaScript - Anjana Vakil</a></li> </ul> <h3> JavaScript-Courses-Practices </h3> <ul> <li><a href="https://javascript30.com/">30 Days of JavaScript</a></li> <li><a href="https://egghead.io/lessons/javascript-introduction-to-how-to-write-an-open-source-javascript-library">Introduction to How to Write an Open Source JavaScript Library - egghead</a></li> <li><a href="https://scrimba.com/learn/es6">Learn Modern Javascript - scrimba</a></li> <li><a href="https://scrimba.com/learn/learnjavascript">Learn JavaScript for free - scrimba</a></li> <li><a href="https://github.com/ryanmcdermott/clean-code-javascript">clean-code-javascript</a></li> <li><a href="https://github.com/goldbergyoni/nodebestpractices">node.js-best-practices</a></li> <li><a href="https://github.com/trekhleb/javascript-algorithms">JavaScript Algorithms and Data Structures</a></li> <li><a href="https://zerotomastery.io/cheatsheets/javascript-cheatsheet-the-advanced-concepts/#JavaScriptEngine">JavaScript Cheat Sheet: The Advanced Concepts</a></li> </ul> <h3> JavaScript-Tools </h3> <ul> <li><a href="https://vitejs.dev/">vite.js</a></li> <li><a href="https://parceljs.org/">Parcel</a></li> <li><a href="https://gulpjs.com/">gulp</a></li> <li><a href="https://webpack.js.org/">webpack</a></li> <li><a href="https://esbuild.github.io/">esbuild</a></li> <li><a href="https://gruntjs.com/">Grunt</a></li> </ul> <h2> - <a href="https://babeljs.io/">Babel</a> </h2> <h3> JavaScript-Websites </h3> <ul> <li> <a href="https://justjavascript.com/">Just Javascript</a> - text based javascript course</li> <li> <a href="https://whatthefuck.is/">whatthefuck.is - </a> - dan's javascript glossary</li> <li><a href="https://javascriptpatterns.vercel.app/patterns">JavaScript Patterns Workshop</a></li> <li><a href="https://www.java5cript.com/">Free Javascript Resources</a></li> <li><a href="https://htmlcheatsheet.com/js/">Javascript CheatSheet</a></li> <li><a href="https://www.frontendcheatsheets.com/javascript">SheCodes Javascript Cheatsheet</a></li> <li><a href="http://jsforcats.com/">JavaScript For Cats</a></li> <li><a href="https://javascript.info/">Javascript.info</a></li> <li><a href="https://learnjavascript.online/">Learn Javascript Online</a></li> <li><a href="https://www.learn-js.org/">LEARN JS</a></li> <li><a href="https://egghead.io/q/javascript">egghead.io - Javascript</a></li> <li><a href="https://www.codecademy.com/learn/introduction-to-javascript">codecademy - Learn Javascript</a></li> <li><a href="https://github.com/public-apis/public-apis">public-apis</a></li> <li> <a href="https://jsoncrack.com/">JSON Crack</a> - seamlessly visualize your JSON data instantly into graphs</li> <li><a href="https://htmldom.dev/">Manage HTML DOM with vanilla JavaScript</a></li> </ul> <h1> React </h1> <h3> React-Articles </h3> <ul> <li><a href="https://dev.to/shaan_alam/how-to-learn-react-the-effective-way-2km7">How to learn React - The Effective way </a></li> <li><a href="https://javascript.plainenglish.io/5-packages-every-react-developer-must-know-e06bf1b96514">5 Packages Every React Developer Must Know</a></li> <li><a href="https://dev.to/theme_selection/ultimate-reactjs-resources-for-web-developers-2021-424c">Ultimate ReactJS Resources 🛠For Web Developers 2021👨‍💻 </a></li> <li><a href="https://medium.com/geekculture/react-5-things-that-might-surprise-you-ddefd9fbac0f">React — 5 Things That Might Surprise You</a></li> <li><a href="https://charuka95.medium.com/implementing-atomic-design-in-modern-react-development-d58d743a0f0b">Implementing Atomic Design in Modern React Development</a></li> <li><a href="https://medium.com/nerd-for-tech/some-features-every-react-developer-should-know-f960117464e8">Some Features Every React Developer Should Know</a></li> <li><a href="https://overreacted.io/a-complete-guide-to-useeffect/#each-render-has-its-own-effects">A Complete Guide to useEffect</a></li> <li><a href="https://blog.logrocket.com/persistent-login-in-react-using-refresh-token-rotation/">Persistent login in React using refresh token rotation</a></li> <li><a href="https://css-tricks.com/react-authentication-access-control/#:~:text=Your%20React%20app%20requests%20a,needs%20to%20make%20a%20request.">React Authentication &amp; Access Control</a></li> <li><a href="https://cult.honeypot.io/reads/react-libraries-2022/">13 Libraries You Should Know as a React Developer</a></li> <li><a href="https://devdojo.com/madzadev/19-github-repositories-to-become-a-react-master">19 GitHub Repositories to Become a React Master ⚛️🧙</a></li> <li><a href="https://danilowoz.com/blog/atomic-design-with-react">Atomic Design and ReactJS</a></li> </ul> <h3> React-Frameworks </h3> <ul> <li><a href="https://nextjs.org/">Next.js</a></li> <li><a href="https://remix.run/">REMIX</a></li> <li><a href="https://www.gatsbyjs.com/">Gatsby</a></li> </ul> <h3> React-Hooks </h3> <ul> <li><a href="https://github.com/streamich/react-use">react-use</a></li> <li><a href="https://react-hooks-cheatsheet.com/">React Hooks Cheatsheet</a></li> <li><a href="https://courses.webdevsimplified.com/react-hooks-simplified">React Hooks Simplified</a></li> </ul> <h3> React-State-Management </h3> <ul> <li><a href="https://zustand-demo.pmnd.rs/">Zustand</a></li> <li><a href="https://jotai.org/">Jotai</a></li> <li><a href="https://redux.js.org/">Redux</a></li> <li><a href="https://recoiljs.org/">Recoil</a></li> <li><a href="https://easy-peasy.vercel.app/">Easy Peasy</a></li> </ul> <h3> React-Tools </h3> <ul> <li><a href="https://mantine.dev/">Mantine</a></li> <li><a href="https://create-react-app.dev/">Create React App</a></li> <li><a href="https://www.javascriptstuff.com/react-starter-projects/">React Starter Projects</a></li> <li><a href="https://reactjs.org/blog/2015/09/02/new-react-developer-tools.html">React Dev-Tools</a></li> <li><a href="https://redux.js.org/">React Redux</a></li> <li><a href="https://storybook.js.org/">Storybook</a></li> <li><a href="https://devhints.io/react">React.js cheatsheet</a></li> <li><a href="https://evergreen.segment.com/">evergreen</a></li> <li><a href="https://react-styleguidist.js.org/">React Styleguidist</a></li> <li><a href="https://testing-library.com/docs/react-testing-library/example-intro/">React Testing Library</a></li> <li><a href="https://reactide.io/">REACTIDE</a></li> <li><a href="https://reactcosmos.org/">React Cosmos</a></li> <li><a href="https://react-proto.github.io/react-proto/">React Proto</a></li> <li><a href="https://gaearon.github.io/react-hot-loader/">React Hot Loader</a></li> <li><a href="https://react-hook-form.com/">React Hook Form</a></li> <li><a href="https://vasanthk.gitbooks.io/react-bits/content/">React Bits</a></li> <li><a href="https://react-bootstrap.github.io/">React Bootstrap</a></li> <li><a href="https://github.com/timc1/kbar">kbar - command + k interface</a></li> </ul> <h1> TypeScript </h1> <h3> TypeScript-Articles </h3> <ul> <li><a href="https://www.freecodecamp.org/news/typescript-for-react-developers/#whyuseeslintprettierandhusky">TypeScript for React Developers – Why TypeScript is Useful and How it Works</a></li> <li><a href="https://devdojo.com/suniljoshi19/an-introduction-to-typescript">An Introduction to TypeScript</a></li> <li><a href="https://css-tricks.com/the-relevance-of-typescript-in-2022/">The Relevance of TypeScript in 2022</a></li> <li><a href="https://developer.okta.com/blog/2022/03/14/react-vite-number-converter">Creating a TypeScript React Application with Vite</a></li> <li><a href="https://fjolt.com/article/typescript-creating-custom-types">Creating Custom Types in Typescript</a></li> <li><a href="https://www.carlrippon.com/React-event-handlers-with-typescript/">React Event Handlers with TypeScript</a></li> <li><a href="https://medium.com/frontend-canteen/with-these-articles-you-will-not-be-confused-when-learning-typescript-d96a5c99e229">With 30+ Articles, You Will Not Be Confused When Learning TypeScript</a></li> </ul> <h3> TypeScript-Courses </h3> <ul> <li><a href="https://github.com/typescript-cheatsheets/react">React+TypeScript Cheatsheets</a></li> <li><a href="https://github.com/total-typescript/beginners-typescript-tutorial">Beginners TypeScript Tutorial</a></li> </ul> <h3> TypeScript-Challenges </h3> <ul> <li><a href="https://github.com/type-challenges/type-challenges">Type Challenges</a></li> <li><a href="https://typescript-exercises.github.io/">TypeScript exercises</a></li> </ul> <h3> TypeScript-Tools </h3> <ul> <li><a href="https://ts-error-translator.vercel.app/">TypeScript Error Translator</a></li> </ul> <h1> Other-Content </h1> <h3> Blogs </h3> <ul> <li><a href="https://medium.com/@dan_abramov">Dav Abramov Medium</a></li> <li><a href="https://overreacted.io/">Overreacted - Dav Abramov Blog</a></li> <li><a href="https://kentcdodds.com/blog">Kent C. Dodds Blog</a></li> <li><a href="//dev.to">DEV Community</a></li> <li><a href="https://alligator.io/">alligator.io</a></li> <li><a href="https://flaviocopes.com/">Flavio Copes</a></li> <li><a href="https://una.im/">Una Kravets</a></li> <li><a href="https://www.silvestar.codes/articles/">Silvestar Bistrović</a></li> <li><a href="https://zellwk.com/blog/">Zell Liew</a></li> <li><a href="https://blog.webdevsimplified.com/">Kyle Cook (Web Dev Simplified)</a></li> <li><a href="https://www.lydiahallie.io/">Lydia Hallie</a></li> <li><a href="https://leerob.io/blog">Lee Rob</a></li> </ul> <h3> Other-Books </h3> <ul> <li><a href="https://frontendmasters.com/books/">Frontend Masters Books</a></li> </ul> <h3> Code-Formatters </h3> <ul> <li><a href="https://prettier.io/">Prettier</a></li> <li><a href="https://www.10bestdesign.com/dirtymarkup/">dirtyMarkup</a></li> <li><a href="https://github.com/rishirdua/awesome-code-formatters">awesome-code-formatters</a></li> </ul> <h3> Developer&amp;Productivity-Tools </h3> <ul> <li> <a href="https://www.raycast.com/">Raycast</a> - Spotlight with super powers with lots of <a href="https://www.raycast.com/store">awesome extensions</a>.</li> <li> <a href="https://wojciechkulik.pl/snippety">Snipetty</a> - Tool for developers to create code snippets.</li> <li> <a href="https://polypane.app/">Polypane</a> - Development focused browser for building apps and refactoring.</li> <li> <a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en">React Developer Tools</a> - Chrome extension for React Development.</li> <li> <a href="https://github.com/gbammc/Thor">Thor</a> - Easy switch between apps by custom shortcuts.</li> <li> <a href="https://alt-tab-macos.netlify.app/">AltTab</a> - Customize your alt-tab settings deeply.</li> <li> <a href="https://xscopeapp.com/">xScope</a> - Great tool for both design and development.</li> <li> <a href="https://sipapp.io/">Sip</a> - Color picker for Mac OS.</li> <li> <a href="https://raindrop.io/">RainDrop</a> - Bookmark manager.</li> <li> <a href="https://copilot.github.com/">Github Copilot</a> - Your AI pair programmer.</li> <li> <a href="https://wakatime.com/">WakaTime</a> - Track your time in both browser and IDE.</li> <li> <a href="https://www.gitkraken.com/">GitKarken</a> - Git GUI &amp; Git CLI with a lot of features.</li> <li> <a href="https://usedevbook.com/">DevBook</a> - Search through the DevDocs and StackOverflow without switching to your browser.</li> <li> <a href="https://daily.dev/">daily.dev</a> - Great tool for finding hottest trends and popular articles.</li> </ul> <h3> Discord Communities </h3> <ul> <li><a href="https://discord.com/invite/aBx8dcu">Frontend Developers</a></li> <li><a href="https://discord.com/invite/9Rc6WNhNGJ">Kevin Powell - Community</a></li> <li><a href="https://discord.com/invite/euBTshKEnm">KCD - Kent C. Dodds Community</a></li> <li><a href="https://discord.com/invite/reactiflux">Reactiflux</a></li> <li><a href="https://discord.gg/F4WxPafp">Bruno Simon Community (Three.js)</a></li> <li><a href="https://discord.gg/nextjs">Next.js Community</a></li> </ul> <h3> Documentations </h3> <ul> <li><a href="https://developer.mozilla.org/en-US/">Mozilla Developer Network</a></li> <li><a href="https://beta.reactjs.org/">React Docs (beta)</a></li> <li><a href="https://devdocs.io/">DevDocs</a></li> <li><a href="https://sass-lang.com">sass-lang</a></li> </ul> <h2> - <a href="https://www.typescriptlang.org/docs/">TypeScript Documentation</a> </h2> <h3> Interactive-Games </h3> <ul> <li><a href="https://codingfantasy.com/games/flexboxadventure">Flex Box Adventure</a></li> <li><a href="https://knightsoftheflexboxtable.com/">Knights of the Flexbox Table</a></li> <li><a href="https://geddski.teachable.com/p/flexbox-zombies">Flexbox Zombies</a></li> <li><a href="https://flexboxfroggy.com/">Flexbox Froggy</a></li> <li><a href="http://www.flexboxdefense.com/">Flexbox Defense</a></li> <li><a href="https://the-echoplex.net/flexyboxes/">Flexy Boxes</a></li> <li><a href="https://cssgridgarden.com/">CSS Grid Garden</a></li> <li><a href="https://alialaa.github.io/css-grid-cheat-sheet/">CSS Grid Cheat Sheet</a></li> <li><a href="https://codingfantasy.com/games/css-grid-attack">CSS Grid Attack</a></li> <li><a href="https://gridcritters.com/">CSS Grid Critters </a></li> <li><a href="https://frontend30.com/css-selectors-cheatsheet/">CSS Selectors Cheatsheet</a></li> <li><a href="https://css-animations.io/">CSS Animations</a></li> <li><a href="https://katydecorah.com/css-ruler/">CSS Rules</a></li> <li><a href="https://ilyashubin.github.io/FilterBlend/">CSS Filter Blend</a></li> <li><a href="https://cssbattle.dev/">CSS Battle</a></li> <li><a href="https://flukeout.github.io/">CSS Diner</a></li> <li><a href="https://typescript-exercises.github.io/">TypeScript Exercises</a></li> <li><a href="https://react-tutorial.app/">React Tutorial</a></li> <li><a href="https://play.elevatorsaga.com/">Elevator Saga - JavaScript</a></li> <li><a href="https://screeps.com/">Screeps - JavaScript</a></li> <li><a href="https://alexnisnevich.github.io/untrusted/">Untrusted - JavaScript</a></li> <li><a href="https://bevacqua.github.io/promisees/">PromiSEES - Javascript</a></li> <li><a href="https://www.jschallenger.com/">JSchallenger</a></li> <li><a href="https://lab.reaal.me/jsrobot/">JSRobot</a></li> <li><a href="https://serviceworkies.com/">Service Workies (PWAs)</a></li> <li><a href="https://learngitbranching.js.org/">Learn Git Branching</a></li> <li><a href="https://selectstarsql.com/">Select Star SQL</a></li> <li><a href="https://sqlpd.com/">SQL Police Department</a></li> <li><a href="https://sqlbolt.com/">SQLBolt</a></li> <li><a href="https://regexcrossword.com/">Regex Crossword</a></li> <li><a href="https://regex101.com/">Regex101</a></li> <li><a href="https://regexone.com/">RegexOne</a></li> <li><a href="https://www.codingame.com/start">CodinGame</a></li> <li><a href="https://www.openvim.com/">OpenVim</a></li> <li><a href="https://jamstack-attack.herokuapp.com/">Jamstack Attack</a></li> <li><a href="https://javascriptquiz.com/">JavaScript Quiz</a></li> </ul> <h3> Interview Practices </h3> <ul> <li><a href="https://github.com/jwasham/coding-interview-university">Coding Interview University</a></li> <li><a href="https://github.com/mission-peace/interview">mission-peace interview</a></li> <li><a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions">Front-end Developer Interview Questions</a></li> <li><a href="https://github.com/sudheerj/reactjs-interview-questions">React Interview Questions</a></li> <li><a href="https://github.com/ganqqwerty/123-Essential-JavaScript-Interview-Questions">123 Essential JavaScript Interview Questions</a></li> <li><a href="https://github.com/sudheerj/javascript-interview-questions">JavaScript Interview Questions &amp; Answers</a></li> <li><a href="https://github.com/lydiahallie/javascript-questions/blob/master/README.md">JavaScript Questions</a></li> <li><a href="https://techinterviewhandbook.org/">Tech Interview Handbook</a></li> <li><a href="https://frontendinterviewhandbook.com/">Front End Interview Handbook by Yangshun Tay</a></li> <li><a href="https://github.com/sadanandpai/javascript-code-challenges">JavaScript Code Challenges</a></li> <li><a href="https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95">10 Interview Questions Every JavaScript Developer Should Know</a></li> </ul> <h4> System Design </h4> <ul> <li><a href="https://www.youtube.com/c/FrontEndEngineer">Front End Engineer</a></li> </ul> <h3> Newsletters </h3> <ul> <li><a href="https://newsletter.codestackr.com/">STACKR News</a></li> <li><a href="https://www.kevinpowell.co/newsletter/">newsletter by Kevin Powell</a></li> <li><a href="https://flaviocopes.com/page/newsletter/">flaviocopes newsletter</a></li> <li><a href="https://css-tricks.com/newsletters/">CSS-Tricks Newsletter</a></li> <li><a href="https://www.smashingmagazine.com/the-smashing-newsletter/">Smashing Magazine Newsletter</a></li> <li><a href="https://moderncss.dev/newsletter/">ModernCSS by Stephanie Eckles</a></li> <li><a href="https://www.stefanjudis.com/newsletter/">Stefan's Web Weekly</a></li> <li><a href="https://javascriptweekly.com/">JavaScript Weekly</a></li> <li><a href="https://webtoolsweekly.com/">Web Tools Weekly</a></li> <li><a href="https://courses.webdevsimplified.com/">Web Dev Simplified newsletter</a></li> <li><a href="https://frontendfoc.us/">Frontend Focus</a></li> <li><a href="http://weekly.cssanimation.rocks/">CSS Animation Weekly</a></li> <li><a href="https://umaar.com/dev-tips/">Dev Tips</a></li> <li><a href="https://css-weekly.com/">cssweekly</a></li> </ul> <h3> Podcasts </h3> <ul> <li><a href="https://syntax.fm/">Syntax.</a></li> <li><a href="https://www.frontendhappyhour.com/">Front End Happy Hour</a></li> <li><a href="https://thecsspodcast.libsyn.com/">The CSS Podcast</a></li> <li><a href="https://freecodecamp.libsyn.com/">The freeCodeCamp Podcast</a></li> <li><a href="https://shoptalkshow.com/">Shop Talk Show</a></li> <li><a href="https://blog.codepen.io/radio/">CodePen Radio</a></li> <li><a href="https://devchat.tv/show/javascript-jabber">JavaScript Jabber</a></li> <li><a href="https://changelog.com/jsparty">JS Party</a></li> <li><a href="https://www.ladybug.dev/">Ladybug Podcast</a></li> <li><a href="https://www.orbit.fm/weboftomorrow">Orbit FM - Web of Tomorrow</a></li> <li><a href="https://fullstackradio.com/">Full Stack Radio</a></li> <li><a href="https://frontside.com/podcast/">Frontside Podcast</a></li> <li><a href="https://developertea.com/">developer tea</a></li> <li><a href="https://egghead.io/q?type=podcast">egghead.io podcast</a></li> <li><a href="https://thefrontendpodcast.site/">The Front End Podcast</a></li> <li><a href="https://podcasts.apple.com/us/podcast/frontend-news-2021-frontendhouse-com/id1549875490">Frontend News 2021</a></li> </ul> <h3> Reddit-Subreddits </h3> <ul> <li><a href="https://www.reddit.com/r/FreeCodeCamp/">freeCodeCamp.org: Learn to Code for Free From Home</a></li> <li><a href="https://www.reddit.com/r/programming/">programming</a></li> <li><a href="https://www.reddit.com/r/AskComputerScience/">AskComputerScience</a></li> <li><a href="https://www.reddit.com/r/iOSProgramming/">iOS Programming</a></li> <li><a href="https://www.reddit.com/r/learnjavascript/">Learn Javascript</a></li> <li><a href="https://www.reddit.com/r/computerscience/">Computer Science</a></li> <li><a href="https://www.reddit.com/r/web_design/">web_design</a></li> <li><a href="https://www.reddit.com/r/coding/">coding</a></li> <li><a href="https://www.reddit.com/r/learnprogramming/">learn programming</a></li> <li><a href="https://www.reddit.com/r/javascript/">javascript</a></li> <li><a href="https://www.reddit.com/r/AskProgramming/">AskProgramming</a></li> <li><a href="https://www.reddit.com/r/webdev/">webdev: reddit for web developers</a></li> <li><a href="https://www.reddit.com/r/HTML/">HyperText Markup Language</a></li> <li><a href="https://www.reddit.com/r/html5/">HTML5 &amp; Friends</a></li> <li><a href="https://www.reddit.com/r/Frontend/">Bringing the web out of 2007 since 2013.</a></li> <li><a href="https://www.reddit.com/r/css/">Cascading Style Sheets</a></li> <li><a href="https://www.reddit.com/r/cssnews/">Official announcements pertaining to reddit custom CSS</a></li> <li><a href="https://www.reddit.com/r/ProCSS/">ProCSS</a></li> <li><a href="https://www.reddit.com/r/css_irl/">css_irl</a></li> <li><a href="https://www.reddit.com/r/csshelp/">Help for reddit's CSS</a></li> <li><a href="https://www.reddit.com/r/Sass/">Sass - a language for building awesome CSS</a></li> </ul> <h3> Roadmaps </h3> <ul> <li><a href="https://roadmap.sh/react">React Roadmap</a></li> <li><a href="https://courses.codestackr.com/courses/2022-web-dev-roadmap/">2022 Web Dev Roadmap by codeSTACKr</a></li> <li><a href="https://andreasbm.github.io/web-skills/">Web Skills Roadmap</a></li> <li><a href="https://roadmap.sh/frontend">Step by step guide to becoming a modern frontend developer by roadmap.sh</a></li> <li><a href="https://frontendmasters.com/guides/learning-roadmap/">The Front-End Developer Learning Roadmap by FrontendMasters</a></li> <li><a href="https://cult.honeypot.io/reads/how-to-learn-javascript-2021/">How to Learn Javsascript 2021</a></li> <li><a href="https://www.mindmeister.com/1982032240?t=INxEXrxj1w">React advanced education</a></li> </ul> <h3> Online-Curriculums </h3> <ul> <li><a href="https://www.freecodecamp.org/">freeCodeCamp</a></li> <li><a href="https://www.theodinproject.com">The Odin Project</a></li> <li><a href="https://github.com/microsoft/Web-Dev-For-Beginners">Web Dev for Beginners - Microsoft</a></li> <li><a href="https://github.com/jwasham/coding-interview-university">Coding Interview University</a></li> </ul> <h3> Youtube-Channels </h3> <ul> <li><a href="https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA">Fireship</a></li> <li><a href="https://www.youtube.com/user/KepowOb">Kevin Powell</a></li> <li><a href="https://www.youtube.com/channel/UCDCHcqyeQgJ-jVSd6VJkbCw">codeSTACKr</a></li> <li><a href="https://www.youtube.com/user/TechGuyWeb">Traversy Media</a></li> <li><a href="https://www.youtube.com/user/DesignCourse">DesignCourse</a></li> <li><a href="https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw">Web Dev Simplified</a></li> <li><a href="https://www.youtube.com/channel/UCoebwHSTvwalADTJhps0emA">Wes Bos</a></li> <li><a href="https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg">The Net Ninja</a></li> <li><a href="https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q">Dev Ed</a></li> <li><a href="https://www.youtube.com/c/AdamArgyleInk">Adam Argyle</a></li> <li><a href="https://www.youtube.com/c/TheCoderCoder">Coder Coder</a></li> <li><a href="https://www.youtube.com/channel/UCqrILQNl5Ed9Dz6CGMyvMTQ">Clever Programmer</a></li> <li><a href="https://www.youtube.com/channel/UCtxCXg-UvSnTKPOzLH4wJaQ">Coding Tech</a></li> <li><a href="https://www.youtube.com/channel/UCUOMtzQmEmhIAF8G_cha_Xw">Dorian Develops</a></li> <li><a href="https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ">Adrian Twarog</a></li> <li><a href="https://www.youtube.com/channel/UC-8QAzbLcRglXeN_MY9blyw">Ben Awad</a></li> <li><a href="https://www.youtube.com/channel/UCkCJ0zLrSg7VudR97g-FNVQ">Kenny Gunderman</a></li> <li><a href="https://www.youtube.com/channel/UC4JX40jDee_tINbkjycV4Sg">Tech With Tim</a></li> <li><a href="https://www.youtube.com/channel/UCeU-1X402kT-JlLdAitxSMA">Florin Pop</a></li> <li><a href="https://www.youtube.com/channel/UCshZ3rdoCLjDYuTR_RBubzw">Program With Erik</a></li> <li><a href="https://www.youtube.com/c/Codevolution/featured">Codevolution</a></li> <li><a href="https://www.youtube.com/channel/UClLXKYEEM8OBBx85DOa6-cg">Devslopes</a></li> <li><a href="https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ">freeCodeCamp.org</a></li> <li><a href="https://www.youtube.com/channel/UCcabW7890RKJzL968QWEykA">CS50</a></li> <li><a href="https://www.youtube.com/c/JSConfEU">JSConf</a></li> <li><a href="https://www.youtube.com/c/uidotdev">uidotdev</a></li> </ul> <h3> Mixed-Content </h3> <ul> <li><a href="https://web.dev/">web.dev</a></li> <li><a href="https://raindrop.io/laurent-devernay/coder-survival-guide-7258291">Coder Survival Guide</a></li> <li><a href="https://tutorialzine.com/">tutorialzine</a></li> <li><a href="https://www.30secondsofcode.org/">30 Seconds of Code</a></li> <li><a href="https://github.com/codeSTACKr/free-developer-resources">Awesome Free Developer Resources by codeSTACKr</a></li> <li><a href="https://designresources.dev/">Design Resources by Brad Traversy &amp; Csaba Kissi</a></li> <li><a href="https://www.tuckertriggs.com/blog/ultimate-list-of-web-development-podcasts?__s=mw1vsbos5p3kz1ayksv5&amp;utm_source=pocket_mylist">The Ultimate List of Web Development Podcasts</a></li> <li><a href="https://blog.suhailkakar.com/best-design-resources-for-developers">Best Design Resources for Developers by Suhail Kakar</a></li> <li><a href="https://devhints.io/">Rico's cheatsheet</a></li> <li><a href="https://cult.honeypot.io/">cult. by Honeypot</a></li> <li><a href="https://www.codecademy.com/resources/cheatsheets/subject/web-development">codecademy Web Development Cheatsheet</a></li> <li><a href="https://overapi.com/">OverAPI - Collecting All Cheat Sheets</a></li> <li><a href="https://tympanus.net/codrops/">codrops</a></li> <li><a href="https://ebookfoundation.github.io/free-programming-books/">free-programming-books</a></li> <li><a href="https://free-for.dev/#/">free-for.dev</a></li> <li><a href="https://github.com/sindresorhus/awesome">awesome-resources</a></li> <li><a href="https://github.com/jbranchaud/til">Today I Learned by jbranchaud</a></li> <li><a href="https://github.com/mtdvio/every-programmer-should-know">Every Programmer Should Know 🤔</a></li> <li><p><a href="https://www.vscheatsheet.com/">Visual Studio Code Cheat Sheet</a></p></li> <li><p><a href="https://docs.soliditylang.org/en/v0.8.10/#">Solidity</a></p></li> </ul> <h3> Videos </h3> <ul> <li><a href="https://www.youtube.com/watch?v=wHTcrmhskto&amp;t=2s">Is Web3 all Hype? Top 10 Web 3.0 Questions &amp; Answers by Fireship</a></li> </ul> <h3> Youtube Channels </h3> <ul> <li><a href="https://www.youtube.com/channel/UCY0xL8V6NzzFcwzHCgB8orQ">Dapp University</a></li> <li><a href="https://www.youtube.com/channel/UClnw_bcNg4CAzF772qEtq4g">Web3 Foundation</a></li> <li><a href="https://www.youtube.com/channel/UCgWS9Q3P5AxCWyQLT2kQhBw">Moralis Web3</a></li> <li><a href="https://www.youtube.com/c/EatTheBlocks/videos">EatTheBlocks</a></li> </ul> webdev javascript react css