[개발 Resource] 2021 웹개발 필요한 도구 모음 | 리소스 모음

 

 

DEVELOPER ROADMAPS

 

• Frontend 45 - Frontend Development Roadmap.
• Backend 24 - Backend Development Roadmap.
• React 15 - React Development Roadmap.
• Andriod 6 - Android Development Roadmap.
• DevOps 9 - DevOps Roadmap.

 

 DOCUMENTATIONS AND CHEATSHEETS

 

• MDN Web Docs 1 - The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
• DevDocs - Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app.
• DEVHINTS - A modest collection of cheatsheets.
• FLEX - Malven 3 - A visual cheatsheet for CSS flex layout.
• GRID - Malven 1 - A visual cheatsheet for CSS grid layout.

 

 DESIGN TOOLS

 

• Figma 4 - Figma helps teams create, test, and ship better designs from start to finish.
• Adobe XD - Share your story with designs that look and feel like the real thing. Wireframe, animate, prototype, collaborate, and more — it’s all right here, all in one place.
• Sketch - Create, prototype, collaborate, and bring your ideas to life with the design platform used by over one million people — from freelancers, to the world’s largest teams.
• Whimsical 1 - Communicate visually at the speed of thought – collaborative flowcharts, wireframes, sticky notes, and mind maps.

 

 

 HOW THE WEB WORKS?

 

• How the Internet Works Video 2 - How does the Internet Works?
• How the Internet Works Brief Videos 2 - A brief explanations on, how does the Internet works?
• DNS 4 - How DNS works?
• HTTPS 3 - How HTTPS works?

 

HTML AND CSS

 

• freeCodeCamp 2 - Free course to learn Web Development.
• Interneting Is Hard - Friendly web development tutorials for complete beginners.
• HTML Elements 1 - HTML elements reference by MDN.
• HTML Entity 1 - HTML Entity Reference by CSS-Tricks.
• CSS3 Properties - CSS reference by MDN.
• CSS Reference 1 - A free visual guide to CSS.
• Flexbox Froggy 1 - A game that helps you to learn CSS Flex.
• CSS TRICKS - Flexbox - A Complete Guide to Flexbox.
• Grid Garden - A game for learning CSS Grid.
• CSS TRICKS - A Complete Guide to Grid 2 - A comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
• Learn CSS Grid 2 - A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.
• Can I Use - Up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
• CSS Effects - CSS Animations.
• Keyframes 1 - Create basic or complex CSS @keyframe animations with a visual timeline editor.
• Animista - Play with a collection of ready to use CSS animations.
• BEM - BEM naming cheat sheet.
• Autoprefixer - Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes.
• CSS Formatter - Online CSS Formatter, CSS Beautifier.
• Placeholder - How To Use Our Placeholders. Just specify the image size after our URL and you'll get a placeholder image.

 

 

 FRONT END CHALLENGES OR SKILLS

 

 

• CodePen 2 - Build, share, and learn JavaScript, CSS, and HTML with our online code editor
• Frontend Mentor 1 - Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.
• Good Code 1 - Browse through dozens of front end coding challenges, complete with Adobe XD files and styleguides.
• codier 2 - Explore and attempt front-end coding challenges.
• CSSBattle 1 - CSS code-golfing is here! Use your CSS skills to replicate targets with smallest possible code. Feel free to check out the targets below and put your CSS skills to test.

 

 

FONTS AND TYPOGRAPHY

 

• Google Fonts - The #1 resource for free and easy-to-use webfonts.
• Fonts Arena - Free fonts, free alternatives to premium fonts, done-for-you-research articles.
• Fontjoy - Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.
• FontPair 2 - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.

 

COLORS AND TOOLS

 

• Coolors 1 - Generate or browse beautiful color combinations for your designs.
• 0to255 - A color tool that makes it easy to lighten and darken colors.
• color x color - A tool to create accessible color systems for UIs
• Colors and Fonts - Find colors and typography combinations ready to copy paste in one click.
• ColorSpace - Generate nice Color Palettes.
• CSS Gradient - Free css gradient generator tool.
• uiGradients 1 - A handpicked collection of beautiful color gradients for designers and developers.

 

 IMAGE RESOURCES

 

• Unsplash 4 - Free images and photos.
• Pexels 2 - Free stock photos.
• Pixabay - Free image or video.
• LOADING.IO - Free spinner for your projects.
• LottieFiles 1 - LottieFiles is a collection of animations designed for Lottie - gone are the days of bugging your developer.
• removebg 1 - Remove Image Background.
• Remove Photo Data 1 - Remove personal data from photos before sharing them on the internet.
• befunky - BeFunky's all-in-one online Creative Platform has everything you need to easily edit photos, create graphic designs, and make photo collages.

 

 ILLUSTRATIONS

 

