Tutorials & Method

Chia sẽ tài nguyên giúp phát triển website 2021

Viết bởi bochicken
18/11/2021 (1 năm trước)

Chia sẽ tài nguyên giúp phát triển website 2021 All in one



  • MDN Web Docs - 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 - A visual cheatsheet for CSS flex layout.

  • GRID - Malven - A visual cheatsheet for CSS grid layout.


  • Figma - 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 - Communicate visually at the speed of thought – collaborative flowcharts, wireframes, sticky notes, and mind maps.




  • CodePen - Build, share, and learn JavaScript, CSS, and HTML with our online code editor

  • Frontend Mentor - Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.

  • Good Code  - Browse through dozens of front end coding challenges, complete with Adobe XD files and styleguides.

  • codier  - Explore and attempt front-end coding challenges.

  • CSSBattle - 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.


  • 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 - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.


  • Coolors - 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 - A handpicked collection of beautiful color gradients for designers and developers.


  • Unsplash - Free images and photos.

  • Pexels - Free stock photos.

  • Pixabay  - Free image or video.

  • LOADING.IO - Free spinner for your projects.

  • LottieFiles - LottieFiles is a collection of animations designed for Lottie - gone are the days of bugging your developer.

  • removebg - Remove Image Background.

  • Remove Photo Data - 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.


  • 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 - Hand-drawn vector illustration and icon resources, perfect for your next project.

  • freepik - Free graphic resources.


  • Ionicons - Open-Sourced and MIT licensed icon pack.

  • Font Awesome - 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.

  • icons- 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.


  • Lorem Ipsum - Lorem Ipsum generator.

  • RealFaviconGenerator - Favicon generator

  • Favicon Maker - Free Favicon maker.

  • Meta Tags - 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 - Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.



  • web.dev - 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.







  • React - Official site documentations, tutorial.

  • Codecademy  - Free React course of Codecademy.

  • freeCodeCamp - Free web development resourse, where you can also learn react.

  • React Tutorial - 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 - A collection of awesome things regarding React ecosystem.

  • React Icons - Include popular icons in your React projects easily with react-icons.


  • 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.


  • 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 - 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 - Find the cost of adding a npm package to your bundle.


  • freeCodeCamp  - Learn to code at home. Build projects. Earn certifications.

  • w3schools - The world’s largest Web Developer site. Tutorials references, examples, exercises, 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 - 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 - 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 - 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.


  • 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.


  • DEV - A constructive and inclusive social network. Open source and radically transparent.

  • Medium - 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 - Get the latest from Hacker News!

  • Hacker Noon - 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 - Smashing Magazine — for web designers and developers.

  • Hashnode - Hashnode is a free content creation platform and community that allows you to publish articles on your own domain.


Bài viết liên quan

Danh mục
Giỏ hàng

Bạn đã thêm 0 sản phẩm.
Tổng số lượng là 0.

Thanh toán 0₫

Adobe Cloud full app xài riêng

999.000đ/1 năm