When you want to make a website with will be highly ranked in Google Search Engine, and people wouldn’t have problems opening this site and will smoothly interact with it you need to use several tools to check if your website is perfectly designed. In this post, I has been wrote about these tools I use.
Short update about my progress in the web developers world
Before I wrote about the subject of this post, I would like to tell you few words about the current situation in my learning progress. This is still a blog about my journey in IT word and I hope you like to read about this thinks also 🙂 If not, just skip this paragraph and feel free to read about the web developer’s tools.
Anyway, until this point, I used only HTML, CSS, and JS to write a website. This was a massive part of the knowledge to learn but allows me to build a cool single-page website. But now I understand, that PHP and SQL are a must-be if I want to go further in the web developers world.
Several weeks ago, I was convinced that a good course in WordPress allows me to build more complex services, but without understanding PHP it’s impossible. At the end of the day you need to fix some part of the code, and you do nothing without basic knowledge about PHP and SQL. So I bought Robin Nixon’s book “Learning PHP, MySQL & JavaScript” and I have been starting a new part of my journey.
Google Lighthouse for Web developers
Back to the tools: first, and in this time for me the most powerful tools calls “Google Lighthouse”. This is not only a multilevel check engine for your website, but it’s also a great source of knowledge. When you use it, this tool will check your website in four categories: Performance, Accessibility, Best Practices and SEO.
Your page will be scored in all these areas, but what’s more, if any of the tested page parts need to be fixed, you will get links to place, where you will get information on how to do this. For me, this is super cool because I can learn by practices and I can improve my skills with every project that I wrote. More information about Lighthouse you find here: https://developers.google.com/web/tools/lighthouse/
Online photo editor for Web developers
The next cool tool is an online photo editor witch you can easily modify the image before you put it on web site. Before I made the first page for my client, I thought most of the project time I will spend on coding. I was so wrong. Most time in the project I spent working with images. All of them I resized, adjusted and reduced before I used it in the project.
When you need to just resize and reduce photo IrfanView it’s good enough, but If you need to adjust the image you need something extra. You can buy Adobe Lightroom, but it’s cost a lot. You can use Gimp, but you probably will spent a lot of time searching for a good tutorial about it. But there is a third way called Photopea this is an online photo editor and it has everything that you need to use if you want to make image tuned. I uset it, and I like it.
Color generator for Web developers
Last but not least is the color generator. Of course some times we get the perfect project and all we need to do is changed this project to code. But what if our client has only vision. Is it possible? Of course, it is. On the other hand, even if the client has a project, you code it, the client might change his opinion about the project and ask you to change colors on site.
It’s very helpful to use a color generator. I like this one: https://coolors.co/. You can change color, combine it and in the end grab the color codes. But this is only the first step. As I mentioned before, LightHouse will check if your page is accessible.
This means that the color needs to keep a good contrast. You can check if the contrast on your site is good enough on https://color.a11y.com/Contrast/ but it’s also good practice, to build web design using a simple color generator http://colorsafe.co/ where you can quickly find the best background color depends on font family and font color.
Are these all great tools for Web Developers?
That’s all for now. Of course, there is a lot of tools but in the last year, I mostly used thoes with I mentioned here. I also think that too many tools reduce our productivity so I use several tools and my favorite are those with don’t eat my time 😉 If you like to share some good web developer’s tools, please put it in the comment to this post. Thank you.