21 Dias de Prática para Devs Iniciantes

Seja bem-vindo ao caminho acelerado para o mundo dos devs! Nos próximos 21 dias, você terá um mergulho nas bases essenciais que todo desenvolvedor web precisa saber. Ao final, estará pronto para encarar as principais exigências de vagas para devs em níveis iniciais.

Caso você precise de acompanhamento profissional para evoluir mais confiante em sua jornada confira o Tech Inside, que vai te ajudar a dominar habilidades necessárias para entrar e evoluir no mercado de tecnologia.

Importante: Use esse guia diariamente em cada dia conforme sugerido para ter mais constância e progresso no aprendizado.

Dia 01 – Como a Internet funciona: DNS, Domínios, IP e Servidores

Conceito-chave: DNS transforma domínios em IPs.
Prática: Use nslookup no CMD ou Terminal de prefefência para verificar o IP de um site.
Exemplo: nslookup google.com

Dia 02 – HTTP – HyperText Transfer Protocol

Conceito-chave: Protocolo padrão para transferência de documentos web.
Prática: Visite um site e inspecione cabeçalhos HTTP usando o F12 (Ferramentas de Desenvolvedor) no seu navegador.
Exemplo: GET /index.html HTTP/1.1

Dia 03 – Navegadores: Google Chrome, Mozilla Firefox, Microsoft Edge

Conceito-chave: Softwares que interpretam e exibem páginas web.
Prática: Compare a mesma página nos três navegadores. Note as diferenças.
Dica Windows: Microsoft Edge é integrado ao Windows e otimizado para ele.

Dia 04 – Visual Studio Code: instalação e recursos básicos

Conceito-chave: Editor de código versátil.
Prática Windows: Instale o VSCode e adicione extensões como Live Server e Prettier.
Exemplo: Usando “Live Server”, execute um arquivo HTML ao vivo.

Dia 05 – HTML: básico

Conceito-chave: Linguagem de marcação que forma a estrutura das páginas web.
Prática: Crie um arquivo HTML básico com indentação.
Exemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Meu Primeiro Site</title>
</head>
<body>
    <h1>Hello, GoDevs!</h1>
</body>
</html>

Dia 06 – HTML: tags e atributos

Conceito-chave: Estrutura e personalização do conteúdo.
Prática: Adicione elementos como headers, lists e textos ao seu HTML.
Exemplo:

<h2 id="subtitle">Bem-vindos!</h2>
<ul>
    <li>Home</li>
    <li>Sobre</li>
</ul>

Dia 07 – HTML: table

Conceito-chave: Exibir dados em forma de tabela.
Prática: Crie uma tabela simples.
Exemplo:

<table border="1">
    <tr>
        <th>Nome</th>
        <th>Cargo</th>
    </tr>
    <tr>
        <td>João</td>
        <td>Desenvolvedor</td>
    </tr>
</table>

Dia 08 – HTML: layout semântico

Conceito-chave: Usando elementos HTML de forma a dar significado ao conteúdo.
Prática: Implemente tags semânticas como <header>, <nav>, <article>, e <footer>.
Exemplo:

htmlCopy code

<header>
    <h1>GoDevs Blog</h1>
</header>
<nav>
    <ul>
        <li>Home</li>
        <li>Artigos</li>
    </ul>
</nav>
<article>
    <h2>Título do Artigo</h2>
    <p>Conteúdo...</p>
</article>
<footer>
    <p>Copyright GoDevs 2023</p>
</footer>

Dia 09 – CSS: sintaxe, cores, fontes

Conceito-chave: Estilizando elementos.
Prática: Adicione cores e mude fontes de seu HTML usando CSS.
Exemplo:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}
h1 {
    color: #333;
}

Dia 10 – CSS: medidas (px, %, em, rem, vh)

Conceito-chave: Unidades para definir tamanhos.
Prática: Experimente usar diferentes medidas em elementos HTML.
Exemplo:

