Min menu

Pages

All you need to know about learning basic web development languages

Web development is a large and complex field, and it has many uses at the present time, and if we want to put a definition or description of this field, we will say….

Web development is the whole process of developing a website that works on the Internet or on any private information network. This process includes many tasks such as; Website and interface design, defining a content management system, database management, engineering communication with the server to obtain data efficiently, protecting information and data, and other tasks whose complexity depends on the complexity of the site you are building.

For example, a simple website or blog is different from a large banking application, or a giant social networking site such as Facebook and YouTube.

All of these tasks and complex application development stages can be learned by yourself and very easily, and in order to do that, you must first learn the basics of web development.

And as you saw the title yourself, this guide will provide you with everything you need to learn the basic web development languages ​​HTML - CSS - Javascript.

What is programming in general?

A few days ago, we published a complete guide entitled “What is Programming”, which explains in a simple and practical way everything you need to know about programming.

Let me show you glimpses of it:

1. Programming is a means by which people can communicate with a computer to give it the instructions it needs to carry out a particular task.

If we want to define programming academically, we will say; Programming is the process of building and designing computer programs that any computer can understand, in order to perform specific tasks – such as arithmetic, drawing, or storing and storing information.

2. A programming language is a means of giving the computer instructions in an easy way that humans can deal with.

The computer is a stupid tool that only understands the language of electricity, is it open or closed, and from here scientists have developed a system that enables us to write the instructions that we want the computer to implement in a certain way, and then translate them into the language of electricity that the computer understands, or as it is called “the language of binary numbers” Code “

3. All this led to the emergence of many programming languages, each language has a specific way of writing, which is known as “Syntax”

I advise you to read this guide yourself, you will find additional information on terms such as “algorithms - programming patterns - programmer function”, and others … explained in a simplified way with practical examples.

After you have completed this guide, you will have a general knowledge about programming and what it is, its specializations and its various applications... Now let's delve deeper into talking about web development, which is the most prominent programming specialization in our time.

What is web development?

As I mentioned earlier; Web development is the process of building websites or applications on the Internet in all its stages... Each site or application has different requirements.

The more a site or application depends on changing content, or depends on dealing with many users and collecting many data, the more complex it becomes.

Let me give you some examples:

1. The Winners website that you are reading these lines on now. If anyone else visits this same page, whether from his computer or his mobile phone, he will not find the same content? Same words and pictures?

This is what we call static pages, and it's the easiest to develop.

2. The only thing different or changing between any visitor to this page will be in the ads he sees on the site, those ads you saw above change from one user to another.

You yourself, if you visit this article at a later time, you may find advertisements other than the one you are viewing now. These ads are managed by a special system or script… I want you to remember this example well because we will talk about it later.

3. Social networking sites are an example of giant web applications, which depend on dynamic content. Every user when he visits Facebook sees different content than other visitors in most cases.

Even static content such as page posts or Facebook groups that any visitor can view depends on a lot of data and variable inputs such as number of likes and comments…etc.

This type of application is perhaps the most difficult in terms of development, because it needs huge capabilities to process this huge amount of data and to constantly update services and protocols.

4. I think that in the recent period you were following the statistics of the global epidemic that spread in all countries... Do you remember the pages that used to display the changing statistics in each country?

Like the maps on the World Health Organization’s website, whenever you move the mouse over any country on the map, it shows you the numbers of injuries and deaths, and it is also distinctive that this data is constantly updated.

This is an example of a web application based on variable content but it is very simple … In the future you can build applications like it especially after you learn the basics that I will show you in this guide.

5. The websites of banking services and telecommunications companies that show you your account information, your balance and several different services; They are also examples of complex web applications, which depend on changing content, and at the same time on layers of protection and handling of funds.

Each application or website from the previous examples goes through certain stages of development, do not worry, you will learn later the most important of these stages and the functions for which the web developer is responsible and how to perform them.

Why do you want to learn web development?

