Web Development

Building a website or a web application is no simple task. It’s a process with a whole lot of steps. However, fret not, there are plenty of tools to help you in this process. The task of a web developer can be mainly divided into 2 parts: front-end and back-end. Front-end refers to the part of the website that the visitor can see and interact with (the client), while back-end refers to the server-side mechanisms that interact with the databases and other cloud services (the server).

A great resource that can help you get started with web development is Free Code Camp. To have a solid foundation in web development, doing the HTML5 and CSS (5 hours) as well as the Basic Javascript (10 hours) courses would be a great start. Once you finished those, you can look into other courses such as Bootstrap and jQuery to sharpen your skills. There are also some courses on Node.js and React.js available.

HTML (HyperText Markup Language)

HTML is the most fundamental language in web development. When you visit a website, your browser downloads the .html file from the server and displays the content from the HTML code. Basically, the point of a browser is to read HTML code (as well as CSS and Javascript).

HTML is very beginner-friendly, as all you need to start coding in HTML is Notepad and a browser. If you want to do web development, HTML is a must-know. Here's a guide that will teach you all you need to know about this language.

CSS (Cascading Style Sheets)

CSS is used to complement HTML. While HTML is great for displaying the content of a webpage, CSS focuses on the presentation of that content. Let’s say you have a paragraph of text on your website. Maybe you want it to be blue, to have a Calibri font with size 56, to show text shadow and to grow bigger with an animation when you hover it. CSS got you covered. To use CSS, you can either write the CSS code directly in the HTML code or in a separate file.

Beginner’s guide

Exhaustive list of CSS properties found here

JavaScript

JavaScript is extremely popular and versatile programming language. Traditionally, JavaScript is used along with HTML and CSS for front-end development. However, there are many frameworks for JavaScript out there which simplify and extend its implementation. With the right framework, Javascript can be used almost everywhere, front-end and back-end. That’s why it’s a good idea to get familiar with this language before the hackathon.

There are plenty of resources to learn vanilla JavaScript on the web that are available with a simple Google search. Here is a good place to start with. You can also try W3Schools.

Complete documentation

Learn Front-End

Front-end of a website is defined as the user interface, as in what the user interacts with directly and how it looks from a stylistic point of view.

jQuery

jQuery is the most used front-end Javascript library. It offers many general-purpose features that makes the life of a web developer much easier. It’s a great tool to have in almost every web projects. Its main features include: Selection of HTML objects, event handling, creating animations and Ajax (which we’ll talk about later?).

To use the the jQuery library, you simply add a line importing the library at the beginning of your HTML code and you are set! There are many guides on the Internet that go into details about how to use the specific features of the library. W3Schools is good place to start. This guide will walk you through, step by step, everything you need to know to get started with jQuery. For a complete and more technical list of the features and how to use them, you can check out the official documentation.

AngularJS

AngularJS is another front-end Javascript framework, used for the development of web applications. By default, HTML creates static pages. AngularJS allows us to make the content of a web page dynamic and reshaped by the inputs of the users without passing through the back-end, by allowing us to use variables in HTML code.

To use AngularJS, you have to import it the same way as you did with jQuery (the details will be in the W3Schools guide). Again, W3Schools has a great beginner’s guide for AngularJS, which can be found here.

There is also a pretty good free course on Code School on AngularJS.

The official documentation for AngularJS is here

React.js

React.js is, again, a Javascript framework, which facilitates the process of building interactive user interfaces. For a static HTML page, once the page has been loaded, the content of the page doesn’t change anymore. React.js allows the content of your web page to change over time, which is key in user interactivity. If you want to build a web application, React.js can be a very useful tool for you.

If you want to start learning React.js, the official website has a great tutorial on how to build a simple tic-tac-toe game with it. It’s a good place to start. There are also many more intermediate and advanced guides on the official website.

Official documentation

Learn Back-End

Back-end on the other hand is what the user can not see but it is essential to the functioning of a website. Such as the databases and complex logic and algorithms running in the background.

Node.js

Traditionally, Javascript is used for client-side development: the Javascript code is embedded in HTML code and interpreted by the client’s browser. However, Node.js is a runtime environment which allow us to run server-side Javascript. This means that it is possible to create a server and interact with databases, all that with the familiar Javascript! Node.js uses a package manager called npm, which allows user to install external packages and modules very easily.

To transform your computer into a server and run Node.js code on it, you have to first install the runtime environment onto your computer. You can download it from their official website. To run a Node.js application, you have to use the command prompt and navigate to the path of the folder that contains the script you created. Then, you can use the node <filename>.js command to initiate the script. This will create a local testing server, with the address “localhost:<port number>”, that will run your script. A great beginner’s guide here by W3Schools. If you are planning on using external modules, here’s a beginner’s guide on how to use npm.

Official documentation for v8 here

Official documentation for v9 here

PHP

PHP is the most popular server-side scripting language for web development. PHP code can be embedded in HTML code or written as a standalone file. Just like any other scripting language, to run PHP code, the server-side system needs to have a PHP interpreter. The good thing with PHP is that it’s so widely used that virtually every server will support it.

Similarly to Node.js, running PHP code on your computer will require downloading and installing the interpreter here. To run a PHP script, you have to use the command prompt and navigate to the path of the folder that contains the script you created. Then, you can use the php -S localhost:8000 command to initiate the script. This will create a local testing server, with the address “localhost:8000”, that will run your script. For a beginner’s guide on PHP syntax and how to use it in HTML, check out Codecademy

Official documentation for PHP 7 here.