So you’ve decided you want to learn to code and build your own website but not sure where to begin? Below are suggestions of the web development tools you can use to get started.
Code Snippet Playground
If you just need a place to practice your front-end code, get a free account at codepen.io. Here you can use HTML, CSS, javaScript, jQuery and set up Frameworks like Bootstrap. I like using this website because I can start working on a project from home and then continue it on my lunch break while at work or at night from any location where I have access to a computer with internet access. Personally, I use this website as my “playground” where I put snippets of code to test and then later I can go back and copy/paste that code into a different website. I also use the site a lot for taking notes from books or other training courses.
Keep in mind codepen is not the place to build a complete website. This is more of a place for you to keep your code snippets of things you are trying to figure out how to accomplish.
I actually just started using codepen a few months ago. I started out with the free version but liked it so much I went ahead and got a paid version because it has a few extra features. You can follow me on codepen here: http://codepen.io/susanwinters/collections/popular/
If you want to build a complete website then you’ll need a place to hold all of your files for your projects. I suggest naming the folder the name of your future website then add a folder for images, styles, and scripts. You’ll keep your .html files at the root level.
Desktop IDEs
Now to open and work with those files on your computer, you will need an IDE (integrated development environment). An IDE is a software that helps you create websites. There are several free ones available and you can try out several of them to see which one you like using the best. Or like me, you may prefer to use a different IDE depending on your project.
I downloaded and installed Sublime Text when I was in college because this is the program that the instructor was using and it just made it easier for me to learn if I used the same IDE as she did. Sublime is a free download and available for both Windows and Mac.
Recently I downloaded a new IDE called ATOM. I like it so far but really haven’t had a chance to use it much.
You might also want to check out Brackets.
My all time favorite IDE is Visual Studio! But that’s because I started using it over 10 years ago so I’m just used to the environment. You used to have to pay for it and there are versions you can buy but I just stick with the free version. You can download it here: https://www.visualstudio.com/vs-2015-product-editions
Web Hosting
At some point you are going to want to place your newly created website on a web host server for the world to see. You’ll use a web hosting company for this because frankly, trying to set up a connection for the world to see files on your personal computer is time consuming, risky and downright more trouble than its worth. The cheapest place I have found for this is PlanetSMB.com They have a basic account for only $2.95/month.
FTP Program
In order to transfer the files on your computer to a folder on your web hosting account, you will need an FTP service. FTP stands for file transfer protocol. In the settings, you create a connection to the IP address of your web hosting account along with your username and password (provided to you by your web hosting company once you set up an account) then click the connect button. My favorite FTP program is Filezilla and you can download it for free.
Client Side Code vs. Server Side Code
When you are first starting out, its best to just learn HTML first, CSS second and javaScript and/or jQuery third. You’ll probably find that HTML and CSS are pretty easy to learn. I admit javaScript is a little bit harder and will take you twice as long to learn. But you don’t have to learn all of it before you get started! Just start with getting down the basics of what you need to build a web page. You can always go back later and add animations and things like that later. Once you learn HTML, you can build a website. But to make it pretty by setting the font styles and colors you will learn CSS.
“Client Side” means that the browser (IE, Chrome, Firefox, Safari, etc) will interpret the code to something the end user can view. If you want to be a “Front-End Developer”, you will just focus on HTML, CSS and javaScript. If you want to be a programming language (java, PHP, C#, etc.) you’ll do this after first becoming a Front End Developer. Once you know how to run the front and the back, your job title will probably be “Full Stack Developer”. In order for the back end server code to run, you’ll obviously need to place your code on a web hosting server in order to test it – unless you want to set up a server environment on your computer. That’s a little advanced for a beginner so I don’t recommend you take that route until you’ve been a Front End Developer for at least a year. Just save yourself the frustration and just concentrate on getting good at writing HTML, CSS and javaScript.
There are a ton of things you could learn but you don’t have to learn them all right now! There are several places you can get free or cheap training and I’ll write about that in another post. The purpose of this post was just to provide links to the most common tools used to get started in web development. Good luck on your journey.
susan winters 