This is Part 2 of our How to Be a Web Developer series. If you’re just joining us, here’s what you’ve missed so far:
A web developer’s main job is writing code, but there are a number of other programs and technologies we use to launch websites besides our trusty code editors. In this post, we’ll look at some of the essentials: Photoshop, Domains, Hosting, cPanel and FTP.
Although there’s been a recent push away from designing entire web sites in visual design programs like Photoshop, it’s still a ubiquitous tool you’ll need to understand for mocking-up and designing graphic elements for your sites. Furthermore, as a web developer, you’ll likely receive a fair share of Photoshop files from clients and colleagues which you’ll want to be able to dig into with confidence.
In the best case scenario, you work for a company which provides you access to Adobe Photoshop. If you’re going solo, though, it’s a work expense you’ll have to take on.
Recent versions of Photoshop are subscription based, so instead of laying out a large sum upfront and “owning” the software, you commit to a monthly fee to Adobe’s Creative Cloud ($10+/mo) service.
If a monthly subscription for software rubs you the wrong way, you can purchase older versions of Adobe products; as of this writing Photoshop CS6 will run you $699.
If any of this is outside of your starting budget, you can explore open source alternatives to Photoshop such as Gimp.
Also, if you want to take Photoshop for a test drive before committing, check out their 30-day free trial.
Once you’ve got your hands on a copy of Photoshop, there are some foundational concepts you’ll want to cover before digging into making your own graphics.
1. Know your tools
The first thing you want to do in Photoshop is familiarize yourself with the workspace and all the panels.
Learn here: AdobeTV Understanding Photoshop CS6 (See the first 2 videos under Photoshop Workspace).
2. Working with Layers
Photoshop is all about non-destructive editing— the ability to change and tweak graphics in a way that it can always be undone. One key tool to this kind of editing is Layers, which keep different pieces of your graphics separate.
Learn here: AdobeTV Understanding Photoshop CS6 (Scroll down for the Layers section).
3. Save for web
Photoshop has a feature called Save for Web that lets you optimize your images when exporting for a web site. Sounds like a handy technique for a web developer, eh?
Among other things, Save for Web will let you adjust things like resolution, file size and quality, all while previewing the results live. This lets you make adjustments to get the smallest file size possible, while making sure you’re not compromising on quality.
Cutting down on image file size is a easy way to make your web sites load faster, so Save for Web is an invaluable technique.
Learn here: AdobeTV Save for Web
Domains and Hosting
Most of the time, it’s the client’s responsibility to purchase their own domain name and hosting package, since these are usually paid for with a recurring annual fee. However, many non-technically-minded clients aren’t sure how to go about this. To offer the best customer service, it’s good for you to have a solid working knowledge of how these two items are purchased, the options available, and companies you can suggest for each. To get you started, here are some of our recommendations:
For domains, we use Namecheap.
Once you’ve locked down a domain and hosting company, there are a few pieces of software you’ll want to become familiar with…
cPanel is a brand of software that many hosting companies have installed which lets you manage your website. Not every hosting company uses cPanel (some, like GoDaddy, have their own custom panels), but it’s useful to know because even if your host doesn’t use it, a client’s host might.
Within cPanel you can manage the following aspects of your site:
- Adding subdomains
- Installing WordPress
- Setting up email accounts
- Managing databases
FTP stands for File Transfer Protocol. Using FTP software is one way you can transfer files between your computer and your web server / host. FTP is not the most elegant solution for managing a website, but it is the easiest to get started with.
Much like Photoshop, FTP software is something you need to find, download, and maintain on your computer. Unlike Photoshop, though, many FTP clients are free and open source. For example, we recommend CyberDuck which is free and available for both Mac and PC.
Once you have FTP installed, you’ll need three key pieces to connect to your web host:
- Hostname / Server name
- FTP Username
- FTP Password
This information is often emailed to you after you sign up for a web hosting account, but if you don’t find it there, dig around your account or email support for guidance.
Once you’ve acquired the keys to your new castle, you can log in to your site via FTP and begin transferring your web files. This video from our PHP Basics class can get you rolling: Using FTP to edit files on a server.
Before “Overwhelmed” Sets In…
So you feel that you barely have a grasp on HTML, and here I am adding to the ever-growing list of things you didn’t know you didn’t know. This is totally normal, and we have all been there, myself included. Here are a few thoughts to help you prevent the feeling of being overwhelmed:
Start with your own website.
Most web developers have their own website (at least, freelancers do), and it’s likely to be one of the very first websites you build. Try to build your website the same way you anticipate you will build future websites (for instance, don’t create a Squarespace website for yourself if you want to develop WordPress sites for clients). This will give you the chance to practice doing each item on this list without the pressure and time restraints of a typical client project.
Not every project requires all of these items.
If all you need to do is upload a child theme for a WordPress website, you might not need to touch cPanel or FTP at all. If a client already has a website, the domain and hosting might already be up and running. Each website project is going to have different requirements, and you’ll quickly learn when each item is called for.
The important thing to know is what each of these items are and how they contribute to a website build. If you have a good foundation of the basics, then you won’t be unpleasantly surprised when they pop up later. There is a lot you will figure out as you go, so even if something is unfamiliar or sounds hard, dig in and start learning.