Recommended aids for building websites (screenshots, image manipulation, note-taking software, etc.)

To do a good job, you must first make a good tool. Although WordPress itself is powerful, but with some good auxiliary tools, you can make your website building process more efficient and smooth, especially for zero basic novice, these tools can help you solve a lot of practical operation of the trouble encountered.

In this article, we will categorize and recommend some useful tools that you will use in the process of building a WordPress website, from planning, development to content creation. The vast majority of them are free or provide a free version, please feel free to choose.

​I. Notes and thought planning tools​

Before building a website, you need to plan the structure of the site, record inspiration, and gather information.

1. Notion​
   • ​Uses.​ ​all-rounder. You can use it to write project plans, record to-do lists, build a knowledge base, and even plan the content calendar and page structure of your entire website.
   • Pros.Modular design and extremely flexible, you can build almost any management system you need. The free version is already very powerful.
   • Beginner's Advice.Use it to draw yourWebsite Structure Brain MapandList of page contents。
2. ​XMind / MindMeister​
   • ​Uses.​ ​Mind mapping tools.. Dedicated to visualization planning, it is a great tool for sorting out the categorization of website sections and the logical relationship of pages.
   • Pros.Intuitive images to help you and others quickly understand the overall architecture of the site.
   • Alternatives.Paper and pen. The most primitive but also the most effective.

​II. Design and image processing tools​

WordPress can't build a website without image processing, such as creating banners, compressing images, and simple keying.

1. ​Canva​
   • Uses.​ ​A godsend for novice designers. Easily create professional website banners, social media images, article featured images, logos and more with drag and drop without any design foundation.
   • Pros.Massive amount of templates and materials (icons, images, fonts), greatly reducing the design threshold. The free version is sufficient for use.
   • Essential Scene.Create a beautiful cover image for each blog post.
2. Figma​
   • ​Uses.​ ​More professional interface design tools. If you have more specific ideas about the layout of your site, you can start by drawing a simple wireframe or prototype using Figma.
   • Pros.Collaboration is powerful and allows for very precise control of size, spacing, and more. Free.
   • Beginner's Advice.It can be used to simply plan the layout of the boards on the home page.
3. Snipaste​
   • Uses.​ ​The most powerful screenshot toolIt's not just about taking screenshots. It's not just about taking screenshots, it's about “sticking” screenshots at the front of the screen, so you can easily set up or code against them.
   • Pros.Small, fast, ad-free, with thoughtful features (e.g. color picker, annotation function).Highly recommended!​
4. ​TinyPNG / Squoosh​
   • Uses.​ ​Image compression tools. Using it to compress the image size before uploading them to your WordPress media library can significantly improve the loading speed of your website.
   • Pros.Intelligent compression that drastically reduces file size with barely noticeable quality loss to the naked eye.Essential steps for SEO and user experience.​

​III. Development and debugging tools​

Even if you're a novice, knowing these tools can help you in a pinch.

1. ​FileZilla​
   • Uses.​ ​FTP Client Tools. When you need to manually upload WordPress installers, theme files, or modify core website files (such as the wp-config.php) when it's time to use it to connect to your server.
   • Why it's needed.While most of this can be done in the background, FTP is the only way to save your life in case of problems (e.g. a white screen caused by a wrong code in the theme functions.php).
   • Pros.Free, open source and stable.
2. Browser Developer Tools​
   • Uses.​ ​Website “Microscope”.. In your browser (Chrome/Firefox) press the F12key to open it. You can view the HTML structure of the page, CSS styles, and modify the preview effect in real time.
   • Novice app.When you want to know what the color, font or margin of an element is, use it to see it directly. The ultimate tool for learning and debugging CSS.
3. Visual Studio Code​
   • Uses.​ ​code editor. If you want to try to modify the theme code (such as CSS or PHP files) in the future, this is the editor of choice for developers worldwide.
   • Pros.Free, powerful, with tons of plugins to extend its functionality. Even if you don't write code, you can use it to elegantly edit text files.

​IV. Content and efficiency tools​

1. Grammarly​
   • Uses.​ ​English Grammar and Spelling Checker. If you need to write English content, it can help you avoid low-level mistakes and make the article more professional.
   • Pros.Ubiquitous checking in the form of a browser plugin.
2. Todoist or Microsoft To Do​
   • Uses.​ ​Task management tools. Building a website is a project, and breaking it down into smaller tasks (e.g., buying a domain name, installing a theme, writing an about us page) and completing them one by one is much more fulfilling and less likely to be missed.
   • Pros.Easy to use and synchronized across multiple platforms.

​Summary and Novice Toolkit Advice​

You do not have to install all the tools at once. It is recommended to select them gradually, depending on your current stage:

• Planning phase.​ ​NotionmaybeXMind+paper and pencil。
• ​Design and content creation phase.​ ​Canva(Mapping) +Snipaste(Screenshots) +TinyPNG(compressed image).
• Development and Deployment Phase.​ ​FileZilla(Transferring files) +Chrome Developer Tools(see effect).
• Full Companion.​ ​Browser Bookmarks Bar(Save your WordPress backend, hosting provider backend, domainer backend, and other important links).

These tools are like your Swiss Army Knife, which can be useful in different scenarios of WordPress website building. Use them skillfully, you will no longer be a “white”, but an efficient “webmaster”.