I'm not talking about the primary goal you're trying to achieve from learning web development languages...like:
  • Get a job
  • Starting a freelance business
  • Change your career
  • Create your own project 
Keep up with technological progress and learn the necessary skills to benefit from it

What I'm talking about here is what you want to develop, is it:

  • Is there a specific problem you are currently facing that you want to solve with different web development skills? 
  • Have you seen a site you like and want to learn how it was developed in order to create a site like it for yourself?
  • Do you have something important in your work or studies that drives you to learn web development? 
Believe me answering this question is very important… There are a lot of people who are interested in learning web development just because it is a trend… because a lot of influencers and online content creators are talking about it.

Determining a specific reason, motivation or passion to learn any new skill is the main pillar that helps you continue to learn and develop yourself... If you start your journey in web development without that, you will stop and will not complete the journey.

I had to ask you this question, the point of this guide on learning basic web development languages ​​is not just to show you a bunch of resources or courses.

Rather, the goal is to really help you overcome any obstacle that stands in the way of learning and developing yourself…

With this, we have finished talking about the general points that help to break into the world of web development while you are standing on solid ground ... Now let's get acquainted with the most important specializations in this field.

Web development majors

The field of web development is a large and interconnected field, and contains so many disciplines and tasks that it is difficult to categorize or even categorize.

But in general, there are 3 specializations that contain all the tasks that a web developer performs, no matter how different the site or application they are working on; she:
  • Front-end Developer. 
  • Back-end Developer.
  • Full-stack Developer. 
Let me explain these disciplines to you in a practical way… I want you to now think of the developers who work on Facebook as follows:

1. Any developer who works on how to display posts, news and comment boxes, and determine where users' data goes to store them from names, passwords, images, etc... is a front-end developer.

2. Any developer working on recording and collecting this data and how to save it so that the same user can find the same data when logging in from any device or place in the world, and how to perform direct calculations (such as what you find in games) … He is a back-end developer.

3. As for the comprehensive developer, he is the one who can use a specific set of programming languages ​​and tools to build an integrated application. Imagine, for example, a developer who can do all the previous tasks together.

An end-to-end developer is often an expert person, with a fairly long experience in the field of web development, and is often the manager or administrator of the development team in any company or organization.

Now that you are familiar with the majors of web development in general… let’s delve into this world and start talking about the main element of this guide.

What are the primary web development languages?

There are a lot of tools and programming languages ​​that are used in web development, but there are key pillars that every web developer can do without.

These columns are the basic web development languages ​​(HTML - CSS - Javascript), which we will talk about in detail through the following elements.

HTML

Almost no web page is based on HTML, the skeleton we rely on to build any website or application.

The word HTML is an abbreviation of Hyper Text Markup Language, and its translation in Arabic is “Hyper Text Markup Language” … This language was developed in 1993 by the famous programmer Tim Berners-Lee, who is considered the godfather of the Internet.

The main goal of developing HTML is to facilitate the process of sharing information and files between different computers on the Internet... At the beginning of the spread of computers and the development of networks, it was difficult to share and exchange information.

Each device has a different system and protocol by which it displays information, hence the need for a unified way to display information that any computer can deal with, and this is the main factor in the development of the Internet as we know it today.

HTML defines the basic components of any web page such as:

Basic links to access the pages.
different titles.
Place various files such as photos and videos.
Determining the auxiliary elements such as (the places of the buttons - data forms) and others.
For example, when we specify the title of any page, we write it in the following way “<title> here is the title </title>”.

Do not worry, you will learn how to use this easy and simple language, and you will learn about the most famous tags used in it, the ones we write between parentheses that resemble the “greater than” and “less than” signs.

CSS

If HTML is the skeleton of web pages, then CSS is the flesh and skin that shapes and defines these pages.

Let me show you the effect of CSS for yourself:

1. Add this tool to the Google Chrome browser. After adding it, a list will appear under any link you visit through Google Chrome.

Click on the CSS menu and then click on Disable Styles and then choose Disable All Styles, you will see for yourself what the page you are visiting looks like without any CSS...just HTML.

