The latest articles on Forem by Burak Alp (@bur0). https://forem.com/bur0 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%2F547378%2F123c8339-7e64-4cbe-b7b6-6c3c8daefc7f.jpeg https://forem.com/bur0 en Burak Alp Sat, 26 Dec 2020 09:11:57 +0000 https://forem.com/bur0/frontend-resources-36dj https://forem.com/bur0/frontend-resources-36dj <p>In this article, I listed useful resources and tools that you can use to improve your front-end skills. If you have resources you want to add, you can contribute to the <a href="https://github.com/Bur0/burakalpkara.com">repository</a>.</p> <p>Source : <a href="https://burakalpkara.com">burakalpkara.com</a></p> <h3> 📚 Blogs &amp; Magazines </h3> <ul> <li><a href="https://developer.mozilla.org/en-US/">developer.mozilla.org</a></li> <li> <a href="https://css-tricks.com/">css-tricks.com</a> </li> <li><a href="https://dev.to/">dev.to</a></li> <li><a href="https://www.smashingmagazine.com/">smashingmagazine.com</a></li> <li><a href="https://tympanus.net">tympanus.net</a></li> <li><a href="https://www.cssdesignawards.com/">cssdesignawards.com</a></li> <li> <a href="https://odayibasi.medium.com/">odayibasi.medium.com</a> 🇹🇷</li> <li><a href="https://alistapart.com/">alistapart.com</a></li> <li><a href="https://davidwalsh.name/">davidwalsh.name</a></li> <li><a href="https://css-weekly.com/">css-weekly.com</a></li> <li><a href="https://www.sitepoint.com/">sitepoint.com</a></li> <li><a href="https://sidebar.io/">sidebar.io</a></li> <li> <a href="https://turkcedokuman.com/">turkcedokuman.com</a> 🇹🇷</li> <li><a href="https://frontend.horse/">frontend.horse</a></li> <li><a href="https://heydesigner.com/">heydesigner.com</a></li> <li><a href="https://drafts.csswg.org/">drafts.csswg.org</a></li> <li> <a href="https://fatihhayrioglu.com/">fatihhayrioglu.com</a> 🇹🇷</li> <li><a href="https://jstutorial.medium.com/">jstutorial.medium.com</a></li> <li><a href="https://wesbos.com/blog">wesbos.com/blog</a></li> <li><a href="https://blog.logrocket.com/">blog.logrocket.com</a></li> <li><a href="https://overreacted.io/">overreacted.io</a></li> <li><a href="https://justjavascript.com/">justjavascript.com</a></li> <li><a href="https://epicreact.dev/">epicreact.dev</a></li> <li><a href="https://frontendfoc.us/">frontendfoc.us</a></li> <li><a href="https://www.kevinpowell.co/articles/">kevinpowell.co/articles</a></li> <li> <a href="https://javascript.info">javascript.info</a> </li> <li> <a href="https://web-standards.ru/">web-standards.ru</a> 🇷🇺</li> <li><a href="https://www.joshwcomeau.com">joshwcomeau.com</a></li> <li><a href="https://ishadeed.com">ishadeed.com</a></li> <li><a href="https://jxnblk.com/blog">jxnblk.com/blog</a></li> <li><a href="https://infinum.com/handbook/books/frontend">infinum.com/handbook</a></li> <li><a href="https://1loc.dev/">1loc.dev</a></li> <li><a href="https://elad.medium.com/">elad.medium.com</a></li> <li><a href="https://catchjs.com/Blog/PerformanceInTheWild">catchjs.com/Blog/PerformanceInTheWild</a></li> <li> <a href="https://wizardzines.com/zines/css/">wizardzines.com</a> </li> <li><a href="https://github.com/luruke/browser-2020">browser-2020</a></li> <li> <a href="//hwclass.medium.com">hwclass.medium.com</a> </li> <li><a href="https://catalin.red/">catalin.red</a></li> <li><a href="https://speckyboy.com/">speckyboy.com</a></li> <li><a href="https://css-irl.info/">css-irl.info</a></li> </ul> <h3> 🎯 Playground &amp; Sites </h3> <ul> <li><a href="//codepen.io/trending">codepen.io</a></li> <li> <a href="https://www.w3schools.com">w3schools.com</a> </li> <li> <a href="https://flexboxfroggy.com">flexboxfroggy.com</a> </li> <li><a href="https://cssgridgarden.com">cssgridgarden.com</a></li> <li><a href="https://ishadeed.com/article/learn-css-positioning/">Learn CSS Positioning</a></li> <li> <a href="https://codyhouse.co/">codyhouse.co</a> 💰</li> </ul> <h3> ⚓︎ Javascript/Css Ui Framework </h3> <ul> <li><a href="http://tailwindcss.com/">tailwindcss</a></li> <li><a href="https://bulma.io/">Bulma</a></li> <li><a href="https://getbootstrap.com/">Bootstrap</a></li> <li><a href="https://ant.design/">Ant Design</a></li> <li><a href="https://elemefe.github.io/element-react/#/en-US/quick-start">Element</a></li> <li><a href="https://semantic-ui.com/">Semantic Ui</a></li> <li><a href="https://vuetifyjs.com">Vuetify</a></li> <li><a href="https://bootstrap-vue.org/">Bootstrap Vue</a></li> <li><a href="https://buefy.org/">Buefy</a></li> <li><a href="https://vuesax.com/">Vuesax</a></li> </ul> <h3> ⚒️ Toolkit </h3> <ul> <li><a href="https://bit.dev/">bit.dev</a></li> <li> <a href="https://tiny-helpers.dev/">tiny-helpers.dev</a> 🚀</li> <li><a href="https://caniuse.com/">caniuse.com</a></li> <li><a href="https://www.photopea.com/">photopea.com</a></li> <li> <a href="https://usewindy.com/">usewindy.com</a> 💰</li> <li> <a href="https://javier.xyz/visual-center/">javier.xyz/visual-center</a> </li> <li><a href="https://svgbox.net/iconsets">svgbox.net/iconsets</a></li> <li><a href="https://tinypng.com/">tinypng.com</a></li> <li><a href="https://github.com/responsively-org/responsively-app">Responsively App</a></li> <li><a href="https://wweb.dev/resources/css-separator-generator">wweb.dev/resources/css-separator-generator</a></li> <li><a href="https://github.com/dferber90/githubbox">githubbox</a></li> <li><a href="https://www.remove.bg/">remove.bg</a></li> <li><a href="https://vanschneider.com/colors">vanschneider.com/colors</a></li> <li><a href="https://feathericons.com/">feathericons.com</a></li> <li><a href="https://heroicons.dev/">heroicons.dev</a></li> <li><a href="https://icones.netlify.app/">icones.netlify.app</a></li> <li><a href="https://bundlephobia.com/">bundlephobia.com</a></li> <li><a href="https://blocks.wickedtemplates.com">blocks.wickedtemplates.com</a></li> </ul> <h3> 🍪 Browser Extensions </h3> <ul> <li> <a href="https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl">PerfectPixel</a> </li> <li><a href="https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh">JSON Viewer</a></li> <li><a href="https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl">CSS Peeper</a></li> <li><a href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl">WhatFont</a></li> </ul> <h3> 🎒 Courses </h3> <ul> <li><a href="https://www.freecodecamp.org/">freecodecamp.org</a></li> <li> <a href="https://www.pluralsight.com/">pluralsight.com</a> 💰</li> <li> <a href="https://designcode.io/">designcode.io</a> 💰</li> <li> <a href="https://frontendmasters.com/">frontendmasters.com</a> 💰</li> <li><a href="https://www.leveluptutorials.com/">leveluptutorials.com</a></li> <li><a href="https://www.codecademy.com/">codecademy.com</a></li> <li><a href="https://htmlacademy.org">htmlacademy.org</a></li> <li><a href="https://andreasbm.github.io/web-skills/">andreasbm.github.io/web-skills</a></li> <li><a href="https://scrimba.com/">scrimba.com</a></li> <li> <a href="https://codecourse.com/">codecourse.com</a> 💰</li> <li><a href="https://teamtreehouse.com/">teamtreehouse.com</a></li> <li> <a href="https://www.linkedin.com/learning">linkedin.com/learning</a> 💰</li> <li><a href="https://egghead.io/">egghead.io</a></li> <li> <a href="https://masteringnextjs.com/">masteringnextjs.com</a> </li> <li> <a href="https://courses.reactsecurity.io/">courses.reactsecurity.io</a> 💰</li> <li><a href="https://www.reactnativeschool.com/">reactnativeschool.com</a></li> </ul> <h3> 🏔 UX / UI </h3> <ul> <li> <a href="//uxarchive.com">uxarchive.com</a> </li> <li><a href="https://www.lukew.com/">lukew.com</a></li> <li><a href="https://refactoringui.com/">refactoringui.com</a></li> <li><a href="https://uxmovement.com/">uxmovement.com</a></li> <li><a href="https://www.checklist.design/">checklist.design</a></li> <li> <a href="https://userway.org/">userway.org</a> 💰</li> <li> <a href="https://sherpa.blog/">sherpa.blog</a> 🇹🇷 💰</li> <li><a href="https://medium.com/@nathanacurtis">medium.com/@nathanacurtis</a></li> <li> <a href="https://www.youtube.com/channel/UCVH6om9EisvKXJtJCjm3fyA/videos">UI'da Çözeriz</a> 🇹🇷</li> </ul> <h3> 🔴 Youtube </h3> <ul> <li><a href="https://www.youtube.com/c/DesignCourse/videos">DesignCourse</a></li> <li><a href="https://www.youtube.com/c/AdamArgyleInk/videos">AdamArgyleInk</a></li> <li><a href="https://www.youtube.com/c/JustinKimJS/videos">Justin Kim</a></li> <li><a href="https://www.youtube.com/c/WesBos/videos">WesBos</a></li> <li><a href="https://www.youtube.com/c/TheNetNinja/videos">TheNetNinja</a></li> <li> <a href="https://www.youtube.com/c/AdemIlter/videos">Adem İlter</a> 🇹🇷</li> <li> <a href="https://www.youtube.com/c/FatihAcet/videos">Fatih Acet</a> 🇹🇷</li> <li><a href="https://www.youtube.com/kepowob/videos">Kevin Powell</a></li> <li><a href="https://www.youtube.com/c/Codegrid/videos">Codegrid</a></li> <li> <a href="https://www.youtube.com/c/codedamn/videos">codedamn</a> </li> <li> <a href="https://www.youtube.com/channel/UC36g9LO0Y5obns9PJCoBp8g/videos">Kodla Co</a> 🇹🇷</li> <li> <a href="https://www.youtube.com/channel/UCUmfDu4Ux_uD9Hv5GKtNHAg/videos">Webend</a> 🇹🇷</li> <li><a href="https://www.youtube.com/c/Codevolution/videos">Codevolution</a></li> <li><a href="https://www.youtube.com/c/RachelAndrew/videos">Rachel Andrew</a></li> <li><a href="https://www.youtube.com/c/GoogleChromeDevelopers/videos">Google Chrome Developers</a></li> <li><a href="https://www.youtube.com/channel/UCFyXA9x8lpL3EYWeYhj4C4Q/videos">John Ahn</a></li> <li> <a href="https://www.youtube.com/channel/UCRjiquPh4mjPNoOV9eCilXQ/videos">Engin Demiroğ</a> 🇹🇷</li> <li><a href="https://www.youtube.com/c/DesignIntoCode/videos">DesignIntoCode</a></li> <li><a href="https://www.youtube.com/c/itzpradip/videos">Pradip Debnath</a></li> <li><a href="https://www.youtube.com/c/Devdojo/videos">Devdojo</a></li> <li><a href="https://www.youtube.com/c/wcandillon/videos">William Candillon</a></li> <li> <a href="https://www.youtube.com/c/TarikGuney/videos">Tarik Guney</a> 🇹🇷</li> <li> <a href="https://www.youtube.com/c/JSTurk/videos">JS Turk</a> 🇹🇷</li> <li> <a href="https://www.youtube.com/c/PROTOTURKCOM/videos">PROTOTURK</a> 🇹🇷</li> <li><a href="https://www.youtube.com/c/WebDevSimplified/videos">Web Dev Simplified</a></li> <li> <a href="https://www.youtube.com/c/FrontendIstanbul/videos">Frontend Istanbul</a> 🇹🇷</li> <li><a href="https://www.youtube.com/c/AdrianTwarog/videos">AdrianTwarog</a></li> <li><a href="https://www.youtube.com/c/currankelleher/videos">Curran Kelleher</a></li> <li><a href="https://www.youtube.com/c/JavaScriptMastery/videos">JavaScriptMastery</a></li> <li> <a href="https://www.youtube.com/c/kablosuzkedii/videos">Kablosuz Kedi</a> 🇹🇷</li> <li> <a href="https://www.youtube.com/c/microcode/videos">microcode</a> </li> </ul> <h4> 🟣 Instagram </h4> <ul> <li><a href="https://www.instagram.com/samanthaming/">samanthaming</a></li> </ul> frontend javascript ui ux