web-design-tutorial

Freelancing Beginners: Web Design Part 1 – Understanding Basics

Posted on Posted in Technology

For quite sometime I have been planning to start a tutorial blog series in web design to help college students start freelancing during/just after their graduation. I am really motivated by people like Bill Gates and Mark Zuckerberg who started their career during their college days and didn’t bother taking a degree, because I think knowledge and skills are more important than a college degree. Nevertheless a college degree is very helpful to shape your career.

For this course to make better sense it is preferable that you are an engineering student or in any other course related to computer science. But this is not a requirement, anyone who is willing, can learn web design.

Firstly we have to keep in mind that a website is essentially a software, which runs on top of other softwares which interact with the hardware(computers or mobile devices). A website cannot by itself interact with an OS like windows or linux. This is actually an advantage over other softwares like MS word. MS word runs directly on windows OS so it cannot run on a mac or linux computer. But a website runs on a web browser, so it is OS independent. The web browsers in turn interact with the OS, so there have to be different versions of the browser software to run in different OSs. But browsers already come with the OS, so we need not worry about it.

A web browser can read HTML, CSS, Javascript etc and display them in the screen. It is similar to a “C++” compiler like turbo C++ which only understands C++ codes and can display an output. The C++ code doesn’t directly run on the OS, but it needs a compiler. Similarly websites need web browsers to run.

Languages like HTML(HyperText Markup Language) are called “Markup” languages because they tell the browser how to stack up the contents(text/images etc) on a webpage. CSS(Cascading Style Sheets) defines rules to style the layout of the page. It is called “cascading” because we can put one stylesheet over another in a cascading manner and the last style rule of any element takes preference over the previous rules for the same element.

Javascript can be used to style a layout as well as output extra html into the webpage. It is used a lot for animations on webpages. Now-a-days javascript can be used as a server-side language(which we will discuss below) too.

At first websites were used to display information to the user. They were called static websites. With the evolution of the internet, websites needed to interact with the users like regular softwares. For this purpose server-side languages like ASP, JSP and PHP etc were developed  and “programs” were written with them.

These programs run on the server(a remote computer) and implement logic to interact with the viewer of the website. These remote computers actually have softwares called “servers” like Apache, Tomcat, IIS etc. on top of which server side programs run. This is similar to running html on web browsers.

Keep in mind that web browsers can understand only html, so responses generated by these programs on the server are sent to the user’s web browser as html. The exchange of data between the user’s computer and the remote computer(server) is governed by a protocol(set of rules) called HTTP(Hyper Text Transfer Protocol).

Here I’d like to advice you to read a book on CCN(computer communication networks) to better understand the underlying workings of the internet. I neglected it during my graduation and I paid for it.

So we can summarize as follows: On a user’s computer, html runs on the web-browsers. On a remote computer, server-side programs written in PHP etc runs on a server-software like Apache. The server sends html to the client(user)’s web browser by a set of rules called http. These html are displayed in a proper style with the help of css and javascript sent by the server along with the html. As a result the user sees a nice page called a webpage with which he/she can interact. These type of websites are called dynamic websites or even sometimes web applications.

Our goal in subsequent tutorials will be to write these html/css/javascript files along with server-side language(php) programs and install them in a server-software(Apache) in the local computer(your own computer) or a remote computer, and make it possible to view it in a web browser.

 

 

If you liked this article please comment and show your support and interest so that I’ll be motivated to continue this effort. Like our facebook page if you haven’t already.

P.S. There are a ton of awesome articles/video tutorials on the internet. I personally learnt web design through those. So please check out those too. If you want me to start a discussion forum, comment below.

Comments

comments