Since I started writing code in 2020, I have come across many useful resources.
I have sorted out most of the resources, and some of them are still being sorted. Hope they are helpful to you too!
Resource Type
🎓=Themed complete course
🧰=Tools to make development easier
🧐=A single article or video on the topic
Resource list
• HTML
• CSS
• React
• Git&CLI
• database
• MISC Web Development Resources
HTML
| title | explain | type |
|---|---|---|
| Alt Text | Examples of alternate text are provided. | 🧐 |
| HTML: <!DOCTYPE> tag | Especially helpful for beginners in HTML grammar | 🧐 |
| W3S HTML5 semantic element | Great introduction, why nothing should be in <div> . | 🧐 |
| MDN HTML element reference | Are you ready to enter the next level? This guide has more in-depth introductions in many HTML elements. | 🧐 |
| New structural elements in HTML5 | This guide really helped me understand things like <figure> and <figcaption> | 🧐 |
| HTML5 Periodic Table | I like this way of interaction, but it simplifies this way of learning elements. | 🧐 |
| script: asynchronous, delayed | This taught me different ways to load JS into html files, which greatly improved performance. | 🧐 |
| Learn HTML and CSS | Participated in this course to prepare for the training camp. Great introduction to HTML. | 🎓 |
| Learn advanced HTML and CSS | I really like the beginner course above and hope to participate in this course. | 🎓 |
| Derek Banas Tutorial | Technically speaking, it is not HTML, but it can definitely help you write HTML efficiently. Looking forward to watching this tutorial. | 🧐 |
| metatags.io | One of the generators used to create meta tags for multiple social media platforms. | 🧰 |
| A complete guide to links and buttons | In this in-depth comparison article, it has never been more obvious to use the right tool to do the right job. | 🧐 |
| getwaves.io | This tool can generate svg waves to create curved partitions for parts of the page! | 🧰 |
CSS
| title | explain | type |
|---|---|---|
| Bootstrap Documentation | Even if I don't use the framework, I like to use their documentation to inspire common web components. | 🧐 |
| about the peculiarities of CSS | CSS-Tricks has been categorized in detail, and exquisite graphic examples are provided at the end. | 🧐 |
| CSS box model | A very accessible example of how the box model works. | 🧐 |
| 12 tips for amazing CSS animation | There are many good techniques in creating cool animations and ensuring they perform well. | 🧐 |
| CSS layout and animation | Haven't finished this yet, but can't wait. The course design is top-notch. | 🎓 |
| Network Ninja SASS Tutorial | Regarding the first course of SASS, I still refer to it from time to time. | 🎓 |
| Learn Sass in 20 minutes | This is very useful for the first entry into what SASS is. | 🎓 |
| BEM and SASS: perfect match | Introduce how to use BEM and SASS together. | 🧐 |
| getbem.com | An overview of the creators of popular naming conventions. | 🧐 |
| CSS Skills BEM 101 | I like the button examples provided in this article on how to use BEM. | 🧐 |
| BEM example | This explanation about BEM is really good, but I especially like how they got the short and complete version of this article. | 🧐 |
| MDN display document | All you might want to know about the powerful display properties. | 🧐 |
| Several use cases of Calc() | calc() is one of the more powerful functions in CSS, and this article shows some good use cases. | 🧐 |
| Wes Bos cssgrid | You can't argue endlessly, Wes Bos is one of the best development teachers there. | 🎓 |
| Wes Bos Flexbox | See above, but this time it’s Flexbox | 🎓 |
| CSSmatic | A powerful collection of CSS generators that can be used for gradients, border radii, noise textures and box shadows. | 🧰 |
| CSS skills about position | If I can only access one resource of the position property, it is it. | 🧐 |
| Can I Use xxx? | This site lets you know the browser's support for each of these attributes. | 🧰 |
| yoksel Flex cheat sheet | I like this layout and the way it can visually preview the flexbox properties. | 🧐 |
| 30 CSS selectors you must remember | When I want to get into the weed of CSS selectors (sorry, BEM), this is the article I quoted. | 🧐 |
| CSS Lint | The tool will check your code and highlight any errors. | 🧰 |
| System font stack | A fallback stack of predefined fonts that can be inserted into the project. | 🧰 |
| Neumorphism.io | This tool makes the elements look like they are below the surface of the page. | 🧰 |
| Advanced CSS and Sass: Flexbox, grid, animation and more! | Advanced css and scss tutorial! | 🎓 |
| CSS scroll shadow | This tool uses only CSS to generate a shadow based on the scroll position! | 🧰 |
JavaScript
| title | my thoughts | type |
|---|---|---|
| javascript.info | This is one of the complete and detailed explanations of JS. | 🧐 |
| code beautification | Before entering ESlint, I really like this tool to make sure that my JS is kosher. | 🧰 |
| True and False: Everything in JavaScript is different | This article is a good reference for all instances where the value may be regarded as true or false. | 🧐 |
| What exactly is the | I haven't seen it yet, but I am looking forward to it. | 🧐 |
| JavaScript loop video | Watch a video to learn about common JS loops. | 🧐 |
| JavaScript loop article | Read an article to understand common JS loops. | 🧐 |
| Codecademy JS | It is completely free and contains some common JS elements and concepts. | 🧐 |
| MDN js string | All I want to know about strings and where to use them. | 🧐 |
| JSON parse VS JSON Stringify | These JSON functions confuse me. This article really helps explain these differences. | 🧐 |
| Google hosted library jQuery | Favorite link. :) It always has the latest jQuery CDN script. | 🧰 |
| Public API | A good list of the public APIs of the project you can use today! | 🧰 |
| Javascript event delegate | An excellent visual presentation of what events are and how event delegates work. | 🧐 |
| Var, Let and Const-what is the difference? | A good introduction to the different variable types (and why var is a trash can.) | 🧐 |
| 5 differences between arrow functions and regular functions | I like how this exposes the usage of these two function types. | 🧐 |
| JavaScript DOM Speedy Course-Part 1 | Explore how to select elements in the DOM to be used with JS | 🎓 |
| JavaScript DOM Speedy Course-Part 2 | Learn the basics of how to traverse the DOM. | 🎓 |
| JavaScript DOM Speedy Course-Part 3 | Learn how to attach additional events to DOM elements. | 🎓 |
| JavaScript DOM Speedy Course-Part 4 | Build a small project based on the last 3 videos. | 🎓 |
| Introduction to DOM | This is a great resource on the DOM, this quick article will get you started and get started. | 🧐 |
| Asynchronous Javascript | I haven't bookmarked this until now. This great free course from Net Ninja. | 🧐 |
| online coding test tool | This great subject training tool allows you to practice Javascript skills. | 🧰 |
| What is event bubbling in JavaScript? | Another important resource on what event bubbling is and how to use it. | 🧐 |
| JavaScript event delegation is easier than you think | Learn how to trigger and listen to events correctly. | 🧐 |
| Which HTML element is the target of the event? | Find out which element has been interacted with. | 🧐 |
| Understanding scope in JavaScript | I like the design of this website, it is very thorough in explaining the scope. | 🧐 |
| Different ways to write functions in JavaScript | A quick article on how to write a "function declaration" function. | 🧐 |
| JavaScript image slider for beginners | This teaches how to build a simple image slider using Vanilla JS. | 🧐 |
| Learn the smart and efficient way to test any JavaScript application | I haven't taken this course yet, but I am looking forward to it because it is a very important topic! | 🎓 |
| JavaScript Algorithm and Data Structure Master Class | I don’t like algorithms, so that’s why I bookmarked this course! | 🧐 |
| AJAX basic | Everything you want to know about making AJAX requests to the web server. | 🎓 |
| How to use JavaScript to connect to API | This article really helped me understand how to use API calls in the project. | 🧐 |
| JSON Tutorial: Use JavaScript or PHP to request API data | It is very interesting to see how PHP and JavaScript handle JSON in different ways. | 🧐 |
| The basis of the JavaScript Reduce method | This short article breaks down this powerful JS method very well. | 🧐 |
| Axios or fetch(): Which one should I use? | I tend to contact Axios, but this article does a good job of explaining both. | 🧐 |
| Learn JavaScript Introduction | I participated in this 30-hour course and it was amazing. The basics are explained brilliantly. | 🎓 |
| validatejs.org | An excellent tool that can be used for registration and login forms to ensure that user data is correct. | 🧰 |
| HTML5 canvas tutorial for beginners | As a designer, this is an opportunity I am excited about. | 🧐 |
React
| title | my thoughts | type |
|---|---|---|
| react memo | Quickly and easily browse cheat sheets on common React patterns and snippets. | 🧰 |
| How to use React.js and GraphQL to build a Full Stack JavaScript application | The price was lower than Udemy, but no one taught like Wes Bos. Hope to buy this one soon. | 🎓 |
| React Developer Tools | This allows you to view props, components, renderings, etc. directly in Chrome DevTools | 🧰 |
| React icon | This is one of my favorite icon packs because it has almost every major icon library. | 🧰 |
| React-Complete Guide (including Hooks, React Router, Redux) | One of my favorite courses has prepared me for writing code in React. | 🎓 |
| useReducer Hook | This article/video breaks a very cool trap, allowing you to get a "Redux-like" store without downloading the library. | 🧐 |
| MDX document | This syntax combines JSX and Markdown! | 🎓 |
| to the designer's React | It provides some great courses and beginner projects to help you get started with React. | 🎓 |
| React Router tutorial | Mix the navigation function of React Router with the style of Bootstrap. | 🧰 |
| React SEO | I really want to learn this package. It allows you to add SEO meta tags to different "React pages" | 🧰 |
| Use React.lazy and Suspense for code splitting | This really works! After implementing it on my website, my performance score has improved. | 🧐 |
| 33 verification examples | A great collection of React form validation and demo code. | 🧐 |
| 37 ReactJS basics useRef Hook | UseRef, a useful video on how to use React hooks. | 🧐 |
| npm React verification | Powerful software package to set up form validation. It takes a more in-depth study for a day to learn all the things it can do. | 🧰 |
| React form generator | This package allows you to build custom forms and validate them for you. | 🧰 |
| style components | A favorite of React users, allowing you to create custom components that focus on CSS. | 🧰 |
| Use a custom React Hook to respond to inline styles and media queries | This article helped me imitate the responsive style in the JSX environment. | 🧐 |
| React Bootstrap | Very good documentation on using Bootstrap with React. | 🧐 |
| Redux uses hooks | Use Redux's modern hook syntax. This saves me a lot of time! | 🧐 |
| Actually, why can't I directly modify the state of the component? | This explains well why setState must be used to change the state in a class component. | 🧐 |
| React: Communication between components | In-depth study of how React components transfer data to each other. | 🧐 |
| How to identify and solve wasteful rendering in React | Performance is everything, which teaches how to use rendering correctly. | 🧐 |
| components props | For me, this is one of the core and most visited pages in the React documentation. | 🧐 |
| set Redux DevTools | Redux DevTools is not the easiest setup for me, but it helps explain the process well. | 🧐 |
| React Redux Simple Course | Haven't watched this introductory course on Redux, but heard some good news. | 🎓 |
| gatsbyjs | I am very happy to use this static site generator soon. | 🧰 |
| MERN react nodejs full stack | I have purchased this course, but have not yet participated. With so much content covered, I am very happy to do so as soon as possible. | 🎓 |
| React Native Practical Guide | Start learning now and love all the details involved. | 🎓 |
WordPress
| title | my thoughts | type |
|---|---|---|
| How to create a custom WordPress theme-complete course | Great introduction to custom themes in WordPress. | 🎓 |
| WordPress basics | All videos are well broken down. | 🎓 |
| WordPress for beginners | Another great playlist on the basics of WordPress. | 🎓 |
| Create an advanced WordPress theme | Haven't participated yet, but there are many useful video topics in this playlist. | 🎓 |
| Custom WordPress | A playlist that is very useful for advanced WordPress themes. | 🎓 |
| WordPress Intermediate Skill | I like that this course also covers the knowledge of using servers. | 🎓 |
| How to install WordPress on this machine using MAMP (Mac) | This video taught me how to use WordPress locally on my machine. | 🧐 |
| wphierarchy.com | This website does a great job explaining all the different file types and their importance levels in WordPress. | 🧐 |
| Use CSS and JavaScript in WordPress | Documents using CSS and JS in WordPress. | 🧐 |
Git & CLI
| title | my thoughts | type |
|---|---|---|
| Compare Git workflow | This is very helpful for understanding that each team needs to have a different Git workflow. | 🧐 |
| Command line advanced | Can't wait to become the true terminal master of this course. | 🎓 |
| Learning Git branch | This interactive course is very helpful for understanding how the branches work. | 🎓 |
| GITHUB PULL REQUEST, branch, merge and team workflow | An overview of what it looks like to work with a team in the Git workflow. | 🧐 |
| Master markdown | This is a great resource for viewing general Markdown syntax and upgrading Git README | 🧐 |
| The difference between add and commit | This feature was very useful when I first started using Git for version control. | 🧐 |
| Basic Git commands | Another great cheat sheet for common git commands. | 🧐 |
| GitHub Guide Hello World | This very user-friendly guide to start using Github. | 🧐 |
| Git command | A very intuitive way of common Git commands. | 🧐 |
| Short Code Git | Searchable cheat sheet | 🧐 |
| Command line command list | Codecademy has an awesome list of many CLI terminal commands. | 🧐 |
Resource hosting
| title | my thoughts | type |
|---|---|---|
| Netlify build | Netlify's awesome process, once a specific branch is updated, it triggers the process of building to a live site. | 🧰 |
| Netlify tutorial | Free course to use Netlify hosting to get up and running | 🎓 |
| Use Netlify to submit a simple contact form | A simple tutorial on how to set up Netlify as a mail server. | 🧐 |
| PHPStorm FTP server to remote host connection | A tutorial on how to use PHPStorm to connect with SFTP or FTP. (Compared with VS Code, this is very happy) | 🧐 |
Resource optimization
| title | my thoughts | type |
|---|---|---|
| Front-end web optimization workflow | Can’t wait to learn CDN and optimize assets | 🎓 |
| rel=canonical: The final guide | A good description of what canonical URLs are and where to use them. | 🧐 |
| Lazy Load MDN | A good place to start learning how lazy loading works. | 🧐 |
| SEO Web Development Getting Started Guide | A great introduction to what SEO is and how to use SEO. | 🧐 |
| MOZ page loading speed detection | This shows a lot of areas where the check page speed is not good. | 🧐 |
| The art of debugging | In-depth understanding of the process of debugging a website and tools to help. | 🧐 |
database
| title | my thoughts | type |
|---|---|---|
| Mongoose Introduction to MongoDB | This article thoroughly explains what MongoDB is and why Mongoose must be used with it. | 🧐 |
| Restful Routes | Before reading this article, I did not fully understand RESTful API calls. | 🧐 |
| HTTP response status code | Code 418 is the best. ;) | 🧐 |
| Passport | Excellent tool for full-stack user authentication | 🧰 |
MISCWeb development resources
| title | my thoughts | type |
|---|---|---|
| Use code written by others | Wonderful tips on how to explore a new code base. | 🧐 |
| Markdown Table Generator | This is how I made the table in this article ;) | 🧰 |
| jest | One of the industry test frameworks for test-driven development. | 🧰 |
| email basics | This framework makes it easy to code responsive HTML emails. | 🧰 |
| Zurb Email Basic Course | Great course for the above email framework. | 🎓 |
| NPM Dotenv | This package allows you to protect sensitive information (such as API keys) in your project. | 🧰 |
| typing | I used it before training camp to practice typing code faster. | 🧰 |
| Google Maps Platform document | Use Google Maps Api document in the project. | 🧐 |
| What is single sign-on authentication and how does it work? | This is very useful in helping me understand how SSO works at a high level | 🧐 |
| Subdomain and Subfolder: Which is more suitable for SEO | Very interesting article on how to build loosely relevant web content. | 🧐 |
| favicon.io | This is my favorite Favicon generator (small icon in the browser tab), and it has an excellent interface. | 🧰 |
| Wes Bos Eslint configuration | Download Wes Bos to organize his code settings. | 🧐 |
| Emmet | Super useful reference to commonly used Emmet commands in multiple languages | 🧐 |
| Learn about Jetbrains PHPStorm IDE | This has become my favorite IDE, and I love all their resources to learn how to use it properly. | 🧐 |
| Agile Scrum development process and how to adapt UI/UX design | A good overview of how to set up an agile workflow. | 🧐 |
Career resources
| title | my thoughts | type |
|---|---|---|
| Developer's Golden Guide | An incredible guide to preparing recruitment materials, such as resumes and interview examples. | 🧐 |
| learn how to learn | Can't wait to learn this and learn how to be a better "learner". | 🎓 |
| Glassdoor common interview questions | List of 50 questions you can ask in an interview | 🧐 |
| How to solve things you don’t know what to do | This is one of my favorite articles, and I often refer back to it out of motivation. | 🧐 |
| Whiteboard Interview Practice | Useful links and guidelines for conducting whiteboard interviews. | 🎓 |
| at Google-Coding/Engineering Interview Example | It is very interesting to see the level of interviews at Google. | 🧐 |
| Jobscan.co | Useful websites to optimize cover letters and resumes. | 🧰 |
Design resources
| title | my thoughts | type |
|---|---|---|
| Rapid website prototyping | Learn how to quickly simulate characteristic thoughts, which covers many important aspects. | 🎓 |
| Tree House UX Design | This course covers many important UX topics and how to think through design. | 🎓 |
| Flux Free Web Design Course 2020 | One of the best free courses in the basics of web design. | 🎓 |
| in Figma: Design a responsive website | This video provides an in-depth introduction to how to use automatic layout in Figma. | 🧐 |
| View building selection color and OpenType | Haven't read this yet, but can't wait to take a look. | 🧐 |
| Make data-related design decisions | Such an interesting webinar on how big brands consider data when designing or making changes. | 🧐 |
| Developers and designers, jointly build a design system | I can't wait to see it. A truly effective team communicates clearly between design and development in the early stages of the process. | 🧐 |
| in Figma: Designing responsive website navigation | There are many design tidbits and Figma techniques that support this design. | 🧐 |
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。