p {
    font-size: 16px; /* Pixel fixo */
}
div {
    width: 50%; /* Percentual da largura do elemento pai */
}
h2 {
    font-size: 2em; /* Relativo ao tamanho da fonte do elemento pai */
}
h3 {
    font-size: 1.5rem; /* Relativo ao tamanho da fonte da raiz do documento */
}
footer {
    height: 10vh; /* 10% da altura da viewport */
}

Dia 11 – CSS: box model

Conceito-chave: Compreendendo margin, border, padding e content.
Prática: Crie uma caixa com padding, border e margin.
Exemplo:

.box {
    width: 200px;
    padding: 20px;
    border: 5px solid #333;
    margin: 15px;
    background-color: #eee;
}

Dia 12 – CSS: floats, positions, display

Conceito-chave: Controle da posição e exibição de elementos.
Prática: Tente fazer um layout com elementos flutuantes, e posicione um elemento com position: relative.
Exemplo:

.left {
    float: left;
}
.right {
    float: right;
}
.relative-box {
    position: relative;
    top: 10px;
    left: 10px;
}

Dia 13 – CSS: flex box

Conceito-chave: Moderna técnica de layout unidimensional.
Prática: Crie uma barra de navegação com elementos distribuídos horizontalmente.
Exemplo:

.navbar {
    display: flex;
    justify-content: space-between;
}

Dia 14 – CSS: grid

Conceito-chave: Técnica de layout bidimensional.
Prática: Crie um layout simples de três colunas.
Exemplo:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Dia 15 – JS: sintaxe

Conceito-chave: Estrutura básica de JavaScript.
Prática: Crie seu primeiro arquivo.js e escreva um script que imprime uma mensagem no console.
Exemplo:

console.log("Olá, GoDevs!");

Dia 16 – JS: variáveis

Conceito-chave: Armazenar dados para uso posterior.
Prática: Declare variáveis usando let e const.
Exemplo:

let nome = "GoDevs";
const pi = 3.14159;

Dia 17 – JS: operadores

Conceito-chave: Realizar operações em valores.
Prática: Crie operações básicas de matemática e comparação.
Exemplo:

let x = 5;
let y = x + 10;  // 15
let z = x * y;  // 75
let isTrue = x < y;  // true

Dia 18 – JS: tipos de dados

Conceito-chave: Conhecer os tipos de dados do JavaScript: string, number, boolean, etc.
Prática: Declare diferentes tipos de variáveis.
Exemplo:

let stringVar = "GoDevs";
let numberVar = 23;
let booleanVar = true;

Dia 19 – JS: objetos

Conceito-chave: Estruturas para armazenar coleções de dados relacionados.
Prática: Crie um objeto representando uma pessoa com nome e idade.
Exemplo:

let pessoa = {
    nome: "João",
    idade: 30
};

Dia 20 – JS: estrutura de controle

Conceito-chave: Instruções condicionais e loops.
Prática: Escreva um loop que imprime números de 1 a 5.
Exemplo:

let a = 5;
let b = 10;

if(a > b) {
    console.log('a é maior que b');
} else {
    console.log('b é maior que a');
}

for (let i = 1; i <= a; i++) {
    console.log(i);
}

Dia 21 – JS: eventos

Conceito-chave: Responder a interações do usuário.
Prática: Adicione um botão que, quando clicado, mostra um alerta.
Exemplo:

document.querySelector('button').addEventListener('click', function() {
    alert('Botão clicado!');
});

Dicas gerais:

Consistência é a chave: Mesmo que pareça simples, pratique diariamente.
Peça feedback: Mostre seu progresso a outros devs, ouça críticas e aprimore-se.
Desafie-se: Tente adicionar funcionalidades ou estilizações que vão além do aprendizado diário.
Documente sua jornada: Pode ser em um diário. Isso ajuda a rastrear seu progresso e motivação.
Participe da comunidade: Junte-se a grupos online, como fóruns, Discord ou comunidades no Reddit para tirar dúvidas e compartilhar aprendizados.
Utilize documentações de referência como: https://developer.mozilla.org/pt-BR/

Lembre-se: este é apenas o começo da sua jornada. Com dedicação, você pode conquistar muito mais.