Codante - Evolua no front-end Watch on YouTube

Introdução ao Desenvolvimento Web | Aula 01 | Git e Github

3 min read 2 hours ago

Published on Oct 11, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial serves as an introductory guide to web development, focusing on Git and GitHub. It is designed for beginners who want to learn practical skills in web development, including HTML, CSS, and JavaScript, along with version control using Git. By following this guide, you will gain a foundational understanding of tools essential for modern web development.

Step 1: Understanding Git

Git is a version control system that allows you to track changes in your codebase.
It helps manage collaborative projects by keeping a history of changes, making it easy to revert to previous versions if necessary.
Key commands to know:
- git init - Initializes a new Git repository.
- git add <file> - Stages changes for the next commit.
- git commit -m "message" - Commits the staged changes to the repository with a message describing the changes.

Practical Tip: Always write clear commit messages. This helps you and others understand the history of changes.

Step 2: Setting Up GitHub

GitHub is a platform for hosting Git repositories online, enabling collaboration and sharing of code.
To get started:
1. Sign up for an account at GitHub.com.
2. Create a new repository by clicking the "New" button on your GitHub dashboard.
3. Choose a name for your repository and decide if it should be public or private.

Common Pitfall: Ensure your repository is initialized with a README file, as it provides essential information about your project.

Step 3: Connecting Git to GitHub

To push your local repository to GitHub:
1. Open your terminal.
2. Change to your project directory using cd <your-project-directory>.
3. Link your local repository to the GitHub repository using:
```
git remote add origin <repository-URL>
```
4. Push your local changes to GitHub:
```
git push -u origin master
```

Practical Tip: Use HTTPS for easy access, especially if you're new to Git.

Step 4: Introduction to HTML and CSS

HTML (HyperText Markup Language) is the standard language for creating web pages.
CSS (Cascading Style Sheets) is used to style HTML elements.

Start with basic HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Add CSS to style your page:

h1 {
    color: blue;
    font-size: 30px;
}

Step 5: Learning JavaScript Basics

JavaScript is a programming language that allows you to create interactive web pages.
Familiarize yourself with key concepts:
- Variables: Use let, const, or var to declare variables.
- Functions: Define reusable code blocks.
- Events: Use event listeners to respond to user actions.

Example Code:

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

Step 6: DOM Manipulation with JavaScript

The DOM (Document Object Model) represents the structure of your web page.
Use JavaScript to manipulate the DOM dynamically, such as changing content or styles.
Key methods:
- document.getElementById() - Selects an element by its ID.
- element.style - Modifies the CSS styles of an element.

Example of DOM Manipulation:

document.getElementById("myElement").innerHTML = "New Content";

Conclusion

This guide introduced you to the fundamentals of web development, focusing on Git, GitHub, HTML, CSS, and JavaScript. You now have the basic knowledge to set up version control, create a simple web page, and make it interactive.

Next steps could include:

Practicing your coding skills by building small projects.
Exploring more advanced topics in JavaScript and frameworks like React or Vue.js.
Completing exercises and projects to reinforce your learning and prepare for a certificate.

Table of Contents

Recent