Web Design Tools, Services & Free Resources To Help You Get Online
Last updated on April 13th, 2017. Posted in Cool Tools & Services.
Here’s a helpful list of resources, tools, and recommendations to help you go further with your web design skills. You’ll find where to go to register a domain name, set up your web hosting, some top email service providers, coding tools, web platforms for you to build with, web browsers, ftp applications, graphics editors, web templates, stock graphics, icons, and web elements, and additional tools and services for you to look into. As I discover new resources, I’ll continue to add them here—so be sure to bookmark this page, and come back often!
In the article below, I’ve provided a lot of resources, links, and additional material to help get you started in web design. Some of the links are for free products and services, while other links are affiliate links. This means that if you choose to click on those links, and wind up buying the product, I earn a little bit. But, it doesn’t cost you any extra, and in fact, using these links may even save you some money.
Registering a domain name
In order to obtain your own domain name, you’ll need to register your domain with what’s called a domain name registrar. This is just a company that you can register domains with. There are many places to register a domain name with. You can even register a domain while simultaneously setting up your web hosting—but I don’t recommend that you do. Instead, register your domain with a proper domain name registrar.
- NameCheap I’ve used all of the most popular domain registrars, and by far the best is NameCheap. I’ve been using them for years. Their clean, easy to use interface and un-spammy registration process puts them way ahead of other registrars.
Setting up Web Hosting
Like domain registration companies, there are many places to find affordable web hosting. They key is to ensure you enroll in the right kind of hosting for your web project. Because web hosting is so important, I’ve spent a a lot of time and money researching and testing to find the best web hosting companies in the industry. If you checked out my tutorial, The Three Critical Hosting Features Every Website Needs, then you know that all the recommendations I’m making here nail our biggest hosting concerns. Remember to use my recommendations as a starting point. Take a look at a few that you think might work for you, and do your own research into them.
- Web Hosting Hub Specializing in shared hosting, Web Hosting Hub is perfect for those new to web design, or for small to medium-sized websites. Plans start at about $4/month with a generous 90-day money back guarantee. Extra hosting features and US-based 27/7 customer support put Web Hosting Hub ahead of many other hosting companies.
- SiteGround Another top hosting choice, SiteGround offers a variety of hosting types, including shared, cloud, and managed WordPress hosting, all starting at $4/month. With world-class customer support, SiteGround is a great choice to handle your web hosting needs, and they’re also officially endorsed by WordPress—making them a solid solution for personal and small business website owners.
- Media Temple With customers in 100 different countries, powering more than 1.5 million websites, Media Temple specializes in premium, top-quality web hosting. They offer a variety of hosting types, and have a reputation for fast, friendly support. If you’re looking for extra service with solid reliability and a web host that allows you to scale as your needs change, Media Temple is a great choice.
- WP Engine If you’re looking for worry-free web hosting for your growing WordPress site or online business, where the technical side of your site is taken care of for you, then WP Engine is a perfect fit. They specialize in providing high quality managed WordPress hosting. Their customer service is best in class, with one-on-one WordPress experts at your disposal 24/7, 365.
- Flywheel Another great managed WordPress hosting choice, Flywheel is geared towards designers, agencies, and web developers. Their customer interface is extremely straightforward, and their customer service is world-class. For developers and designers, Flywheel offers a unique site staging area as well, with the ability to transfer billing to your client.
- Other Hosts To Explore If you’d like a few more industry leading web hosting companies to research further, then check these ones out: Liquid Web, KnownHost, Squidix, and WordPress’s own Pressable.
Dedicated Email Services
Most web hosting services, particularly lower-cost shared hosting comes with free email. But for a variety of reasons, using the email service that comes with web hosting isn’t a great idea. Ideally, using a dedicated, business-grade email service is vastly superior. And the cost is low, usually about $5/month per account. Here’s a list of top email service recommendations for you to investigate further:
- Google G Suite This is the ad-fre,e business version of Google’s Gmail. It’s almost exactly the same as regular Gmail, but with the ability to create email addresses branded for your own domain (for example,
email@example.com). G Suite also includes access to Google Docs, Google Drive, and a host of other features. And, every Google G Suite account comes with extra storage space and 24/7, 365 enterprise-level customer support.
- Microsoft Office 365 Office 365 is an enterprise-grade web-based service that’s now available for individuals and small businesses as well. Their service includes branded, domain-based email in a clean, user-friendly interface that’s easy to use and navigate through. Each account includes 50gb of storage. And, Office 365 email comes bundled with industry-grade spam and malware protection, keeping your inbox clean and safe. Because Microsoft Office 365 is enterprise-grade, you know reliability and security are their top priorities.
- Other Email Services To Explore Here are a handful of other dedicated email services to consider: Zoho Mail, Atmail, and Amazon Workmail.
If you’d like to know more about handling your website’s email, be sure to check out my in-depth tutorial, Finding The Best Email Service For Your Website.
Front-End Code Editors
No matter how you choose to build your website, having a web editor allows you to work directly with your background code—this is important for troubleshooting and making quick fixes. You can go with a plain text editor (be sure it’s a plain text editor, not a word processor), or you can use a dedicated code editor or WYSIWYG application.
- GitHub’s Atom (Windows, Mac) Atom is a powerful, free and open source code editor that has a strong community behind it. It’s simplified, easy to use interface makes working with code easy and straightforward.
- Sublime Text (Windows, Mac) Sublime is the code editor that set the standard that all others must now meet. It’s clean, simple interface is highly customizable, and easy to use. Sublime is the choice for many front-end web developers.
- Panic Coda (Mac-only) Considered to be one of the best Mac-only code editors available, Coda has a clean, intuitive interface. It’s many built-in features to make handing web code easy, including code complete and code snippets. Coda also has handy FTP capabilities.
- CoffeeCup HTML Editor (Windows-only) This editor makes coding sites a breeze with great built-in features like code completion and built-in validation. CoffeeCup costs $29, and has a free trial.
- Adobe Dreamweaver (Windows, Mac) Adobe’s highly popular and widely used web editor, Dreamweaver’s available as a standalone application or as part of Adobe’s Creative Cloud (Windows and Mac, $20/month for Dreamweaver, or $50/month for the entire Adobe Creative Cloud suite).
There are many more front-end code editors available, and finding one that fits your needs is key. For more information, be sure to check out my tutorial, Finding The Best Front-End Code Editors For Windows And Mac.
Web design platforms
There are lots of ways to build websites. One of the fastest, most straightforward ways is to use a platform like WordPress—which can handle pretty much anything you can throw at it.
- WordPress.org The most popular, most widely used CMS (Content Management System), because of it’s ease of use, open-source code, it’s huge online community, and it’s flexibility and customization via plugins and themes.
While you’re building your site, you’ll want to preview your work in at least a few web browsers. Below is a list of the most common browsers. If you don’t already have them, go download and install ’em (they’re all free).
To connect to your hosting account, your live web server, you’ll need what’s called an FTP application, sometimes called an FTP client. FTP stands for File Transfer Protocol. I go into much more detail about FTP right here. Now, there are lots of great FTP applications available, and most of them are free. So you’ll probably want to try one or two out first before choosing one to stick with.
- FireFTP A free Firefox plugin, which adds FTP capabilities directly within your browser. It’s simple, easy to use, and includes a variety of advanced features. This is my FTP utility of choice.
- Cyberduck A free and very popular FTP application for both Mac and Windows. The interface is clean and simple, and it includes a handful of extra features to help keep your files organized.
- WS_FTP If you’re looking for a Windows-based, commercial-grade FTP application that comes with business-oriented users in mind, then WS_FTP might be just what you’re after. Like other FTP applications, WS_FTP handles common tasks like file transfers, drag and drop functionality, bookmarks, and more, but with enterprise-grade security and reliability.
- Yummy FTP Pro A solid business-grade FTP application used by Mac-based designers and developers, Yummy FTP Pro is optimized for performance, security, and reliability. In addition, the built-in code editor makes it easy to make adjustments to live site files directly within the easy to use interface.
If you’d like a few more FTP recommendations, check out my two tutorials, Best FTP Applications For Windows Users, and Best FTP Applications For Mac Users.
Having some kind of graphics editor on hand makes building websites a whole lot easier. Even some software that’ll letcha do simple stuff like rotating, cropping, and minor colour correction would be a huge help, but you may want a little more horsepower than that for your web design ventures.
- Photoshop With loads of horsepower and tons of features, Photoshop is, of course, the most popular raster (pixel-based) image editor available ($20/month, or $50/month for the entire Creative Cloud suite, which includes Dreamweaver, mentioned above, and Illustrator, below. Windows, Mac).
- Illustrator Photoshop’s sidekick. A lot of web designers (myself included) use Illustrator to create logos, buttons, icons, layout mock-ups, and so on (Also $20/month or $50/month for the full CC suite. Windows, Mac).
- Gimp A popular, free, and open source raster image editor (Windows, Mac, Linux).
- Inkscape Free and open source vector graphics editor (Windows, Mac).
Get your website up and running in no time by using pre-made, ready-to-use web templates. There are heaps to choose from, whether you’re building your website with straight HTML and CSS, WordPress, or other web platforms.
- Template Monster Browse through Template Monster’s impressive collection of WordPress themes.
- Theme Forest WordPress themes, and themes for other web design platforms.
- Thesis Theme A very popular and easy to customize WordPress theme by DIY Themes.
- Studio Press Powering over 86,000 sites, Studio Press offers up industry standard premium themes.
- My Theme Shop SEO-friendly and responsive themes for your WordPress site.
- WPZoom Professional, easy to use themes with lifetime support.
Stock Graphics, icons, fonts, photos, music & Scripts
You don’t have to be a professional designer to have a professional looking site. Below you’ll find some great resources to bring your website to life—pro-quality graphics, stock photography, scripts, and more.
- GraphicRiver.net Find loads of icons, fonts, web elements, and a whole lot more. A resource you’ll definitely want to bookmark!
- PhotoDune.net High quality, royalty free stock photography.
- IconDemon.com Stock icons and imagery that are perfect for your web projects.
- CodeCanyon.net Find tons of scripts, polls, forms, WordPress plugins, CSS elements, and more.
- MyFonts.com The right font can really bring a layout to life. Find some great fonts for your next web project at MyFonts.com.
- AllStockMusic.com Finding the right jingle or intro music for your projects can be a real pain. But, you might find the perfect tune at AllStockMusic.com.
- AudioJungle.net Another music resource, AudioJungle.net offers up thousands of intros, loops, sound effects and more.
Additional Tools & Resources
Push your web design skills even further with these additional tools, services, and resources. These extras will help you build better websites, diagnose issues, and assist you in testing your projects on various platforms and devices.
- Google Analytics Free and easy to set up, Google Analytics gives you a massive amount of information about who’s visiting your site, what pages are most popular, what pages visitors exit from most often, browsers, screen resolutions, and a whole lot more.
- Screenfly Stick a URL into Screenfly, a completely free service, and then choose a mobile, tablet, or other device from the menu, and you’ll get a preview of your site on the selected device. This is huge for designers who want to build responsive layouts that function across multiple devices.
- Web Developer Toolbar Get your hands on a huge set of web design-related tools with this free plugin for Firefox.
- Firebug Another fantastic plugin for Firefox, Firebug is essential for diagnosing page structures and CSS. A must-have.
- Browsershots.org A decent cross-browser, cross-platform testing tool.
- Parallels Run Windows on your Mac ($80). This is exactly what I do, and if you’re a Mac user, I highly recommend installing Parallels and Windows. It makes browser and platform testing a breeze. In fact, I’m running two versions of Windows, Linux, and Chrome OS, all inside Parallels, all on my Mac laptop. Of course, you’ll need a copy of Windows too.
- XAMPP Turn your Windows computer into a temporary web server. XAMPP allows you to run platforms like WordPress directly on your computer, so you can develop locally rather than on a live webserver. Best of all, it’s completely free!
- MAMP For Mac users who want to install and build websites using platforms like WordPress on their computer. Like XAMPP above, this means you can build your site directly on your computer rather than on a live webserver. Also completely free.
Alright, let’s leave things here. I hope you found this article to be of tremendous value. There’s lots here for you to go on, and lots of extra options for you to consider. If you have anything you’d like to add, catch me at firstname.lastname@example.org.