• unDraw - Browse to find the illustrations that fit your needs and click to download.
• manypixels - Free illustrations to power up your projects. Use them in a commercial or non-commercial way for your landing pages, blog posts, email newsletters, social media graphics and more.
• DrawKit 1 - Hand-drawn vector illustration and icon resources, perfect for your next project.
• freepik - Free graphic resources.

 

ICONS

 

• Ionicons 1 - Open-Sourced and MIT licensed icon pack.
• Font Awesome 1 - Vector icons and social logos.
• Material Icons - Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.
• icons8 - Download free icons in PNG and SVG.
• flaticon - Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT.
• Tabler Icons - Fully customizable free SVG icons.
• icofont - 2100+ free icons to spice up your creative designs.
• Simple Icons - 1463 Free SVG icons for popular brands.

 

 GENERATORS

 

• Lorem Ipsum 1 - Lorem Ipsum generator.
• RealFaviconGenerator 1 - Favicon generator
• Favicon Maker - Free Favicon maker.
• Meta Tags 1 - Meta Tags generator, preview how your webpage will look on Google, Facebook, Twitter and more!
• Clippy - CSS clip-path maker.
• Regex101 - Online regex tester.
• Web Code Tools - Generate HTML5, CSS3, Microdata, JSON-LD, Twitter Cards, Open Graph and more!
• Carbon - Create and share beautiful images of your source .
• CSS Grid Generator 1 - Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.

 

 ACCESSIBILITY

 

• Accessibility Blog - Medium - Seven easy-to-implement guidelines to design a more accessible web.
• Accessibility Blog - Dev - 13 ways to level up your site's accessibility.
• Accessibility Cheatsheet - Practical approaches to Universal Design for making your website/webapp accessible to everyone.

 

 SITE ANALYZERS

 

• web.dev 1 - See how well your website performs. Then, get tips to improve your user experience.
• Lighthouse Metrics - Lighthouse Metrics provides easy insights for your site's performance.

 

TERMINALS FOR WINDOWS

 

• Windows Terminal 2
• FluentTerminal
• Hyper
• Cmder 1

 

 ONLINE IDE, EDITOR

 

• Repl.it
• CodeSandbox
• CodePen 2
• JS Bin
• JSFiddle
• goormIDE

 

JAVASCRIPT

 

• freeCodeCamp 2 - Best free resource to learn JavaScript interactively.
• Codecademy 1 - Free course to learn JavaScript interactively.
• JavaScript.info - Modern JavaScript Tutorial.
• Eloquent JavaScript - This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here.
• JavaScript30 - 30 days vanilla JS coding challenge. Build 30 things in 30 days with 30 tutorials.
• How JavaScript works
• JavaScript Reference By MDN
• JavaScript Event Reference
• DOM Manipulation Reference
• JavaScript Design Patterns

 

 NODEJS

 

• Node.js Tutorial - Node.js Crash Course Tutorial by Net Ninja.
• nodebestpractices 1 - Huge list of best practices for building node apps. Important for big projects.
• The Node Way - An entire philosophy of Node.js best practices a0nd guiding principles exists for writing maintainable modules, scalable applications, and code that is actually pleasant to read.
• You Don't Know Node.js
• Awesome Nodejs - Delightful Node.js packages and resources.
• Express.js Security Tips - How You Can Save and Secure Your App.

 

PYTHON

 

• Codecademy - Free course to learn Python interactively.
• Programiz - Learn Python Programming.
• Awesome Python - A curated list of awesome Python frameworks, libraries, software and resources.
• Flask Tutorial - The Flask Mega-Tutorial by Miguel Grinberg.

 

REACT

 

• React 1 - Official site documentations, tutorial.
• Codecademy 1 - Free React course of Codecademy.
• freeCodeCamp 2 - Free web development resourse, where you can also learn react.
• React Tutorial 1 - React Tutorial - Fundamentals, Hooks, Context API, React Router, Custom Hooks by Coding Addict.
• React Beach Resort - React Beach Resort project by Coding Addict.
• Awesome React 2 - A collection of awesome things regarding React ecosystem.
• React Icons - Include popular icons in your React projects easily with react-icons.

 

APIs

 