2. If you are using the Firefox browser, the matter is very simple… Press the Alt button, a menu will appear at the top of the page, click on View, then choose Page style, then No style.

As you've seen for yourself, CSS is responsible for splitting pages, displaying information, organizing it and changing the colors of any web page... That's why I told you earlier that it represents the flesh and skin that gives shape to the skeleton written in HTML.

The word CSS is an acronym for Cascading Style Sheets, and its Arabic translation is “Cascading Style Sheets” … This language was developed in 1996 by many programmers, and its updates are managed by the World Wide Web Consortium - W3C.

If you check out this great article, you will see for yourself what websites looked like in the late '90s, and how their shapes and colors changed with the development of CSS.

It is worth noting here that HTML is not a real programming language, you cannot use it to perform any arithmetic or logical operation, so it is called Markup Language.

CSS is also just a tool used to clarify and change the appearance of this markup to clarify different elements, and make browsing the web and highlighting information and elements easier.

Javascript language

Javascript is the third leg of the web development triangle... It is the language that is used to display the variable content that we talked about earlier.

Remember the ad example? There is a small script that is responsible for displaying these ads on websites, but behind this script is powerful software that collects data about users, and displays appropriate ads for each person.

Any variable content on any site like:

  • Content that appears on the site after a specified time (such as notification boxes - registration application forms). 
  • Interactive maps (eg Google Maps).
  • animation
  • Media players (eg soundcloud player).  

It is often based on Javascript.

What I want you to know now is “Any programming language that is used with HTML and CSS in web development is the brain that thinks logically, displays and stores important and changing information.”

And Javascript is the most popular programming language in this field, as it is said “Javascript is the third layer of the delicious web development cake.”

This language was developed by Brandan Eich in late 1995 as a set of simple scripts, which were then developed into what they are today.

JavaScript language has many applications and uses, and there are many libraries and frameworks developed to make this language used in almost all fields.
  • You can use it in front end development of websites. 
  • Backend development using Node.Js.
  • Use it in mobile application development by React Native.
  • and even desktop application development by Ionic.js. 
Don't worry, you'll learn all of these tools and more in the near future... The most important thing is to learn the basics of web development and JavaScript to get on the ground.

So you can learn any new technology or tool very easily, and this is what I will show you in detail in the following items.

Practical tips on learning basic web development languages

As I told you before, every day in the world of web development there are new tools, libraries, frameworks, and possibly other programming languages ​​that you can learn and put to work.

You will get to know yourself as you learn from the sources I mentioned earlier, the most important of these tools, and if you want my advice, you should learn the React.js framework, because it is somewhat easy and required by many companies.

Now here are some quick tips:

1. Take your time to learn. Perhaps you are a student or an employee and your time is limited. Just try to learn and apply every day, even if for an hour.

2. Learning programming in general and web development in particular takes time, so it is never a problem to find some difficult concepts or things that you did not understand well, no problem. Try to find a source or another way to explain this to you, or leave it for a while later.

3. Do not worry if you forgot some code or markup, the most famous and best programmers in the world rely on searching on Google and on official programming languages ​​sites to find the codes they need, it is not important to memorize the codes as much as it is important to understand how they work and why you use them.

4. You have to learn the basics of UI-User Interface Design and UX-User Experience.

Especially if you want to become a professional front-end developer, I recommend this most wonderful course, which will not only make you learn the basics but also how to profit from learning this skill, especially if you love design in general.

5. Do not concern yourself with following a lot of YouTube channels, especially in the beginning, just be satisfied with one or two channels at most so as not to distract yourself.

6. I advise you to read, in the “best books to learn programming” guide, you will find a group of great books about web development and JavaScript, which I advise you to buy one of them.

Finally, I want to give you a very important tip; It is that you try to profit from learning programming or web development at the beginning of your career, in order to gain practical experience, and at the same time prepare yourself for the labor market if you want to get a job.

Comments