Welcome to Web Development: A practical guide for those starting from scratch-JS Tutorial-php.cn

Bem-vindo ao desenvolvimento Web: Um guia prático para quem está começando do zero

Topics

Introduction
What is the Web and How Does It Work?
How to Make Your Website Available to the World
Essential Tools for Developers
How Much Can You Earn in Web Development?
Tips for Beginners
Conclusion: Start Today

Introduction

If you're here, it's because you want to understand how the world of web development works and, who knows, take your first steps in a new career. This guide is for you who don't know anything about the area and want to start from the beginning, understanding the fundamentals before diving into languages and tools. Let's explore together, in a practical and accessible way, how to start on this journey.

What is the Web and How Does It Work?

The web is a global network that connects millions of devices and systems, allowing information to be accessed and shared in real time. In other words, the web is like a large digital library. When you access a website, you are asking for information that is stored somewhere in the world. The browser (like Google Chrome or Firefox) is like the "librarian" that searches and organizes this information for you.

Here are the key elements that make it all work:

1. Browser and Server
Let's understand what happens when you access the website https://www.pudim.com.br/. The browser makes a request, a request to the server, which responds with the files needed to display the page. In the case of Pudim, the server returns an HTML file containing a basic structure of the website, which includes a title, an image and an email link.

The browser is the program you use to access the internet (Chrome, Firefox, etc.). It makes requests for information and displays pages in an organized manner.
The server is the computer that stores the website's files (text, images, videos) and sends them to your browser when you, the user, request it. Think of the server as a "specialized computer" that stores the website's files (text, images, videos) and responds to browser requests by sending these files. It is essential for the website to be accessible on the web.
In the case of Pudim, the server returns an HTML file containing a basic structure of the website, which includes a title, an image and an email link.

2. How do Browser and Server Communicate?
When you access a website, like Pudding, the browser and server need to "talk" for the content to be displayed correctly. This communication occurs through HTTP (HyperText Transfer Protocol), a set of rules that defines how information should be sent and received. The browser sends a request to the server (called an HTTP request), and the server responds with the necessary files (such as HTML, CSS, and JavaScript) to assemble the page in the browser. This exchange of information is fast and efficient, ensuring that the website is displayed correctly.

Practical Example: Type "https://www.pudim.com.br/" in the browser and press Enter. You will see a simple page with a pudding image and an email link.

3. What is an API and How Does It Fit In?
Now imagine that the Pudim website also wants to show the weather forecast. To do this, he could use an API (Application Programming Interface). APIs work as bridges that allow different systems to exchange information.
For example: Imagine that the Pudding website also showed a message like "Today is a good day to eat pudding!" based on current weather. The browser would send a request to a weather API, which would return information about the temperature and weather condition. The website could then display this message dynamically.

Summary: APIs are essential tools in modern web development because they allow you to add dynamic functionality, such as data, from anything, updated in real time.
Now that you understand the basics, let's start learning the basic tools for creating a website.

1. HTML: The Structure of the Site
HTML (HyperText Markup Language) defines the structure of the page. It is made up of tags, which are elements that indicate how the content will be organized and displayed in the browser. Each tag has a specific function and can contain text, images, links, among other elements.
Example Tags:

: Sets a main title.
: Defines a paragraph of text.
: Inserts an image on the page.
: Creates a link.

Practical Example: Create a file called index.html and paste the following code:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>
</body>
</html>

Copy after login

Open the file in the browser and see your first web page!

2. CSS: The Page Style
CSS (Cascading Style Sheets) is used to give color, shape and style to the website, making it look beautiful.
How CSS works:

Selectors: Identify the elements you want to style. For example, body for the page body or h1 for titles.
Properties and values: Specify the applied style. For example, color: blue; changes the text color to blue.

Example of CSS rules:

body { background-color: #f0f0f0; } sets the page background color.
h1 { font-size: 24px; color: #0066cc; } changes the size and color of the title.

Practical Example: Create a file called styles.css and add the following:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>
</body>
</html>

Copy after login

Connect CSS to HTML by adding the line below within the from index.html file:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
  text-align: center;
}
h1 {
  color: #0066cc;
}

Copy after login

Refresh your browser and see the page style changes.

3. JavaScript: Adding Interactivity
JavaScript is the language that makes the page interactive, allowing you to add animations, validate forms, manipulate elements, and more. (we'll talk more about javascript in another post, stay tuned ❤)

Example of interactivity: