Web Development - Roadmap for Beginners

In this article, we will talk about web development. This article is aimed at beginners who want to enter this field. We will discuss the proper and practical sequence for developing websites, their sections, how to study them, and how to apply them.

The Current Programming Reality:

We won't discuss the benefits of the internet and its importance out of respect for the reader's intelligence. It is no longer logical to talk about this matter at the present time because our lives are entirely connected to the internet. This connection extends through websites, mobile applications, numerous household and office electronic devices, all of which are directly linked to the internet. Additionally, it includes various forms of transportation, whether land, sea, or air, and much more that cannot be enumerated.

But what we will discuss is the current state of the programming world. In the past, programming was exclusively reserved for individuals with university degrees in the field. However, the current situation has opened up programming to everyone, no longer limited to those with university degrees. Now, anyone can enter this world, learn it, master it, and compete with degree holders. Some software companies now hire individuals capable of programming regardless of whether they hold a university degree in programming or not.

If you're not a programmer, regardless of your age, we want to tell you that the field is still wide open for you. We advise you to learn with the intention of earning from this field, not just to acquire a new skill.

Ways to Create Websites:

Currently, there are two ways to create websites, the first method is using ready-made tools, and the second method involves developing websites using programming code.

The First Method: Using Ready-Made Tools

If you have no prior knowledge of programming, this method is suitable for you. Nowadays, there are editors with high capabilities that allow you to create websites in record time through selection, drag-and-drop, and filling in the blanks. In addition to ready-made templates and accompanying design tools, the result you'll achieve will be impressive, with high capabilities and visually stunning aesthetics.

There are numerous examples of editors that can be used in this method, and here are some of them:

WordPress / Hostinger editor / WooCommerce / Wix / Webflow / …

However, this method will keep you within limits that you may not be able to surpass if you don't have familiarity with the world of software and coding. If you find that the website you created using this method needs modification, and after extensive research into the capabilities of the editor you are using, the templates you have employed, and the accompanying design tools, you can't find what you're looking for, you will encounter a barrier that is difficult to overcome. You may become frustrated with the available tools at your disposal and find yourself trying to work around the required modifications to achieve something close to your desired outcome.

And sometimes, even those who have programming skills may find that the modifications they need to make require tremendous effort, are exhausting, and consume a lot of time.

Therefore, this method is excellent for static websites that do not require constant content changes, such as companies looking to create websites for branding, showcasing their products, and providing other mostly static information. This method can also be suitable for creating content-changing websites on a daily basis. However, in both cases, whether for a static or dynamic content website, the website creation will remain within the capabilities of the editor, ready-made templates, or accompanying design tools.

The Second Method: Developing Websites Using Programming Code

This method gives you complete control over the website you create and doesn't limit you to capabilities that are hard to overcome. It provides you with high flexibility to make changes to the websites you develop, regardless of the type or size of the modification.

This method relies on programming and writing code, and one drawback is that the learning curve can be very long, with a vast array of branches, and creating using this method can be time-consuming.

However, if you learn the right way and become proficient in the programming languages you need for this method, you will be in control when it comes to web development. The websites you create or modify will be like clay in your hands, and you will be able to shape them as desired, no matter what.