• Public APIs - A collective list of more than 1000 Free Public and Open REST APIs for developers.
• JSONPlaceholder - Free to use fake Online REST API for testing and prototyping.
• OpenWeather - Simple and fast and free weather API from OpenWeatherMap you have access to current weather data, hourly, 5- and 16-day forecasts.
• SWAPI - The Star Wars API.
• Quotes REST API - They Said So has more than 1 million+ quotes in the database, the largest such database in the world. And Quotes API gives easy way to access the data.

 

DEVELOPER TOOLS

 

• Postman - Postman makes API development easy. Simplify each step of building an API and streamline collaboration so you can create better APIs—faster.
• Insomnia - Leading Open Source API Client, and Collaborative API Design Platform for GraphQL, and REST.
• JSON Server 1 - Get a full fake REST API with zero coding in less than 30 seconds (seriously). Created with <3 for front-end developers who need a quick back-end for prototyping and mocking.
• npm trends - Which NPM package should you use? Compare NPM package download stats over time. Spot trends, pick the winner.
• BUNDLEPHOBIA 1 - Find the cost of adding a npm package to your bundle.

 

 ONLINE LEARNING RESOURCES

 

• freeCodeCamp 1 - Learn to code at home. Build projects. Earn certifications.
• w3schools 1 - The world's largest Web Developer site. Tutorials references, examples, exercies, certificates.
• Codecademy - Learn the technical skills you need for the job you want. As leaders in online education and learning to code.
• Real Python - Learn Python online: Python tutorials for developers of all skill levels, Python books and courses, Python news, code examples, articles, and more.
• Study Tonight - Best place to learn Engineering subjects like Core Java, C++, DBMS, Data Structures etc through Hand-written simple Tutorial, Tests, Video tutorials.
• Programiz 1 - Learn to code in Python, C/C++, Java, and other popular programming languages with our easy to follow tutorials, examples, online compiler and references.
• JavaScript Info - The Modern JavaScript Tutorial.
• Command Line Tutorial 1 - Basic UNIX commands tutorial.
• Try Git - An interactive series of challenges to learn about and experiment with Git. RESUME
• ResumeGenius - The only online resume builder that'll land you interviews. Create a professional resume in minutes, download, and print.
• resume.io - Free online resume maker, allows you to create a perfect resume in minutes. See how easy it is to write a professional resume and apply for jobs today!
• Resume Now 1 - It Only Takes A Few Minutes. An online resume maker shouldn't take long to use—and our free-to-use resume builder doesn't.
• Canva - With Canva's free resume builder, applying for your dream job is easy and fast. Choose from hundreds of free.
• novoresume - Make a perfect resume in 2020 and get your dream job using the free resume builder. Select a template. Personalize it.
• RX-Resume - Easily build your resume.

 

OTHERS

 

• mailsac - Disposable testing email inbox service.
• HTTP Status Codes - HTTP Status Code directory, with definitions, details and helpful code references.
• Play With Docker - A simple, interactive and fun playground to learn Docker.
• Tiny Helpers - A collection of free single-purpose online tools for web developers.
• Free for Developers - This is a list of software and other offerings that have free tiers for developers.
• Dev Resources - Dev Resources has everything for your developer journey, all presented in curated lists.

 

 DEVELOPER BLOG SITES

 

• DEV - A constructive and inclusive social network. Open source and radically transparent.
• Medium 1 - Medium is an open platform where readers find dynamic thinking, and where expert and undiscovered voices can share their writing on any topic.
• Hacker News 1 - Get the latest from Hacker News!
• Hacker Noon 1 - Hacker Noon reflects the technology industry with unfettered stories and opinions written by real tech professionals.
• freeCodeCamp News - Free Code Camp community news.
• Smashing Magazine 1 - Smashing Magazine — for web designers and developers.
• Hashnode 1 - Hashnode is a free content creation platform and community that allows you to publish articles on your own domain.

 

 YOUTUBE CHANNELS

 

• The Net Ninja 2
• Traversy Media 1
• freeCodeCamp.org
• Coding Addict
• Fireship
• LearnCode.academy 1
• Wes Bos
• Codevolution

The Net Ninja

freeCodeCamp.org

The collaborative browser based IDE

Get Windows Terminal - Microsoft Store

Designing for accessibility is not that hard

Lorem Ipsum – Generator, Origins and Meaning

Ionicons: The premium icon pack for Ionic Framework

Illustrations | unDraw

Beautiful Free Images & Pictures | Unsplash

Coolors - The super fast color schemes generator!

Google Fonts

CodePen

CodePen

freeCodeCamp.org

freeCodeCamp.org

Figma: the collaborative interface design tool.