DEV Community

mpoiiii
mpoiiii

Posted on

6 Websites Most Helpful for Front-End Beginners

This article recommends 6 high-quality websites that are most helpful for front-end beginners. These websites not only provide the most reliable information but also cover systematic practice resources and the most convenient deployment methods.

1. freeCodeCamp

freeCodeCamp is a non-profit organization that offers courses covering HTML, CSS, JavaScript, and other commonly used programming languages, allowing learners to gain practical experience through real projects.

The biggest advantage of this site is that it uses a game-like approach, letting you solve problems step by step and write code. By solving small tasks one by one, you can gradually complete the entire project.

This learning method is not only fun but also helps you consolidate each knowledge point, ultimately achieving the development of a complete project.

Moreover, the freeCodeCamp community is active, and learners can help each other in the forums and chat rooms, making progress together.

Image description

2. MDN

Beginners need to consult a lot of documentation and usage instructions during their learning process. However, many materials are often incomplete or inaccurate. MDN (Mozilla Developer Network) serves as a comprehensive repository, providing rich and accurate documentation and tutorials covering HTML, CSS, JavaScript, and other web technologies.

It's like a dictionary, helping developers quickly find the information they need, ensuring a smoother learning and development process.

MDN covers web technologies such as HTML, CSS, JavaScript, and content related to Mozilla projects. MDN is an important resource for developers to learn and reference web standards and best practices.

3. Can I Use

New developers often love various new HTML/CSS features because these new features are indeed very convenient.

However, in actual projects, these features are rarely used. Therefore, new developers often complain about other developers using cumbersome methods. Before complaining, you might want to visit Can I use to check detailed compatibility information, so you can better understand why certain features are not widely used in projects.

"Can I use" is a very useful website that provides information about the compatibility of various web technologies in different browsers. Developers can use this site to check the support status of specific HTML, CSS, SVG, and JavaScript features in various browser versions to make better decisions during development.

4. Edgeone Pages

During the website development process, new developers are eager to showcase their websites to friends, family, or users. However, when you send the local machine address to others, they cannot access it.

Website deployment refers to the process of migrating a developed web application from the development environment to the production environment to make it accessible to external users.

Edgeone Pages is a completely free deployment platform, very suitable for new developers. Through this platform, new developers can learn and experience the complete process of website deployment. Moreover, deploying and sharing your project results with friends can not only get feedback but also increase your confidence to continue learning and improving.

Of course, there are many deployment tutorials online, starting from setting up servers. But are these tutorials really suitable? Most tutorials include CDN deployment, but few people actually deploy CDNs. Therefore, using third-party platform deployment solutions is the mainstream approach now, rather than renting a server from scratch.

Image description

5. Iconify

Iconify is a platform that provides a large number of icons, gathering icons from multiple icon libraries, making it convenient for developers to use in projects. It supports various formats, such as SVG and Webfont, and offers simple integration methods suitable for various front-end frameworks and libraries, such as React, Vue, and Angular. Iconify aims to simplify icon management and usage, helping developers quickly find and apply the icons they need.

Of course, you can also find other websites offering icons online, but you need to pay attention to whether these icons can be used for free and whether they can be used for commercial purposes. Be sure to use free resources reasonably, or you might face huge legal troubles after you succeed.

Image description

6. ChatGPT

ChatGPT needs no introduction. In fact, I believe it is the most helpful tool for beginner developers. It can solve 90% of the problems you encounter, and for the remaining 10%, although it may not directly solve them, it can provide great ideas or guide you in the right direction to find solutions.

I often answer questions and ask questions in various technical forums and find that most questions can actually be solved by ChatGPT. Of course, the key lies in whether your questions are accurate and clear.

Top comments (0)