Welcome to Web Development: A practical guide for those starting from scratch

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:

  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>


  <h1 id="Olá-mundo">Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>

 

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:

  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>


  <h1 id="Olá-mundo">Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>

 

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;
}

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:

• An alert displayed when the user clicks a button.
• Change the text of an element when hovering over it.

Practical Example: Add the javascript part <script> inside your index.html file. It will look like this:<br> </script>

 <link rel="stylesheet" href="styles.css"> 

Now when you click on the title, a message will be displayed on the screen.

How to Make Your Website Available to the World

You may be wondering: "How can my HTML, CSS and JavaScript code be available to other people, just like I accessed the Pudim website?". Well, while you are creating and testing your website on your computer, it is only visible to you. In order for other users on the internet to access your work, you need to publish it on a server.

Think of the server as a library that stores all of your website's files. When someone types your website address into their browser, the server sends the files needed to display the page. Without this, your website would not be accessible to others.

This process of making the website available to the world is called hosting. There are several types of servers and hosting services that make this easy. Now that you understand the concept, it's time to explore how to create more complete projects and eventually publish them for the world to see!

Essential Tools for Developers

1. Code Editor: Use an editor like Visual Studio Code to write and organize your code.

2. Version Control with Git: Git lets you track code changes, and GitHub helps you share your projects online.

3. Online Resources: Platforms like FreeCodeCamp, MDN Web Docs and W3Schools offer excellent free tutorials.

How Much Can You Earn in Web Development?

The web development area has good pay and high demand. Here are the average salaries in Brazil:

• Junior: R$2,500 to R$4,000 per month.
• Full: R$5,000 to R$8,000 per month.
• Senior: R$9,000 to R$13,000 per month.

These values ​​were based on data from Glassdoor and may vary depending on the company and region.

Tips for Those Just Starting Out

1. Practice Every Day: Even if for a short time, daily practice is essential.
2. Join Communities: Discord groups and forums like Dev.to and Rocketseat are great for learning and asking questions.
3. Build a Portfolio: Showcase your projects to increase your chances of getting opportunities.
4. Be Curious: Explore different technologies and stay up to date.

Get Started Today

This guide presented the basics of the basics for those starting out in web development. The objective was to show the first steps and give a general idea of ​​what you need to study to start building your own projects.

However, web development is a broad area full of possibilities. For example, what we've shown about HTML is just the starting point. You can explore more about HTML5, semantic elements and best practices to make your websites accessible and well-structured.

Here are some suggestions for websites to continue your studies:

• MDN Web Docs: One of the best sources for learning HTML, CSS, and JavaScript.
• W3Schools: A user-friendly platform to learn and practice coding.
• FreeCodeCamp: Free and practical courses that help you develop real projects.

Practice whenever you can, explore different tools and don't be afraid to make mistakes.

The most important thing is to continue learning and, little by little, you will feel more confident to create complete projects and even enter the job market. Let's go on this journey together!

The above is the detailed content of Welcome to Web Development: A practical guide for those starting from scratch. For more information, please follow other related articles on the PHP Chinese website!