Here’s an answer to how to get started building websites that I fully endorse and isn’t vague. This is going to cost a little money, just like learning to play the guitar requires buying a guitar and some accessories. This is also going to require a little time and mostly isn’t directly about the coding itself. It’s about getting you to a place where you’re doing web design for real and you can’t help but learn!
I’m going to mention specific company names without linking to them, just to be clear this article isn’t an affiliate marketing thing. Googling them should bring them right up.
1. Buy a domain name
Buy a domain name from Hover. Buy something useful, like your-name.com or buisness-idea.com. Or buy something silly that you will actually do something with.
2. Buy some web hosting
Buy the cheapest hosting plan at Media Temple. Tell them you already have a domain. I think it’s preferable to separate your domain buying company and your hosting company1.
Once it goes through, you’ll get a service activation email.
3. Point the nameservers of your new domain to your new hosting
The link in that service activation email will take you to Media Temple’s guide with all kinds of information in it you need to finish setting this up. Under the DNS section, you’ll see Media Temples nameservers. We need to change the nameservers for our domain over on Hover so that the domain properly points over to Media Temple.
When we’re changing these nameservers, we’re changing DNS information. Whenever you change DNS information there might be some time involved. This information needs to propagate it’s way to routers all around the world that power the internet. That’s how the internet works!
Just know that it might take a little time for this to start working (for your website we’re about to put up to actually show up).
4. Get some FTP Software
FTP is for transferring files. We’re going to use it to transfer files from your computer to the web hosting server computer. We’ll talk about those files in a minute, but for now we’re just setting it up.
If you’re on a Mac, get Coda. Coda is an FTP client, but it’s also a code editor, and when you’re just starting out as you are, that’s mighty convenient.
I’m not as familiar with PC software, but googling “FTP client for PC” brings up plenty of stuff. I’m sure there are some nice ones.
5. FTP into your Web Hosting
That Media Temple guide area will also include FTP information, meaning a:
- hostname
- username
- password
Enter the FTP credentials from the email into the FTP client (create a new Site).
Connect to the server.
6. Add the Domain to the Hosting
When we bought the hosting, we told them we had our own domain. So let’s set that up in there. This will certainly vary from hosting company to hosting company. Here’s how it worked on Media Temple:
7. Find the web root through FTP on your server
There is always a particular folder on your server that is the “web root”. For example, if you put an index.html file there, that is what displays when you go to your-name.com, or if you make a folder there called “cool” and put an index.html file in that folder, that is what displays when you go to your-name.com/cool/
8. FEEL THE POWER COURSE THROUGH YOUR VEINS
Whatever you put in that web root is live on the internet!
If you put an index.html file there, that’s what shows when you go to your domain in a web browser.
9. Go find a nice template to download, and upload it to your server
Go download a template. Google something like “Free HTML templates”, or even find a paid one you like and buy that. There is nothing wrong with templates. Eventually you’ll be good enough to not need one or make educated choices about when to use one, but for now, it’s best to kick things off with a nice looking site that you can tweak and make yours. Kinda like how it’s more fun (and easier to get better) learning an instrument by playing a song you like rather than learning scales.
10. Congrats
You’ve now built a website. You absolutely have the ability to edit those files and make things happen. Without any further training at all, you are smart enough to find words that you want to change and change them in HTML and see the results. You are smart enough to find color values in CSS and change them to see the results. You are smart enough to figure out the connections between HTML elements and CSS selectors.
That’s how the vast majority of web designers started out. I know I did.
Now, everything else you learn you can learn in context of a actual site you’re working on. You can imagine how the things you learn might apply to your real website. And the more you do it, the better you get. Wanna get better? Just build websites!
Alternatives
I wanted to be very specific in this article. Nothing vague. But that doesn’t mean this is the only path. Let’s talk similar but alternative paths in the comments.
Leveling Up
After feeling pretty comfortable with this process, there are lots of ways to level up. Some of those might include
- Install a CMS like WordPress (video series), Kirby, Perch, Ghost, or the like.
- Working on your design skills in general, by designing more.
- Learning some jQuery (video series) to add advanced functionality and interaction.
- Learning about a version control system like Git.
- Learn about running a web design business effectively.
There are a million ways to get better. You’ll likely discover most of them organically.
1 – For example, if you buy your domain from your hosting company, and then decide to change hosting companies, the hosting company is disincentivized to help you with your domain.
I think one of the greatest things about web design is that you can really skip steps 1 – 8 and just write some HTML/find a template and open the file in your browser. You just made a web page! You are amazing! Learning to tinker locally is a great workflow that I’m sure most of us use every single day.
Yep that’s great!
I think the magic though comes from that feeling you get when you’re controlling a real website that anybody in the world can see. It gives you stakes. This is a thing now, I have to do a good job.
lol @ number 8: FEEL THE POWER COURSE THROUGH YOUR VEINS
:-) Agreed. And Chris, I think this is a very nice way of inspiring people to get started. It gives people permission to just try stuff, but creates the excitement of “oh wow! Look what I can do! This is live on The Actual Internet!!!1” I know that’s what inspired me to start.
I thought that web design was the art of designing web pages, i.e. creating a website mockup… ^^
Baby steps :-)
I agree. Getting started in web design certainly doesn’t start with buying a domain name. This guide should more likely be titled “How to setup your first website” or something like that imo.
Also, read lots of books! Not just about code, but design itself. I started as an IT person turned backend developer, and now do front-end as well! Looking at design books, and reading about design principals really helped me a lot and now I’m not afraid to make suggestions or try my hand at styling the sites as well.
FileZilla is arguably the best FTP client for PC. Simple and has everything (and is pretty popular).
Agreed! And it works just as fine on Linux distributions like it does on Windows
It is a very good client.
Alas, it stores passwords in a file as plain text!
Why, oh why?!
It really is important to realize that much of what you’ll learn is learned organically. Information in this field, as with any other, is overwhelming in it’s volume and depth and it’s much of the time difficult to know what to pay attention to.
Something I started doing when I was starting out (and I still do it) is to work on very specific things that interest me – like easy performance wins – and when I see something new but tangential, take a mental note of it but leave it be. Once you see the same phrase come up two or more times while researching your specific interest, it’s probably a sign that you should dive into that next.
Much of what I’ve learned, even now, seemed to go way over my head when I first jumped in. That’s alright, read through the jargon and references and pick up the things you DO know something about. Over time you’ll start feeling like that Garfield cartoon – learning by osmosis… stuff will just start making sense as you get more familiar with its context.
Super extra credit:
Set-up Git to push your website changes
Yup – that’s pretty much EXACTLY how I did it! :)
Typo here :-P
Thanks for the write-up!
Thanks! Buying just cause fixed.
And if you’re a cheapskate like me, you can start with a free 000webhost site.
It doesn’t give you a .com, or 5 (.. 2)-nines, but there’s no ads, no footer, no crappy restricted site builders, and you’ve got PHP5, MySQL, and more at your disposal: just upload your files.
It’s served me well over the years.
Note: Not a paid shill, just a happy consumer
Yep, that’s who I’ve been using for years. Never had a complaint. Their site UI isn’t ideal, but free is free.
#8 Is exactly how I felt when I created my first webpages when I was a preteen using Homestead to make the most god-aweful web 1.0 pages. Aw the memories XD
Why is it better/worse to change to the web hosting nameservers as opposed to leaving the nameservers at their registrar defaults and just pointing to the IP address of the web hosting?
Because you can then use the host as a mail server etc
Chris, I have to disagree with you on this one.
The steps described above are mere operational tasks that IMHO are not directly related to web designing.
“How To Get Started in Web Design” is about learning to design.
Here’s how I see some things:
• How good can you really be at buying a domain and a hosting service?
• How good can you really get at pointing nameservers to the hosting service?
• How good can you really get at FTP?
• How good can you really get at finding the root of your site?
• How good can you really need to be to find a template?
To learn about Web Design, you can start by:
Looking intoTreehouse
Or looking into Lynda.com
Or reading this article at WebDesignerDepot.com “20+ resources for learning web design & development”
While [learning HTML and CSS as well] in Codeacademy (http://www.codecademy.com/en/tracks/web)
FTP, Domains, Hosting, Servers, DNS, Templates, jQuery, that comes down the road organically.
Just sayin’ :)
The whole point is giving yourself stakes. Signing up for some learning service is great, but if you’re just watching how-to’s with nothing your building on your own for your own reasons, you stand a higher chance of fizzling out. Having your own thing in which to learn in the context of, priceless.
Here is my version of understanding of…
Topic is all about how to prepare the things to get started with the design.!
But, Additional to that, Chris had given a simple idea to design (:just kidding:).
My understanding revealed around Get Started
Disclaimer: Its my understanding, Sorry! if it hurts!
@Yeswanth, nope, it doesn’t hurt in the least because IMHO Chris’ list is more about “How To Get Started Uploading Your First HTML File To Your Hosting” than really how to start being a web designer.
Before anyone can get started on Web Design they HAVE to, first and foremost, learn to design. You know, design concepts like Proximity, Hierarchy, Proportion, Alignment, Pattern, Rhythm, Contrast, Balance”, etc, etc, etc… (Actually check these awesome posters about design concepts built on paper I just bumped into).
Once you learn and understand those concepts that’s when the steps described here by Chris become invaluable to level up and be better at being a web professional.
Excellent post…I have to teach a class on this very thing…buying a domain…linking it to hosting…and getting your files online…I am positive this post will help many students learning web design.
Thanks for writing it…
Michael!
This could be interpreted as either “Wow, this is amazing!” or “Wow, this is risky business.”
In fact, both are correct. As that power courses through your veins, remember that with great power comes great responsibility. Don’t put up anything you don’t want the world to see. As you get more involved in programming (even just JS), don’t forget about potential security issues.
Glad you pointed this out, Adrian. This article should also endorse SFTP rather than the standard of FTP at the very least.
Great post, while reading this just reminded how hard it was before 10 years
I thought it would be something related to core designing but never mind as usual you shared some really valuable information for your readers. Nicely instructed with clear pictures, anyone can understand and work, following these steps.
Regards
Saoumy Roy
One can use GitHub Pages to host static content.
Jekyll helps you make static blogs on github pages as well :)
A month ago when I really started to develop a greater interest for setting more time aside to learn fundamentals of web development, I would have jumped at a post like this. As a matter of fact I’m sure I spent countless hours looking for some “how-to” type of guide that would get me up and running. I must say that after having spent some time creating a foundation (with the help of Chris’s lodge videos, YouTube, books, and forums) that this blog can be better appreciated.
Namely that there will be people out there who will follow this step by step, using Hover for getting their domain name, and MediaTemple for hosting (IMO kind of pricey if you are just looking to have a personal site). I think that maybe before spending money on domain and host that time should be allotted to understand what all these things do first?
I’m just kinda working through a thought here, considering I am relatively new to the forums and development process. This is merely a suggestion that perhaps is already obvious enough but thought need be mentioned.
That part of giving yourself stakes is brilliant, but the nuts and bolts that come after should have had a little more space in the article.
Please, suggest a good FTP for Windows.
@Mahir
Filezilla is cross-compatible. https://filezilla-project.org/
Cyberduck is another good one. https://cyberduck.io/
I use both with my students. :-)
For a text editor/ftp client combo like mac’s Coda you can use Notepad++
http://notepad-plus-plus.org/
FTP client and file manager in one: Total Commander (formerly know as Windows Commander). I’ve used it for more than 10 years and no other FTP tools/File managers I’ve tried, including FileZilla, come close to the speed of using Total Commander. EASY to use too.
And if you are a Sublime Text fan, Sublime SFTP plugin is the way to go.
This is great, Chris! I recently started teaching a friend web design and I found myself guiding her through creating a github account, downloading a Git client (instead of ftp) and setting up github pages (instead of buying hosting). What do you think about this approach?
Another approach could be to install and use XAMPP or WAMP on your local Windows or Linux system.
This way you have the complete infrastructure to run your own local website to try out things first.
In addition to this you will also get everything you need to do some server side development including the database MySQL and PHP to create and enrich your HTML pages.
As an IDE for creating web pages I use and recommend NetBeans that has good editors and also includes various integrations to revision control systems like GIT /GitHub.
Give it a try, it’s not that difficult :-)
HOW TO GET STARTED IN WRITING
(1) Buy a pencil, pen or typewriter (or all)
(2) Buy some paper
(3) Buy a dictionary
(4) Think of a something to write about
(5) Think of a story title
(6) Write that story title on a piece of paper
(7) Feel the power course through your fingers
(8) Struggle.. then find a similar story and use it as a basis for your story.. in your own words
(9) Do something with it
(10) CONGRATS – You’re a writer
*Just because one CAN write does not make them a “Writer” – this article would best be titled “How to get your own web domain.” not “How to get started in WEB DESIGN”.
Lol you nailed it. I agreed with most part of it but where it got to the get a template part (8) I totally disagreed
I wish someone had given me the advice of separating my domain name and hosting when I started. You pretty much never change your domain name, but hosting can change with your needs, so having the two separate is nice.
Nice and funny post! I remember my very first attempt at creating my own website was this thing called Piczo where you can have your own web page thingie. And all I did at first was try to change colors of text and stuff like that. Not understanding anything at all.
And now years later it just makes me laugh at how horrific those web pages I created were, and how absolutely proud of them I was!
Just as a side note, there are some great hosting sites out there that offer all the stuff in one place. I use One.com sometimes, although they only give you one DB per domain. But it was a great site to start off with, especially since I had no idea what all that server stuff meant.
I realise there’s a difficulty curve, but I think it’s pretty irresponsible to encourage people to use unencrypted protocols like FTP.
SSH is not significantly harder to use than FTP (unless you optionally take it beyond user:pass and get into public/private keys). Many dominant FTP clients like Cyberduck often include SSH compatibility, so new users don’t miss out modern UIs, etc.
Not every web designer is a developer. A lot of web designers are afraid of CLI stuffs so I don’t think that should be in a get started to web design page
“Not every designer is a developer” When talking about SSH we are referring to SFTP… And no, you don’t even need to do any command line work. In FileZilla it is a matter of going from ftp:// to sftp:// simple as that. If you are a competent well rounded designer that follows best practices, you will easily configure an SSH server.
And no, there’s no excuse to say that SSH configuration shouldn’t be in a beginner’s guide. It is a must know!
Remember, the more skills you possess, the more valuable you become!
I’m a developer and I use *nix most times. I’m familiar with all these but I’ve worked with designers who I even had to put through git. If someone couldn’t do git, how will they generate SSH keys? I mean designers that have lived all their lives on Windows but managed to know how to do HTML and CSS in a text editor
I totally agree with this. SFTP doesn’t require that much more of a setup and most of the time you can talk with your host about how to do that. Security culture is very important and our industry doesn’t care about it as much as it should. Would you ever tell someone to use Root as a username or Password1 as their password, or would you tell someone to use non-HTTPS Facebook over wi-fi?
Pure FTP has its uses, uploading business sensitive or mission critical data, even if it is simply just a login to a static site is not one of those intended uses.
Great article for sure! The only step I believe deservers some improvement, its in regards to FTP. I believe that simple old fashioned FTP is ineffective and solutions like SFTP should be taken into consideration. While using regular FTP all credentials are sent through the Internet in clear-text, instead, with SFTP everything is encrypted.
Cheers!
Why is it better to have your hosting and domain separate?
I footnoted that at the end of the article. I’ll point you at that instead of reposting here in case it ever needs updating.
When the hosting company indicates that it times to renew your domain name, couldn’t you just let it expire and then repurchase it from a different company?
Thanks for the share, I recommend starting with Cushy CMS for a content management, its super easy and all you have to do is wrap what you want to be editable in DIV’s. My friends always want to start in web design but hire someone to do their design, not a good start!
Thanks!
Seems like we need a “deploy to domain” button on codepen so we can start with fun and end with deployment.
Mind blown.
Hehe no. Most users just use codepen to demo and then embed or link to full codepen page. The button will only be of use to 5% users and as a developer I’d rather not do something for that little percentage
Thanks for this post chris, it actually looks like what you talked about on pencil vs pixel show sometimes ago. Its really cool going back to the basics on how to start web design.
Completely agree with this because I went the whole route of buying books and signing up to Treehouse and lynda.com to learn web design. There’s so much information that it can seem far too overwhelming on where to even begin. I followed all their how to’s and yet it just wasn’t clicking for me as although I’d understand what was being said I found it hard to go away and implement it myself. 8 months later I packed it all in. I think Chris’s idea of actually starting with something of your own and having it live and accountable, is a great way to discover things naturally. Then with everything you learn you can implement it on your site and see it living and breathing. I will begin a site at the weekend now using this mentality, and hopefully I’ll be further on in 3 months than I was when I was going through all those endless hours of training videos. Thanks Chris
I agree with Filezilla for FTP. Great intro to the steps involved for people who just want to get something live.
Don’t forget local tools like MAMP for WordPress and SimpleHTTPServer for HTML5 in a terminal. What’s everyone’s experience been like using GoDaddy and Bluehost – any preference?
I’d rather go for over than Godaddy for my domain purchase and I love bluehost hosting service. I appreciate everything about it compared to others I’ve used. (These are just my preferences anyway, may not be best).
I meant hover where I said over :)