Tutorial Web Development- Web Development

Web Development

IMPORTANT! Do not overlook this introductory course in order to immediately start learning HTML or CSS or anything else. This course contains very valuable information that any web developer should know and is the first in a long series of courses that you should follow to become a good programmer or a good web designer.

Unfortunately, there are many programmers who do not know absolutely basic things. I don't think you want to be among them.

General Concepts - What is the Internet?

The term Internet comes from the artificial and partial combination of two English words: interconnected = interconnect and network = network.

“Internet” refers to a global unified network of computers and other devices with computerized addresses, interconnected according to the communication protocols “Transmission Control Protocol” and “Internet Protocol”, together called “TCP/IP”. The precursor of the Internet dates back to 1965, when the Defense Advanced Research Projects Agency - of the Department of Defense, DoD in the USA (Defence Advanced Research Projects Agency, en:DARPA) created the first network of interconnected computers under the name ARPAnet.

The super-network Internet of today, which has long spread across the entire globe, resulted from the continuous expansion of this initial Arpanet network. Today, there is only one Internet in the world, which is huge; it offers its users a multitude of information and services such as e-mail, www, FTP, Web Hosting and many others, some of which are paid.

What is a website?

It takes a lot of work to create a professional website, so if you're just starting out, I encourage you to start slowly, gently, and arm yourself with a lot of patience.

You won't succeed in building another Facebook or Instagram right away, but it's not that hard to build your own site.

The notion of a website comes from the English expression "website" and refers to a collection of web pages (containing text, static images, animations, etc.), accessible via the Internet, usually on a specific topic, and connected to each other through hyperlinks.

Sir Tim Berners invented the World Wide Web in 1989.

By October 1990, Tim had written the three fundamental technologies that remain at the core of today's web:

HTML: HyperText Markup Language. The markup (formatting) language for the web.

URI: Uniform Resource Identifier. A kind of "address" that is unique and used to identify each resource on the web. Another commonly used term is URL (Uniform Resource Locator).

HTTP: Hypertext Transfer Protocol. The hypertext transfer protocol is the most commonly used method for accessing information on the Internet that is stored on World Wide Web (WWW) servers.

Tim also wrote the first web editor/browser ("WorldWideWeb.app") and the first web server ("httpd"). By the end of 1990, the first web page was broadcast on the Internet.

Necessary Tools

Just like any craftsman, the web developer needs "tools" to successfully complete their work.

Let's see, step by step, what we need:

1. A computer. Seems obvious, right? But maybe those reading this article using a phone think they can work and learn using a smartphone. No way! You need a decent computer and a good monitor, because you'll spend a lot of time in front of it and you don't want your eyesight to deteriorate quickly. I want to point out that working in front of a monitor does not damage your eyesight, as you may have heard many times. Poor monitors damage eyesight, and working too long without breaks causes eye fatigue.
2. A simple text editor or an IDE (Integrated Development Environment). There are many such editors, absolutely necessary for writing code.

An integrated development environment (IDE) is a software application that provides complex tools for programmers to develop software. An IDE will have a source code editor, automation tools, and a debugger.

Before IDEs appeared, programmers wrote applications in text editors, then ran the application in a compiler, noted the displayed errors, and then revised the code.

In 1983, the first compiler called TurboPascal was launched, which for the first time integrated a text editor and a compiler for the Pascal language. Microsoft Visual Basic, launched in 1991, was the first real IDE. The role of the IDE is to increase productivity by reducing work time, offering a standardized work environment that is constantly updated with the latest technologies.

Examples of web development environments:

• Visual studio code
• Brackets
• Sublime
• WebStorm

1. A web browser. To test the code, we need one of the most commonly used web browsers: Firefox, Chrome, Opera, Safari, Internet Explorer or Microsoft Edge. You should also test your site's performance on as many mobile devices and older browsers as possible, which are still in use.
2. A graphic editor, optional. You can choose from GIMP, Paint.NET, Photoshop, or XD to edit images intended for use in site pages.
3. A version control system (VCS), also optional. A VCS is needed to manage files on servers, to collaborate on a project with other programmers, to share code, and to avoid code conflicts. At the moment, the most popular VCS is GIT, along with the hosting service GitHub or GitLab.
4. FTP software (File Transfer Protocol), optional. An FTP program is used on older hosting accounts to manage files on the server. The most popular such programs are Cyberduck, Fetch and FileZilla. However, this type of software is not absolutely necessary and is quickly being replaced by GIT.
5. An automation system, optional. Such a system automatically performs repetitive tasks, such as reducing code size and running tests. Examples include Grunt or Gulp.
6. Templates, libraries, various frameworks. Professionals use many other tools, which fortunately are not absolutely necessary at this moment and which you will discover gradually.
7. Installing a local web server, optional. Some pages need to be run on a web server to function properly. If you need a local web server, then you should know that there are several options. On the page installing a local web server, I present several types of servers, as well as installation and usage methods.

How will my website look?

Before writing the first line of code, you need to decide what structure the site will have, what information it will offer users, what colors and fonts you will use.

First of all: the action plan

Before doing anything, you need a few ideas. What should my website do?

A website can practically do anything, but for starters, try to keep things as simple as possible.

We will simulate the creation of a simple site, with a title, an image, and a few paragraphs.

To begin, try to answer these questions:

• What is the site about?
• What information will I present?
• What will it look like in the end?
• What font and colors are most suitable, considering the answers to the questions above?

Sketch of the future site

Grab a pencil and make a sketch of the future site. It doesn't have to be a sketch worthy of an artist. Believe me, you will look at that sketch many times while building the site, especially if it's a more complex one.

After the sketch is finalized, take another sheet of paper and write the texts for each individual page.

Next, choose the most suitable colors, minimum 2–3, maximum 5–6, then choose images from Google Images, carefully checking that they are not protected by copyright (Select: Tools > Usage rights > Labeled for reuse), then choose the most suitable fonts from Google Fonts

If you've completed all the steps above, you can start working effectively on the future site.