Introduction to web development

Give me dah codes!

So a lot of developers and programmers have been eager to learn web development, either to add to their CV, or to build a site to showcase their work or to land that job in their dream company. And most of them are clueless about how it works and have mystified a lot of people. This article is designed to help demystify a lot of things, answer a few frequently asked questions and to give you a gentle ramp that you can use to launch your lessons in web development.

What is web development?

Web development is the art and science that goes into making websites, web applications and related software that goes into running, maintaining and updating it. It would include building front end components and pages, back end server side code, connecting a database to the server and connecting the backend to the front-end.

Front end? Back end? Servers? Databases?

The front end is the part of the website or web application that is visible to the users. It is usually built using HTML, CSS, Javascript and other exotic languages, frameworks and libraries that essentially builds on these three languages. This is the part that involves more art than any other part of web development and requires design thinking, to bring the design envisioned by the designers to life, to layout a page so that it is coherent and makes sense for the content and other assets, and to reflow and adjust for devices, operating systems, browsers, screen sizes, resolutions and so on.

The back end is the part of the website that the user will not get to see, but will be able to experience while using the website or web app. It usually contains the core logic, authentication and code to retrieve and store data to the database. This could be written in a variety of different languages with a new language being added virtually everyday. The most notable ones being PHP, Node.js, Python, Ruby, Java, C++ and so on.

A database is another part your website or webapp that users will not see but definitely will experience. It is software that runs and allows you to store and retrieve data easily using a simple API. A rift has been formed in the databases community with two factions forming, each supporting a different type of database, either SQL like databases or NoSQL databases. Each of them have their own merits and demerits and I suggest you read up about both of them before making the plunge into either one, depending on your project requirements. Some common databases include MySQL, MongoDB and PostgreSQL.

Servers are essentially computers that run all the time. This is where your back end code and databases run and all you code, assets and front end are hosted. During testing, this would be your local computer and the server is commonly called your localhost. When deployed, servers are most likely server space that is rented from a company like HostGator, Network Solutions, and so on. You can also rent a dedicated server if you have the money and would like a computer all to yourself.

How do graphics in HTML work? I can barely get a rectangle to render in C++

If your only programming experience is in a language like C or C++, it would be best to know that web development is nothing like that and there are a lot of new paradigms that would require a complete rethinking of what you know coding to be.C and C++ are very low level languages that have their merits in being really fast to run and are as close to the hardware as you can possibly get but completely lack in ease of use for tasks like Graphical User Interfaces and animations and User Interaction. HTML, CSS and Javascript on the other hand are very high level languages and do not compile to machine code and are not fast to run, not even by a long shot. But what they do offer is simplicity and ease of use to render UI elements, images and text and to have animations and to respond to user input. For example, to render an image on screen, you use

<img src=“‘…link to any image with its extension here” />

and you have an image rendered on screen! Animations and suer interaction is similarly easy to add and you can build a great looking website in no time once you master the basics.

Alright, you have my attention, I want to make a simple website and host it on the internet, how do I get started? Where do you learn the skills needed to do it?

Great! Web development is really easy to get into, and in my opinion, an essential skill, now hat practically our entire lives revolve around the internet, for work and play, for relationships and entertainment, its all out there on the web, and it would help to know how you can establish your presence there and know how things run on it. To build a simple website, you need a couple of things -

  1. A computer (Duh!) — It needn’t be a Cray supercomputer, or like the media likes to portray it — a MacBook Pro with a bunch of nerdy stickers on it. Any good old computer would do, and yes, that includes your Chromebook lying in a corner and picking up dust. It just needs to have a browser and must be capable of running a text editor (more on that below).
  2. A text editor — This is the tool you would use to program your website, and there are really a quintillion of them for your picking, most of them free, some of them paid, find one that you like and you can pick different ones for different languages if you prefer. Common ones include Vim, Emacs, Visual Studio, Xcode, Android Studio, Notepad++, Brackets, Atom and so on.
  3. A good knowledge in HTML, CSS and Javascript — I learnt most of what I know on a website called W3Schools, but there are a ton of online courses and websites that you can use to learn the basics including udemy, code academy, udacity and lynda.
  4. A local server — This would be used to test your website on your computer. A good free local server would be WAMP, LAMP or MAMP, depending on if you use Windows, Linus or a Mac.
  5. Some server space — This is where your website will be hosted. They can usually be pretty pricey so I would suggest using a free host like altervista or 000webhost while you’re learning and then switch to a paid one once you are more serious about web development.
  6. An FTP client — FTP is a protocol that is used to transfer files to and from your web host. The one I would recommend for anyone is FileZilla, it’s free and does the job really well.
  7. A domain name (optional) — If you are building a website for a business or as a portfolio, you might want to buy your own domain name. You can do this at GoDaddy, Network Solutions or This can be linked to your web host pretty easily and you’re all set to go.

Alright, I have everything, what now?

The first thing you’ll want to do is to layout your page in HTML. This is the skeleton for your website and will give it structure, defining where the text and images go, where the header and footer are placed and so on. Once you are happy with that, you will want to use CSS to polish up the layout and to and styling to your webpage. This would include colours, borders, shadows and so on. Finally, you will want to use JavaScript to add interactivity and animations to the webpage. Be aware that CSS can also be used to add a lot of animations to your page and might even be more performant, depending on your use case. Keep testing your website on your localhost to make sure it looks the way you imagine and make sure to test it in responsive mode and with different sizes of your browser window.

Once you are happy with your webpage, go ahead and find the credentials to your webhost in your control panel of whatever web host you chose to go with. These credentials will have to be used with your FTP client to establish a connection. After you establish your connection, you upload all the files needed for your website and you are good to go! That’s it, you have uploaded your first website, now go on and take over the world!