We assure you that after some time, you may lose interest in creating websites using ready-made tools (if you're using them) and start to enjoy developing websites using programming code.

Fundamentals of Web Development:

When starting to learn any field, you begin with the basics before moving on to more advanced concepts.

In the world of web development, there are fundamentals that must be learned, fully understood, and mastered before progressing to other stages.

The fundamentals of web development are:

1. HTML
2. CSS
3. JavaScript
4. PHP
5. Database Management Systems (DBMS)

HTML (Hypertext Markup Language)

And this logo is the famous logo for HTML, and you can notice the number 5 written on it because the latest version of this language is the fifth version.

CSS (Cascading Style Sheets)

And this logo is the famous logo for CSS, and you can notice the number 3 written on it because the latest version of this language is the third version.

JavaScript

And this logo is the famous logo for JavaScript.

PHP (Hypertext Preprocessor)

And this logo is the famous logo for PHP.

DBMS (Database Management system)

It is a database management system where databases are created and interacted with using a specific language called SQL (Structured Query Language). One of the most popular types of these database management systems is MySQL.

Categories of Web Developers:

There are three types of developers:

The first type: Front-end Developer

This developer specializes in front-end development, which involves creating the user interface that users see and interact with in their web browsers. They use HTML, CSS, and JavaScript to develop the front-end.

The second type: Back-end Developer

This developer specializes in back-end development, which involves working on the server-side of web applications. They handle databases by inserting, retrieving, modifying, deleting data, and other data-related tasks. Back-end development is typically done using programming languages like PHP and Database Management Systems (DBMS).

The third type: Full-stack Web Developer

This type has the ability to develop the entire website, starting from the front-end and ending with the back-end.

The correct sequence for learning languages:

Here, we mean that there is a specific sequence for learning languages, and not adhering to this sequence and learning in a random manner will increase the time it takes to learn these languages.

In addition, it's important not to move from the current language to the next language until you are confident in your accurate understanding and complete mastery of the current language.

There's another aspect to the learning path, and it will vary depending on the type of developer among the three types we mentioned earlier.

The following image illustrates the correct sequence for learning languages:

Notes on the picture:

1. If someone wants to become a Front-end developer, they should follow the order listed under the Front-end section, which is HTML, then CSS, and then JS.
2. If someone wants to become a Back-end developer, they should follow the order listed under the Back-end section, which is PHP and MySQL together because they go hand in hand. Learning the first in Back-end requires learning the other at the same time since back-end development relies on both of them together.
3. PHP used to be the primary language for website development before JavaScript existed. There was overlap between the concepts of front-end and back-end development. However, with the introduction of JavaScript, front-end and back-end development each have their own distinct worlds. Consequently, PHP is now primarily used for back-end development.
4. If someone wants to become a Full-stack Web Developer, they should follow the order listed under the Front-end section and then the order listed under the Back-end section.

What comes after the basics:

After learning the basics thoroughly and mastering them, you proceed to explore what comes after these fundamentals.

What is meant here are frameworks and libraries built on top of these fundamentals.

The goal of frameworks and libraries is to simplify and speed up development when using them.

In other words, if we wanted to create a piece of software using the JavaScript programming language, and then wanted to achieve the same thing using one of the frameworks or libraries built on top of JavaScript, we would notice the difference in the number of lines of code and the coding style. Frameworks and libraries often streamline many lines of code and accomplish the same task in an easier and faster way.

The following images illustrate some of the most popular front-end and back-end frameworks and libraries built on top of the fundamentals. Please note that these images contain only a selection of the most popular frameworks and libraries, as there are many more.


However, we cannot say that these frameworks or libraries are a complete substitute for the fundamentals because frameworks and libraries, as we mentioned, contain ready-made commands. But sometimes, you may find yourself needing specific commands, and after extensive research within frameworks and libraries, you may discover that the commands you want are not available. In that case, you'll resort to the fundamentals to create these commands yourself.

Therefore, mastering the fundamentals is a prerequisite, and do not attempt to move on to learn frameworks or libraries and work with them if you haven't yet mastered the fundamentals.

Note on the second picture:

Regarding the Back-end, we previously mentioned the programming language PHP, but in reality, there are more than one language that work on the back-end, such as the languages listed in the picture, like Python and JavaScript. However, PHP was mentioned as an example because it's one of the most commonly used languages for back-end development.

This doesn't mean that the other languages are less valuable; PHP is simply one of the oldest and most widely used among them.

The Laravel framework, which is designed for PHP, has further increased the popularity of this language.

Another note:

On the same picture is that there was no mention of any specific database management system (DBMS), the reason is that database management systems are more like the storage facility where data is organized, and there won't be a storage facility built upon another storage facility. This is unlike programming languages, which form the foundation upon which frameworks and libraries are built.

Learning Resources:

After getting a grasp of the basics, frameworks, and libraries, it's time to start learning.

Learning resources are plentiful. They include physical books and e-books, training courses both online and in classrooms, the famous website YouTube, documentaries available on companies' websites that have created the fundamentals, frameworks, or libraries, and many other sources.

If you're seeking advice on the best starting point for learning, it's recommended to begin with YouTube. This is because YouTube offers a vast number of videos covering these fundamentals, frameworks, and libraries. These videos are continuously evolving with various explanations and tutorials.

Method of learning from YouTube:

When starting to learn a programming language, and if this language is completely unfamiliar to you and you haven't worked with it before, there's a stage you must go through, and this stage is called the “Familiarity Stage”.

What is meant here is that you should make this language and its code become familiar to you.

To go through this familiarity stage, initially, the goal of watching some videos is not to learn, but to make the language and its code familiar to you by following more than one video about this language.

To clarify further, let's take HTML as an example, assuming you know nothing about this language.

 

• In the beginning, you should start by searching for the shortest video that introduces this language. It could be an introductory video that is no longer than ten minutes. Then, watch the entire video to the end without doing any practical exercises.
• Then, after that, look for a slightly longer video, for example, around half an hour, and watch the entire video to the end just like before, without doing any practical exercises.
• Then, search for three videos with durations ranging from one hour to three hours, and watch these videos to the end just like before, without doing any practical exercises, similar to the previous ones.

After these videos, you will find that the language's code has become familiar to you, and you will notice that many of the code elements have been repeated, making you more aware of their purpose and how to use them.

After this, you can revisit these videos and start applying what you've learned practically.

. In the beginning of the practical application, you should follow the instructions given by the instructor in the video and apply them exactly as instructed.

. And if you achieve the same results as demonstrated in the video, you can proceed to the practical application with your own additions and modifications.

So you try to add code in one place, remove it in another, repeat code in a third place, or add, remove, and repeat in the same place. You can also partially delete some elements to see their impact.

After adding your own touches, observe the results that appeared. If the results are positive, you will have learned how to achieve them. If the results are negative, you will have identified the reasons for them, allowing you to avoid them later on.

. And if you reach a specific point that is unclear and find yourself in need of additional information, start searching for this point directly in one of the search engines. This search process is very important because it will not only help you find the information you are looking for but also provide you with additional information on the topic of the search or related topics that you may not have intended to search for.

By following these steps, you will reach advanced levels in the language and develop a strong understanding of it.

After this stage, it won't matter if the video tutorial is lengthy because you will be prepared to tackle any educational series that may span for ten hours or more, applying what you've learned just as you did with the previous videos, and the benefits will multiply.

The problem of forgetting what has been learned:

Many beginners face the problem of forgetting what they have learned, either due to the amount of new information or due to taking a break from learning and then returning. Some professionals may also encounter the same issue if they take a long break from their work.

To solve this problem, you may find many people suggesting that the solution is to practice what you have learned.

And we emphasize their words, but this is not the actual solution because professionals may encounter the same problem even though they have passed the learning and application stage and have moved on to the creative development stage. However, if they experience a break for a period of time, they may find themselves in need of reviewing some information.

The solution to this problem is to review what has been learned.

However, some beginners may find themselves lost during the review, and they may feel compelled to start over, which is a problem in itself because it consumes time and effort. Some individuals might even get discouraged and stop studying.

Therefore, the best methods of review involve creating a reference that each learner constructs themselves.

There are several forms of review:

1. Writing down what you've learned, either on paper, notebooks, or on the computer, with headings for each lesson.
2. Practical application, followed by taking screenshots of the details of this application and storing them in a file with a title for each image.
3. Combining the previous two points into a file on your computer.
4. Creating folders, and in each folder, store the files needed to complete one task, and name the folder with the task's name for easy reference.

The last method is the best approach.

To clarify further, let's assume the following:

• An HTML file, let's call it mainPage.html (don't worry about the names and extensions for now, you'll understand them later during practical application), and in this file, there are three text boxes and a button.
• A CSS file named style.css, and in this file, there are styles for the elements within the mainPage.html file.
• A JavaScript file named script.js, and it contains JavaScript code for a function that adds the number entered in the first text box to the number entered in the second text box and displays the result in the third text box when the button is clicked.

These three files: mainPage.html, style.css, and script.js.

You would place these files inside a folder, and let's call this folder, for example, "test of sum", this naming is in case we want to name it after the task, which is the addition operation.

You can also name it "learn function", for example, if you were learning about functions and how to create them. In that case, you would name it based on what you are learning.

The naming convention is flexible, and it should help you easily identify and refer back to the information when needed.

Over time, as you continue learning and working on various projects, you'll accumulate a substantial collection of folders and files, each serving as a valuable reference.

Comments:

Comments in programming languages provide an opportunity for programmers to write all the notes they may need to refer to later without affecting the functionality of the software they are working on. After writing any line of code, if that line needs comments for future reference, we can write what we want beneath that code, and as mentioned, comments do not impact the program's execution.

As for the content of comments, we recommend that you write in a detailed manner as if you are addressing someone who knows nothing about the topic. Do not skip writing any notes just because you think you already know them.

To further ensure the usefulness of comments, we make it so that anyone close to us can read these comments, even if they are not a programmer. Because if they can understand most of the comments, then we can say that the content of the comment is successful. The reason for this is that if we experience a long break from what we have learned and want to come back to it later, in this case, we will be the ones who need to read this simplified content to quickly re-understand it. This is because the things we thought we knew at the moment of writing the comment, we may later realize that we have forgotten some parts of it.

A final note:

When you delve into the world of web development, you will encounter several topics we haven't covered in this article. The reason for not addressing them is not because they are unimportant, but because they have specific use cases that you won't fully understand until you've worked with the fundamentals, frameworks, and libraries.

Examples of these topics include JSON, AJAX, npm, Docker, and others.

Questions that may be asked about web development topics:

What are 3 types of web development?

What does a Web Developer do?

What web development means?

What is web development skills?

Which language for web development?

Does web development require coding?

How do I start a web developer?

How hard is web development?

Can anyone be a web developer?

How to create a website?

Is web development a good career?

What is an example of a web development?

What are HTML skills?

What skill is best for a web developer?

Is it difficult to learn HTML?

Is Python used in web development?

Why do you want to learn web development?

How do I become a Web 3 developer?

Who is the full stack developer?

Which developer is easy to learn?

A careful reader of the article will find answers to all of these questions, even if they are not directly stated. Understanding the context will clarify all aspects.

In conclusion, after this detailed explanation, try it for yourself and choose the method that suits you and your abilities. However, before reaching this stage, try to master anything you are learning before moving on to something else.

As a final piece of advice and conclusion, it's preferable to become a Full-stack Web Developer because you'll be able to understand, work with, develop, and modify the entire website from start to finish and from all aspects.