<htmljoe/>

Beginning Web Development Made Easy

Web development is a broad term for the work involved in making websites and other web applications for the Internet or a local Intranet. It ranges from making simple static web pages, to creating complex applications like Content Management Systems, Social Networks, and Search Engines. Among many web professionals, web development mainly refers to the non-design aspects of building websites such as writing markup and coding.

Web developers generally fall into three main categories: Front-End, Back-End, and Full-Stack. A front-end developer is responsible for the behaviors and visuals that run in a user’s web browser. A back-end developer is one who specializes in the behind-the-scenes server functionalities. And A full-stack developer is someone who works on both the user-facing webpage and the back-end server functionalities; a jack of all trades.

In order to help facilitate understanding of web development as a whole, this set of tutorials will focus on full-stack development. Understanding both the front-end and back-end perspectives will help to teach how each side affects the other in a development environment, and will hopefully make you a better developer no matter which path you choose to take in your career. Let’s get started.

Setting up the Environment.

Setting up your computer for web development doesn’t have to be a complex ordeal or expensive. In fact, one can usually find the tools required for free. You already have a web browser, so testing your front-end code and static web pages is easy. For back-end code, you will need some way of running it in a server on your computer unless you plan on uploading to an external server for every test. But that wastes a lot of time and makes for an inefficient development experience.

Personally, I use XAMPP to setup a local web server on my computer. I save my project folder to XAMPP’s htdocs directory, and when the server is running, testing my webpages’ back-end is as easy as refreshing the page in the browser. XAMPP is a free program created by the non-profit Apache Friends, and is available on Windows, Linux, and OS X operating systems.

For coding and writing markup, we need an editor. This can be a simple text editor like Notepad(yes, the same one included with Windows), a full fledged Integrated Development Environment(IDE) like Visual Studio, or any of the multitude of programs in between. There are so many to choose from, and many are completely free to use. It’s up to personal preference what you use here. Personally, I am partial to using Notepad++ and Atom. Both of which are free.

The Code Behind the Scenes

There are three main code languages used when creating a webpage; HTML, CSS, and JavaScript. HTML, which stands for Hypertext Markup Language, is a markup language used for creating the structure and displaying the content of a webpage with HTML Elements. CSS, or Cascading Style Sheets, is used to define the styling of those HTML Elements and has the ability to style a webpage differently depending on the device used to access it, e.g., responsive webpages. And JavaScript is a scripting language which can be used to add dynamic effects and functionality to a user-facing webpage.

For server-side code, web back-ends are typically written in PHP, SQL, ASP.NET, or Python. PHP, ASP.NET, and Python are programming language which can be used to create web applications. They each have their advantages depending on what you are building, and when preparing to begin your application a decision should be made as to which programming language will be most efficient for it.

SQL is a domain-specific language used for accessing and manipulating data stored in databases. It is particularly useful in handling structured data where there are relations between different entities/variables of the data. You would use SQL when you have dynamically or user-submitted data that needs to be stored on the web server in a database.

Going Live

After you have created your website on your computer, it’s time to put it online for other people to use. For this, you need a web host. A web host is a server or service which, like the name implies, will store the files online and make them accessible to the rest of the Internet.

If you are just getting started, or just don’t have a lot of money to invest in your new hobby, there are also free web hosts available. Though, free usually comes with some limitations here. Make sure to read their Terms of Service contracts carefully to find out what types of content they allow, how you may use their services, and what you must do to keep it active.

If you want a suggestion for a good free host, I have used x10hosting‘s free hosting for many years without trouble before upgrading to a paid hosting plan.

When you need more features and performance out of your web host, eventually you may need to purchase a premium hosting plan. There are many good choices here including but not limited to x10premium, Namecheap, GoDaddy, and Wix.

Once you acquire a web host, all you have to do is setup any databases you may need using their control panel and upload your website to your new web server via FTP or their web-based file manager. As long as your account remains active, and the server doesn’t experience any outages, your website will be online and available to your users.

Outro

So, that’s a simplified overview of what web development is. Future tutorials will cover specific aspects of creating websites and will delve deeper into what I’ve summarized here.


Leave a Reply