When you start learning to code, it can be difficult to find the right web development tools and resources to support your workflow.
There are hundreds of courses, tutorials, and services to choose from, and it’s hard to know which ones make your life easier.
If you are serious about learning tech skills and launching a web developer career, you want to have a list of go-to resources that make it a breeze to build beautiful website projects.
To help you get started, I put together this massive list of my favorite web development tools and resources.
This guide includes my favorite coding tools, programming courses, and workflow resources I’ve used throughout the years.
You will also find nifty tools for productivity, website hosting, online marketing, web design, and more.
I will add new web dev tools to this list regularly. Join my community here, and I’ll keep you posted when I update this web development tool guide.
Please note: This post contains affiliate links to products I use and recommend. I may receive a small commission if you purchase through one of my links, at no additional cost to you. Thank you for your support!
Table of contents: Web development tools and resources
- General web development resources
- Web development courses
- HTML and CSS resources
- JavaScript web development resources
- Javascript libraries and frameworks
- Python resources
- Ruby on Rails resources
- PHP resources
- Content Management Systems (CMS)
- WordPress resources
- Code editors and IDEs
- Command Line resources
- Git and GitHub resources
- Boilerplates and frameworks
- Web hosting and domains
- Developer tools
- Wireframing tools
- Design tools
- Stock photos and graphics
- Color palette tools
- Fonts and icons
- Marketing and social media tools
- eCommerce tools
- Productivity tools
- SEO tools
- Page speed tools
General web development resources
Codecademy
Codecademy was the first coding platform I tried back in 2016, and I still love their courses.
You can start learning on Codecademy for free and see if coding is your thing. All lessons are browser-based, so you don’t need to install anything on your computer.
Their free courses are fantastic for making your first contact with web development.
However, the free content doesn’t teach you much about how to build practical projects for your portfolio.
If you are serious about learning how to build beautiful websites, consider upgrading to a Pro plan.
Codecademy Pro is a subscription-based service that unlocks the entire course catalog on the platform. You will get unlimited access to real-life projects and guided learning paths for becoming job-ready step-by-step.
Learn more in my full Codecademy review.
Price: Free plans with limited content, Pro plans start at $19/month
Udemy
Udemy is one the biggest learning platforms for any topic you can imagine. They offer an endless catalog of web development courses that teach you in-demand tools and programming languages from scratch.
The courses are created by individual isntructors, so the quality varies a lot. Make sure you check out the reviews and ratings from past students before you sign up.
When you find a web develompent course you’d want to take, keep an eye out for a promotion. Udemy often runs flash sales with massive discounts of up to 95%.
My first Udemy course was The Complete Web Developer Course 2.0. It taught me all the most essential web development tools I needed to learn to launch a new career as a freelance web developer. I can’t recommend it enough.
Learn more in my full Udemy review.
Price: Free courses available, paid courses between $9.99–$199.99 (frequent flash sales)
freeCodeCamp
Out of all tech learning platforms, freeCodeCamp probably offers the best value.
The entire curriculum is 100% free, and it covers pretty much everything you need to learn about web development to start a career in tech.
If you are a complete beginner, freeCodeCamp is a great place to start learning the fundamentals at your own pace. You can sign up in a few seconds and start your first lesson right away.
Price: Free
Team Treehouse
Team Treehouse is a subscription-based service for learning web development and other tech skills from scratch.
Their courses include realistic, hands-on projects, fun quizzes, and coding challenges that help you think like a web developer.
If you aren’t familiar, start your free 7-day trial here to give Treehouse a go.
Price: Free trial available, plans start at $25/month
Pluralsight
Pluralsight offers some of the highest-quality courses created by their massive network of industry experts. You get full access to the entire course catalog with your subscription, just like with Team Treehouse.
The best thing about Pluralsight is that you can choose a career goal and learn all the skills you need to become job-ready.
For example, let’s say you want to become a front end web developer. You will start with a quick skill assessment to see where you stand. Pluralsight will then automatically point you to the best courses to achieve your goal as quickly as possible.
Price: Free trial available, plans start at $29/month
Udacity
Udacity’s courses consist of interactive video lessons and coding exercises.
Their free courses focus strictly on web development, programming, and data science.
Udacity also offers their signature Nanodegree programs, which are guided, compact curricula designed to get you job-ready as fast as possible.
One Month
If you are serious about learning web development fast, One Month offers the perfect courses to see progress within 30 days. Each course is designed to be completed within a month.
If you want to get your first web application up and running quickly, their Ruby on Rails course is a great place to start learning.
For anyone new to web development, the free HTML and CSS course is a good place to start learning.
W3Schools
W3Schools is a free learning platform for popular web development tools such as
- HTML and CSS
- JavaScript and jQuery
- PHP
- Python
- Bootstrap
- etc.
I highly recommend using their tutorials for building your own coding projects from scratch. Create a blank code file in your text editor and start building a web page with HTML and CSS, for example.
Price: Free
The Odin Project
The Odin Project is one of the most beginner-friendly platforms to learn web development from scratch. It’s 100% free and open-source.
I love their project-based curriculum. It’s the best way to learn how to apply your web dev skills to building meaningful projects from the get-go.
Price: Free
↑ back to the table of contents
Recommended web development courses
The Complete Web Developer Course 2.0
I loved this popular web development course when I took it. It’s the perfect all-in-one resource for beginners who want to learn several popular web development languages, tools, and frameworks.
By the end of the course, you will have an understanding of HTML, CSS, JavaScript, jQuery, Bootstrap, WordPress, PHP, and more.
You will also build multiple real-world projects you can add to your portfolio. I can’t recommend this course enough.
The Complete Web Development Bootcamp
The Complete Web Development Bootcamp is another all-in-one, project-based website coding course for absolute beginners.
If you are new to tech, and want to learn a handful of popular web programming languages and workflow tools, this course is a fantastic place to start your journey.
Also, if you’ve been learning to code for a while, but aren’t sure what to do next, this course teaches you how to use your skills to build fun, real-world projects for your portfolio.
By the end of the course, you will have a good understanding of all the basic tools to become a full-stack web developer. You will:
- Know how to approach any type of website project
- Have a portfolio to showcase your best work samples
- Be ready to apply for your first junior-level jobs or start a freelance web developer journey
The Web Developer Bootcamp
Another Udemy favorite of mine (and of 700K other students), The Web Developer Bootcamp by Colt Steele is an all-in-one beginner-level web dev course.
It covers a lot of the same tools as The Complete Web Developer Course 2.0. However, the individual modules are more connected in this course. If you want to learn all of the tools from start to finish, this course is a great place to start.
Recommended web development guides:
- What Does a Web Developer Do?
- 27 Best Web Development Courses For Beginners
- 20+ Best Books To Learn Web Development And Web Design
- The Best Way to Learn Web Development (Fast)
- How to Build a Website From Scratch: The Ultimate Guide
- Web Developer Certification: Is It Worth It?
HTML and CSS resources
Build Responsive Real-World Websites with HTML and CSS
If you are completely new to web development, this course is great for learning front end development and design with HTML5 and CSS. You will build a beautiful, real website for your portfolio throughout the Build Responsive Real-World Websites with HTML and CSS course.
Compared to most HTML/CSS resources, this course dives deeper and shows you how to apply your skills to create real-world web pages. If you are interested in learning and mastering HTML and CSS, check it out.
CSS-Tricks
CSS-Tricks is a great resource for some deep-dive guides to using CSS like a pro.
If you know some basics already, these resources can help you learn more advanced-level tricks and tips to build beautiful, responsive web pages faster.
Also check out Chris Coyier’s CSS-Tricks YouTube channel here.
Modern HTML & CSS From The Beginning
I’m a big fan of Brad, and his Modern HTML & CSS From The Beginning course is one of the best, most hands-on beginner-level resources you can find.
Even if you have never built a website with HTML and CSS before, this course will teach you all the basics you need to know.
Brad has also included a module for learning CSS Flexbox – a tool I use every day for my website projects. Speaking of Flexbox…
CSS Flexbox Guide on CSS Tricks
This useful CSS Flexbox guide on CSS-Tricks definitely deserves a mention here. If you’re anything like me, you sometimes need a quick refresher on how to make flexbox work. Bookmark this guide!
Envato HTML Templates
Envato has a massive selection of pre-built HTML website templates you can use to build static or dynamic web pages and web apps faster.
If you’re not comfortable with designing beautiful website layouts, these plug-and-play HTML templates are the perfect shortcut. They allow you to set up beautiful, user-friendly pages that are responsive and easy to customize.
CSS Grid
This free CSS Grid course by Web Bos is the perfect place to learn how to create dynamic, responsive, beautiful website layouts using CSS Grid.
You will get access to 25 videos (with English captions) and go from literally zero to hero with just this one course. If you want to build responsive websites that look great on all devices, sign up today.
Recommended HTML & CSS guides:
- What is HTML? Getting Started With HTML Basics
- Free HTML Cheat Sheet (Free Download)
- How to Learn CSS Basics: Beginner’s Guide
↑ back to the table of contents
JavaScript web development resources
The Complete JavaScript Course: From Zero to Expert
With over 500,000 students and counting, The Complete JavaScript Course is your best bet to learn JS without any coding experience.
If you’ve tried some JavaScript tutorials or courses and ended up feeling confused, this course can help you.
Jonas, your instructor, does a fantastic job at explaining and showing you how to use JavaScript for hands-on, real-world projects of your own.
JavaScript Web Projects: 20 Projects to Build Your Portfolio
If you already know some HTML and CSS, the JavaScript Web Projects course is your shortcut to building a portfolio that gets you hired.
If you are completely new to this, start learning the basics on freeCodeCamp. This way, you can get the hang of how these three tools work together.
The best thing about this course?
You get to build 20 practical portfolio projects while you’re learning. That’s a huge stepping stone for applying for your first junior-level positions or freelance gigs online.
Modern JavaScript From The Beginning
Modern JavaScript From The Beginning is one of the best-rated JavaScript courses on Udemy. All you need is a basic understanding of HTML and CSS and you’re good to go!
Whether you’re a beginner or an established JS developer already, this course has something for everyone.
You will build 10 portfolio projects throughout the course, ranging from a simple calculator to more demanding exercises.
For more project ideas, check out these 20+ fun JavaScript projects for beginners.
JavaScript: Understanding the Weird Parts
If you already know some JavaScript and jQuery and you want to take your skills to the next level, JavaScript: Understanding the Weird Parts is for you.
This web development course helps you gain a deep understanding of:
- How JavaScript works under the hood
- How to avoid common JS pitfalls
- How to debug your programs faster
All in all, this course is a great choice if you want to learn more advanced JavaScript topics. Hence, make sure you understand the basics before starting!
Recommended JavaScript guides:
↑ back to the table of contents
JavaScript libraries and frameworks
jQuery
jQuery is an easy-to-use JavaScript library to speed up your front-end development work. You can use it together with other libraries and it offers heaps of plugins you can use to add specific features you need to finish your web projects.
AngularJS
AngularJS is one of the top front end development tools for creating dynamic web apps, developed by Google. AngularJS is free, open-source, and in high demand in the job market.
Vue.js
Vue.js is a popular JavaScript library for speeding up your front end development. Lightweight and easy to learn, even if you are new to web development.
React
React was created by Facebook back in 2013, and it quickly became a popular front end library for building beautiful user interfaces.
React is easy to use and it speeds up rendering on the front end. Also, it provides nifty SEO optimization possibilities because React-built sites are easier to crawl.
According to the Stack Overflow Developer Survey 2021, React is currently the most widely used web framework:
Ember.js
Ember.js is another popular open-source JavaScript framework you can use for building beautiful web applications. It uses the Model-View-Controller (MVC) architecture pattern.
Python resources
Learn Python 2 (Codecademy)
Learn Python 2 is a beginner-level Python course with plenty of free lessons to get started with.
Everything runs in your browser, so you don’t need to install any software on your computer.
The only downside with Codecademy is that this course teaches you Python 2. The newer version, Python 3, is available as a paid course.
LearnPython.org
This interactive tutorial website offers a great introduction to Python for beginners.
It is mainly aimed at anyone interested in learning Python for data science and analysis.
Whether you are an experienced programmer or just beginning with coding, these tutorials will help you get started with data analysis using Python.
They start with the very basics, introducing you to the syntax and other technicalities. After that, you are ready for the more advanced tutorials.
Google’s Python Class
Did you know that Google offers a free Python class for beginners?
Since Google itself is powered by lots of code written with Python, they also support the community and help you and me learn the language.
This free class is aimed at anyone who wishes to learn Python online and has a little bit of programming experience. It includes lecture videos, written material, and plenty of coding exercises for practice.
Learn Python The Hard Way (LPTHW)
Learn Python The Hard Way is a rock solid resource to start learning Python.
It will serve as an introduction to programming in general and it uses a technique called instruction that is designed to build a skill through repetition – hence the “hard” way.
Available for free as an online version. Grab your physical book here.
30 Days of Python (Udemy)
30 Days of Python is an all-in-one Python course for absolute beginners. You don’t need any programming experience at all to take the course.
Justin, the course instructor, will be by your side while you learn Python and build real projects step-by-step.
Through over 9 hours of video lectures, you will learn how to scrape data from pretty much any website online, how to build your own Python applications, and how to work with Python on more advanced projects on your own like building web applications from scratch.
Recommended Python guides:
- 12 Essential Advantages of Python (Why Learn Python)
- Learn Python Online: The Best Python Resources For Beginners
- 19 Best YouTube Channels to Learn Python
- How Long Does It Take to Learn Python?
- Python Projects For Beginners: 10 Easy Ideas
↑ back to the table of contents
Ruby on Rails resources
Ruby in Twenty Minutes
Ruby in Twenty Minutes is a free, beginner-level Ruby tutorial for absolute beginners. And yes, you can finish it in just 20 minutes – assuming you have Ruby installed on your computer already.
The Complete Ruby on Rails Developer Course
The Complete Ruby on Rails Developer Course on Udemy is perfect for anyone who’s serious about becoming a professional web app developer.
This course shows you how to prototype your ideas quickly into presentable web apps. At the end, you will walk away with skills that allow you to build any type of web app you can imagine.
Learn Ruby The Hard Way
Learn Ruby The Hard Way is another coding book written by Zed Shaw. The online version is free, but I strongly recommend grabbing your copy of the physical book.
Ruby on Rails Tutorial (Learn Enough)
This free Ruby of Rails tutorial teaches you how to build a web application using the Ruby on Rails framework. 14 solid chapters of no-fluff content – highly recommended.
↑ back to the table of contents
PHP Resources
Practical PHP: Master the Basics
Practical PHP is a free PHP course on Udemy created by Brad Hussey.
If you want to learn how to create dynamic websites from scratch, and you are new to coding, this might be the course you are looking for.
PHP for Beginners – Become a PHP Master – CMS Project
If you are serious about learning PHP and becoming a professional PHP developer, PHP for Beginners: Become a PHP Master is the perfect choice.
This course takes you from zero to hero while you learn database management, object-oriented programming, PHP security, debugging your code, and much more.
As the biggest project of this course, you will build your very own Content Management System, or CMS, much like WordPress or Drupal. In other words: there are no limits as to what you can create with the skills this course teaches you.
W3Schools PHP Tutorial
The W3Schools PHP Tutorial is the perfect place to start learning PHP programming from absolute scratch. You will learn go through practical exercises, quizzes, and examples along the way.
Learn-PHP.org
Learn-PHP.org is a free interactive tutorial for everyone who is interested in learning the PHP programming language from scratch.
Recommended PHP guides:
↑ back to the table of contents
Content Management Systems (CMS)
WordPress
WordPress is the most popular CMS worldwide with a market share of 65%. Moreover, WordPress powers over 42% of all websites worldwide.
Needless to say, WordPress is the most in-demand skills on the freelance job market. Millions of businesses around the world use it for managing their websites.
Hence, if you want to start a side gig and make money from small freelance jobs, learning how to use WordPress will open up a plethora of job opportunities both online and offline.
To become a WordPress developer, you should be familiar with:
- HTML
- CSS
- JavaScript (and jQuery)
- PHP
Although WordPress was originally created for managing blogs, you can use it to create any type of website you need.
As for features and functionalities, you can either code them from the ground up or use free, robust plugins to:
- Sell products through an online shop
- Attract more customers with a professional business website
- Capture leads with landing pages
- Share your knowledge by creating an online course
- etc.
Also, WordPress is a great tool for building your own website. I’ve created a full guide on how to create your portfolio website with WordPress.
Adobe Commerce (Magento)
Adobe Commerce (by Magento) allows you to build an online shop just like WordPress does. But Adobe Commerce is meant for e-commerce only, whereas WordPress is more universal.
It definitely has a steeper learning curve than WordPress. You have more customization options available for products and categories.
Compared to WordPress again, designing and customizing the front end of is not as straightforward. Figuring out how to design a beautiful Adobe Commerce shop can take considerably longer than with WordPress.
WordPress resources
WPBeginner
WPBeginner is a massive collection of tutorials, guides, and how-tos for building and managing any type of website with WordPress.
Here are just a few popular topics on WPBeginner:
Divi Theme
Divi is one of the most popular premium WordPress themes worldwide. It allows you to build responsive, beautiful pages and templates 100% visually with the powerful Divi Builder tool.
Whether you want to build a portfolio website, start a blog, or launch an online shop, Divi makes it a breeze to set up your page layouts and customize the design easily.
If you want to speed up your work even more, you get full access to 800+ pre-built page layouts you can use for as many websites as you like.
Price: $89 for an annual license (unlimited websites), $249 for a lifetime license (unlimited websites)
Elementor Builder
Elementor is a popular and powerful page builder tool for WordPress. You can use it with the free Hello theme for maximum compatibility, or plug it into another WordPress theme you want to use.
Elementor is similar to the Divi Builder, but it’s somewhat more complex in terms of usability and intuitiveness.
Price: Free version available, premium licenses from $49/year
The Complete WordPress Website Business Course
The Complete WordPress Website Business Course was my first all-WordPress course back in 2017. It taught me how to build different types of WordPress websites for myself and my freelance clients.
Throughout the course, you will learn how to create all types of commercial websites using WordPress. And I kid you not – you can sell these websites to clients for good money.
If you’re not familiar, WordPress is the most popular Content Management System (CMS) worldwide. Thus, the demand for skilled WordPress developers is increasing as we speak.
I use WordPress for almost all my website projects, and I’ve never been short of work as a freelance web developer.
If you want to launch a freelance web dev business, too, check out my guide on how to become a freelance web developer from scratch.
WordPress Theme Development with Bootstrap
So you want to become a WordPress theme developer and make money by selling beautiful, user-friendly WordPress themes online?
Then WordPress Theme Development with Bootstrap is the perfect course to get started.
Brad will teach you how to design professional WordPress themes for your website clients, yourself, or for the world.
You can easily set up an online shop with WordPress and WooCommerce, and sell your themes to a global audience. Or to make things even easier, you can sell them directly on Themeforest.
Needless to say, this course is great value for your money!
Make sure you have a basic understanding of HTML, CSS, and PHP before starting this course. Also, it doesn’t hurt to know some JavaScript and jQuery.
Recommended WordPress guides:
- 9 Smart Reasons to Use WordPress for Your Website Projects
- How to Create a Portfolio Site With WordPress: Step-by-Step Guide
↑ back to the table of contents
Code editors and IDEs for web development
Sublime Text
Sublime Text is a free code editor for Mac, Windows, and Linux. It’s been one of my go-to web development tools since day 1 of my coding journey.
Price: Free version available, premium licenses from $80.
Visual Studio Code (VS Code)
VS Code is a popular code editor with helpful features such as syntax highlighting, smart code completion, built-in debugger, and easy deployment tools.
VS Code allows you to customize the look of your interface to fit your needs. Works on Mac, Windows, and Linux.
Price: Free
Atom
Atom is a free, easy-to-use code editor with powerful customization options. Much like WordPress themes, Atom users can create custom themes for this editor to improve usability.
Price: Free
CodePen
CodePen is a web development environment for front end designers and developers. It’s a browser-based code editor where you can type in your HTML, CSS, and JavaScript code, and run it to see the results instantly.
You can share your “pens” with others, too, and link to them to showcase your work easily.
Price: Free
Brackets
Brackets is a lightweight but powerful text editor for web development. The design is very minimalistic, but the features are impressive.
It’s an Adobe tool, so it looks great and integrates perfectly with other relevant Adobe products.
Price: Free
Notepad++
Notepad++ is a free code editor for Windows. Much like Sublime Text, it’s very easy to use for beginners but offers enough features for advanced users, too.
My tip: Try the built-in FTP plugin to open and edit your code files directly on your web server.
Price: Free
Recommended code editor guides:
↑ back to the table of contents
Command Line resources
Intro to Command Line (Django Girls)
This introduction to Command Line shows you how to use the CLI on Mac, Windows, or Linux. Also, they have a step-by-step YouTube tutorial you can follow along.
Command Line Crash Course (by Learn Python The Hard Way)
The Command Line Crash Course is part of the Learn Python The Hard Way book that I can’t recommend enough if you’re interested in learning more about Python programming.
Command Line Power User
Command Line Power User is a collection of video tutorials by Wes Bos where you learn how to use the Command Line like a pro.
↑ back to the table of contents
Git and GitHub resources (version control)
Set up Git
Set up Git is part of GitHub Docs, where you can learn the basics of Git and GitHub.
Get familiar with setting up Git, working with repos, and communicating on GitHub – and grab your free Git cheat sheet at the end.
Git & GitHub Crash Course
This free Git and GitHub crash course teaches you how to create a Git repository, clone it, make changes, and submit changes to GitHub – in just 30 minutes.
Git Immersion
Git Immersion is a beginner-level tutorial where you learn the fundamentals of version control with Git.
GitHub Learning Lab
GitHub Learning Lab is a collection of courses and tutorials created by the GitHub community.
↑ back to the table of contents
Boilerplates and frameworks
HTML5 Boilerplate
HTML5 Boilerplate helps you build fast and robust websites faster. It’s a set of files you can download and use as a quick starting point for your next web project.
The boilerplate includes a basic HTML/CSS/JS template you can use to create responsive, fast-loading websites that work on all browsers.
Bootstrap
Bootstrap is a free front-end toolkit for building sites and apps with pre-built components for layout and styling. It allows you to build responsive pages, insert navigation menus, buttons, drop-down lists, and more within minutes.
Bulma
Bulma is another easily customizable front end framework – a great alternative to Bootstrap.
If you are familiar with CSS Flexbox, Bulma will be a breeze for you to learn. It’s free to use, and has a large community of developers for support.
Tailwind CSS
Tailwind CSS is a popular CSS framework for building responsive, customized user interfaces faster.
Compared to Bootstrap, for example, Tailwind CSS doesn’t have a default theme or built-in UI components you could use.
Instead, the framework comes with pre-designed widgets that you can use to build and design your site from scratch.
If you ask me, the best part of Tailwind is that you don’t have to tab back and forth between your HTML and CSS files in your code editor.
With Tailwind CSS, you assign custom CSS classes directly to your HTML elements. It takes a while to get used to and to memorize the syntax. But once you do, you can speed up your work a lot.
But it’s a matter of preference, really. If you don’t mind your HTML getting a bit crowded with dozens of inline classes, Tailwind CSS is probably a good fit for you.
Foundation
Foundation is another powerful CSS framework with a slightly more advanced interface compared to Bootstrap, for example.
It’s lightweight, but not the best framework for absolute beginners.
Website hosting and domains
Bluehost
Bluehost offers affordable web hosting plans for all types of websites from small personal blogs to large-scale online shops and everything in between.
When you sign up, you can register a custom domain name for free for 12 months. Plus, you get a full 30-day money-back guarantee.
Bluehost also offers free SSL certificates, unlimited custom email addresses, and a friendly support team to answer your questions.
I recommend Bluehost to anyone who wants a convenient way to launch an online presence, such as a portfolio website, an online shop, or simply a business website.
You can start with the most affordable plan to get your website up and running, and upgrade to a higher-tier plan once your traffic grows and you need better performance.
Price: web hosting plans from $2.95/month (paid for 12–36 months in advance)
Kinsta
Kinsta offers one of the fastest, best-performing hosting plans for WordPress websites.
I recently migrated this blog to Kinsta to accommodate the growth in my website traffic. And I couldn’t be happier with them!
If technical performance and page speed are your priorities, Kinsta is definitely one of the best web development tools for your WordPress website projects.
Here are just a few solutions Kinsta offers:
It’s super easy to sign up with them and set up your first website within a few minutes.
If you want to switch to Kinsta from your current hosting provider, they will help you with the migration process for free.
If you’re not sure whether Kinsta is a good fit for you, make sure to sign up for a free demo here.
Price: hosting plans from $30/month
Siteground
Siteground is a popular and fast web hosting provider specialized in WordPress hosting.
Their plans are very affordable for the first 12 months with discounts of over 70%. However, you need to pay for an entire year upfront to claim the discount.
Price: hosting plans from $3.99/month (regular prices from $14.99)
Hostinger
Hostinger offers some of the cheapest web hosting plans if you pay for 2–4 years in advance.
However, their lowest-tier plan doesn’t include a free domain name registration, nor can you create multiple websites on the same hosting plan.
In addition to shared hosting, Hostinger also offers:
Price: shared hosting plans from $1.39/month (paid for 48 months upfront)
WP Engine
WP Engine is another high-performance WordPress hosting provider for all types of website projects.
If you are a freelance WordPress developer, you are going to love their fast and secure hosting plans.
All packages include:
- Automated updates
- Managed upgrades
- Daily backups
- Web app firewall to protect your sites
Hence, there’s no need to waste your time on administration and management. Use that time to build new projects instead.
If you want to move your hosting to WP Engine, they offer easy automated site migrations with zero downtime, too.
Price: plans start at $25/month when paid annually ($30/month when paid monthly)
Namecheap
Namecheap makes it easy to register and manage your web project domain names in one place. The dashboard is intuitive and the pricing is very competitive.
Price: .com domains from $9.48/year (discounts available for multiyear registrations)
Developer tools
Chrome DevTools
Chrome DevTools allows you to do extensive testing and debugging in your browser to improve the performance of your web projects. Optimize page speed, find and identify issues quickly, and edit your pages right away – all with a single tool.
Firefox Page Inspector
The Firefox Page Inspector lets you examine and modify the HTML and CSS of a web page.
It’s a helpful font-end web development tool for troubleshooting your CSS, for example. If your CSS rules aren’t working, the inspector allows you to double-check whether you’re targeting the right element or if your rule is being overridden by another one.
Start by getting comfortable with the UI here.
Safari Web Inspector
The Safari Web Inspector works a lot like its sibling tools for Chrome and Firefox. It’s not activated by default, though. You need to enable the Develop menu in your Safari settings first.
↑ back to the table of contents
Wireframing tools
Adobe XD
Adobe XD is a wireframing tool for building interactive web page prototypes quickly.
It’s part of Adobe’s Creative Cloud. If you work with Photoshop or Illustrator, for example, XD is a great addition to your designer toolkit.
Price: $9.99/month
Sketch
Sketch is a user experience design tool for websites and mobile apps for macOS. It comes with an intuitive interface and powerful design features.
Price: $9/month
InVision Studio
InVision Studio is a powerful animation and prototyping tool that allows you to create advanced, vector-based screen designs. When you create mobile app prototypes with InVision, you will love the support for gestures and fixed sections such as headers and menu bars.
Price: Free (paid plans from $7.95/month)
Design and graphics tools
Canva
Canva is the perfect tool for creating all types of graphics for your web projects, social media, and more.
You can create a free account here and start designing right away. Log in and select a design you want to create, such as:
- Logo
- Infographic
- PDF e-book
- Instagram post
- Twitter image
- Video
- Desktop background
- Presentation
- etc.
The pre-made design templates allow you to create professional-looking designs within minutes – especially if you’re not a designer.
The editor interface is super intuitive, and it even includes thousands of free stock photos you can add to your graphics.
When you’re finished, you can download your design or publish it directly to social media if you upgrade to the Pro plan.
Price: Free – Pro plans from $9.99/month
Adobe Photoshop and Illustrator
Adobe Photoshop is a premium, professional photo editing tool. Adobe Illustrator is great for designing vector graphics, icons, and SVGs. Both Photoshop and Illustrator are available through Adobe Creative Cloud.
Price: $20.99/month per app.
Stock photos and graphics
Envato Elements
Envato Elements is a subscription-based stock media service offering millions of:
- Stock photos
- Videos
- Fonts
- Graphic templates
- WordPress resources
- Music and audio
- etc.
The subscription gives you unlimited access to everything. If you are busy building web projects and managing social media accounts, Envato Elements is a sound investment for standing out from everyone else who use free stock media.
Price: from $16.50/month (students get a 30% discount)
Unsplash
Unsplash is one of my go-to design and web development tools for free high-quality stock photos. Use them for your website projects, social media posts, and other promotional material.
Price: Free
Canva
Canva is a browser-based graphic editor app for non-designers. If you don’t want to venture into learning Photoshop, for example, Canva makes things much easier for you.
In addition to being a designing tool, Canva also includes thousands of high-quality stock photos you can use.
The free plan comes with a limited number of stock images, videos, and graphics. But if you upgrade to Canva Pro, you get unlimited access to thousands of elements right away.
Price: Free (pro plans from $12.99/month, discounts available for annual plans)
unDraw (free illustrations)
unDraw offers stunning illustrations you can use entirely free without attribution. Find an image that you like, customize the colors, and click to download.
Created by the talented Katerina Limpitsouni, these illustrations are a must have web development and web design tool for your projects.
Price: Free
Reduce Images (image resizing)
Before you upload photos and images to your website or WordPress media library, use Reduce Images to resize your file dimensions to a suitable level.
Price: Free
tinyJPG (image compression)
tinyJPG is a browser-based image compression tool to reduce the file size of your images, graphics, and photos before uploading them to your website.
Price: Free
Color selection and palettes
Adobe Color
Adobe Color is an intuitive tool for creating beautiful color palettes for your web projects. Start with a primary base color, and the tool will suggest complementary colors to go with it.
If you need some inspiration, you can explore popular palettes and discover trends with just a few clicks.
Fonts and icons
Google Fonts
Google Fonts is a collection of hundreds of free fonts you can use for your web projects.
You can easily compare multiple fonts individually of combine them for beautiful Google font pairings.
Price: Free
Adobe Typekit Web Fonts
The Typekit Web Fonts feature is included in any Creative Cloud subscription. You get unlimited access to all Adobe Fonts for your website projects.
Price: included in Adobe Creative Cloud (individual apps start at $4.99/month)
Font Awesome
Font Awesome is a popular font and icon toolkit where you can find thousands of icons and graphics.
You can sign up for free with your email address to receive your unique embed code. Add the code to your website and you’re all set.
Price: Free (paid version $99/year)
Marketing and social media resources
MailerLite
MailerLite is hands-down the best email marketing tool for small businesses, bloggers, and online shops who want to build a loyal audience.
MailerLite offers the same powerful tools as its competitors, but at a fraction of the price. You can segment your audience, set up triggers, create automated email sequences, and more.
Whether you are starting a blog or building a website for a client, check out MailerLite and try it out for free.
Price: Free for up to 1,000 active subscribers and 12,000 monthly emails. Paid plans start at $10/month.
The Complete Pinterest Marketing Bundle
Did you know that Pinterest now has over 400 million monthly users?
It’s the largest visual search engine worldwide – and a fantastic platform for driving visitors to websites, blogs, or online shops.
If you want to leverage Pinterest to grow your traffic, The Complete Pinterest Marketing Bundle has everything you need.
Price: $89
Tailwind App
Tailwind saves you time and helps you grow your reach on Instagram and Pinterest by automating repetitive and tedious tasks for sharing your content.
Use Tailwind to schedule your posts in advance, connect with other users in Tailwind Communities, and stay organized.
Price: Free plan includes 20 posts for 1 Pinterest and 1 Instagram profile. Paid plans start at $9.99 and include 100 posts.
Buffer
Buffer automates your Twitter, Instagram, Facebook, Pinterest, and LinkedIn from a single, intuitive dashboard.
This can be a huge time-saver if you are active on social media because you can work in batches and schedule your posts to publish at the best times (when your target audience is active).
Price: Free plan for up to 3 social channels and 10 scheduled posts per account. Paid plans start at $5 per social channel.
Social Warfare plugins
Social Warfare is a free social sharing plugin for WordPress. Use it to add customizable social sharing buttons to any WordPress website, blog, or shop.
Price: Free (Pro plans from $29/year for 1 site)
eCommerce tools
SendOwl
SendOwl is the easiest tool for selling your own digital products worldwide.
Whether you want to create an e-book or stunning website templates, SendOwl allows you to set up your sales page and payment gateways easily.
Price: Free 30-day trial, plans from $15/month
WooCommerce for WordPress
WooCommerce is a free WordPress plugin that turns your WordPress website into an online shop.
You can sell both physical and digital goods and services or even memberships, subscriptions, and affiliate products with the appropriate add-ons.
WooCommerce is quite easy to use, but the initial configuration may take some time.
If you are in a hurry and you want to start selling a digital product right away, SendOwl is the easiest platform to get started.
Just like WordPress, WooCommerce is fully customizable with the right WordPress theme such as:
- Divi (my top recommendation)
- Hello Theme
- Avada
With these themes you can easily create custom product page templates and adjust your cart and checkout pages to fit your needs.
Price: Free
Shopify
Shopify is a very beginner-friendly eCommerce tool for setting up an online shop. It’s an all-in-one, hassle-free solution that includes web hosting, security, caching, and more.
Compared to WooCommerce, Shopify allows you to launch your shop faster. But Shopify is considerably more expensive, and you need to pay for any extra features you need, such as a custom domain name.
As your business starts to grow, bear in mind that Shopify can quickly become costly. They even charge a transaction fee for all purchases and payments.
If you don’t need a ton of extra features or customization options, give Shopify a try.
Price: from $29/month
Productivity tools
Grammarly
Grammarly is a browser-based tool for checking your spelling and grammar. The free plan is more than enough to get started. You will get instant feedback on your writing and suggestions for improving the readability.
Since English isn’t my first language, I use Grammarly all the time to make sure my blog posts, email campaigns, and digital products are easy to read.
Price: Free (premium version $12/month)
Trello
Trello is a free online tool for collecting and managing your ideas as lists. List your to-dos, track your projects, and collaborate with others.
Price: Free
Asana
Asana is much like Trello, but more aimed at working together in teams and managing your projects and workflows seamlessly with others.
If you work together with other people a lot, Asana is one of the easiest web development tools for managing your projects, exchanging feedback, and tracking your progress.
Price: Free (premium version $10.99/month when billed annually)
Evernote
Evernote is another fantastic project management tool just in case Trello or Asana isn’t a good fit for you.
Works an all devices, so you can brainstorm ideas and track your progress anytime, anywhere.
Price: Free (paid plans from $7.99/month)
Coggle
If you are a visual thinker or just need a tool to share complex information with others, Coggle allows you to organize your ideas into mind maps easily.
If you are looking for a visual project management tool or simply a place to brainstorm ideas, give Coggle a try. It’s free and easy to use.
Price: Free (paid plans from $5/month)
RescueTime
RescueTime is a free desktop app that runs in the background and monitors how you use your computer. You get weekly reports where you see when you’re most productive and what you’re wasting time on.
This app helped me cut down my workweek from 50 hours to 15 hours – simply because it helped me understand when I work the best.
Price: Free trial (plans start at $6.50/month)
Dropbox
Dropbox is a powerful cloud storage tool for your website project files. The free plan gives you 2 GB of storage.
Price: Free (paid plans from $9.99/month for 2,000 GB)
Google Drive
Google Drive is another cloud-based storage tool for your documents and other files. It integrates seamlessly with Google Docs, Sheets, and Slides. The free plan gives you 15 GB of storage.
Price: Free (paid plans from $1.99/month for 100 GB)
SEO tools
Google’s SEO Starter Guide
Google’s own Search Engine Optimization (SEO) Starter Guide is the perfect place to get a complete overview of the fundamentals of SEO.
The guide is packed with best practices you can apply to your own web development projects right away. You will learn a bunch of helpful tips for making it easier for Google to crawl, index, and understand your content.
Also, make sure to follow these webmaster guidelines whenever you launch a new website.
KWFinder
KWFinder is part of the 5-in-1 SEO toolkit by Mangools. Find low-competition keywords, research your competitors’ best-performing content, track banklinks, and more. Easy to use, but insanely powerful. Compared to its competitors, KWFinder is the most affordable high-end SEO toolkit.
Price: Free 10-day trial (no credit card needed). Paid plans start at $29.90/month when paid annually, $49 when paid monthly.
KeywordTool.io
Keyword Tool is a free alternative to Google Keyword Planner and other keyword research tools.
You don’t even have to create an account to use it, and works like a dream for finding hundreds of relevant keywords quickly.
Price: Free (Pro license from $69/month)
Yoast SEO
If you manage WordPress websites, the free Yoast SEO plugin makes search engine optimization a breeze.
Once you’ve set up your keyword strategy, Yoast helps you improve your content in terms of SEO and readability.
Price: Free (premium version $89)
Google Search Console
Submit your website to Google Search Console to manage and optimize its visibility in search results. Check your site’s indexing status and track your pages, keywords, and rankings easily.
Page speed tools
PageSpeed Insights
Google PageSpeed Insights allows you to analyze the content and loading speed of your website. The tool gives you clear suggestions for improving the performance for both desktop and mobile devices.
Price: Free
Pingdom
Pingdom Website Speed Test is a free tool for monitoring your website loading time. Even if you are new to web development, this tool is intuitive and easy to understand.
Price: Free
GTmetrix
GTmetrix is another helpful tool for analyzing your website loading speed and performance. The test delivers a very detailed report about what parts of your website are fast or slow, too big, and so on.
Price: Free
Cloudflare CDN
Cloudflare is one of the best web development tools for speeding up your website loading time.
Their content delivery network (CDN) is a network of web servers around the world. When someone visits your website, Cloudflare makes sure to deliver the content from the nearest server – thus improving page speed.
Price: Free (paid plans from $20/month)
Stackpath CDN
Stackpath CDN caches your website content in different locations around the world that are close to your website visitors.
If your visitors come from all over the world, using a CDN can considerably speed up the average server response time.
Price: plans start at $10/month
More web development tools and resources
If you want to discover even more helpful resources and web development tools to speed up your workflow, check out these articles on the blog:
- 27 Best Web Development Courses For Beginners
- 120+ Top Websites to Learn to Code for Free
- How to Become a Freelance Web Developer (And Make Money Online)
Happy learning!
– Mikke
