Comece hoje a estudar web development

Giovanni Alves — Sun, 11 Jun 2023 23:43:11 +0000

Você não precisa ter o melhor computador, melhor curso ou de faculdade para começar. Aqui vou listar um roadmap para iniciantes.

Front-end:

HTML5: Comece aprendendo a estrutura básica de uma página web usando tags HTML, como <html>, <head>, <body>, e aprenda a criar elementos como cabeçalhos, parágrafos, links, imagens e formulários.
CSS3: Aprenda a estilizar suas páginas HTML usando CSS. Estude seletores, propriedades e valores CSS para alterar cores, fontes, tamanhos e posicionamento dos elementos na página.
Flexbox: Domine o conceito de flexbox, que é uma técnica de layout responsivo do CSS3. Isso permitirá que você crie layouts flexíveis e fluidos para seus projetos.
JavaScript: Familiarize-se com a linguagem de programação JavaScript, que é usada para adicionar interatividade e funcionalidades dinâmicas às páginas web. Aprenda os fundamentos, como variáveis, estruturas de controle (condicionais, loops) e funções.
ES5 e ES6: Estude as versões do JavaScript, ES5 e ES6 (também conhecido como ES2015). ES6 introduz muitos recursos avançados e melhorias na linguagem, como classes, arrow functions, operadores spread, desestruturação e muito mais.
Git & GitHub: Aprenda a usar o Git, um sistema de controle de versão amplamente utilizado, para acompanhar e gerenciar o histórico de alterações em seu código. Em seguida, familiarize-se com o GitHub, uma plataforma online para hospedar repositórios Git, colaborar em projetos, gerenciar problemas e solicitações de pull. Domine os comandos básicos do Git, como git init, git add, git commit e git push, além de entender os conceitos de branches (ramificações) e pull requests.

Frameworks para front-end:

Vite: Aprenda a configurar e usar o Vite, um framework de desenvolvimento rápido para projetos front-end. Ele oferece uma inicialização rápida, recarregamento instantâneo do navegador e suporte a módulos ES.
React, Vue, Angular (opcional): Escolha um dos principais frameworks JavaScript, como React, Vue ou Angular, e aprenda a criar aplicativos front-end escaláveis e reativos usando essas ferramentas.
Básico de linux/bash

Back-end:

PHP7 e PHP8: Comece aprendendo PHP, uma linguagem de script do lado do servidor amplamente usada para desenvolvimento web. Estude a sintaxe básica, manipulação de formulários, interação com banco de dados e recursos avançados disponíveis nas versões mais recentes do PHP.
MySQL: Aprenda o básico de bancos de dados relacionais e SQL (Structured Query Language). Concentre-se em aprender a criar tabelas, consultar dados, atualizar registros e executar operações básicas de banco de dados usando MySQL.
Laravel: Explore o framework Laravel, um dos mais populares e poderosos para desenvolvimento PHP. Estude os conceitos básicos, como roteamento, controle de versão, migrations e Eloquent ORM (Object-Relational Mapping).
Apache2 e Nginx: Familiarize-se com servidores web como o Apache2 e o Nginx. Aprenda a configurar virtual hosts, lidar com regras de redirecionamento e otimizar o desempenho do servidor.
Git & GitHub: Aprenda a usar o Git, um sistema de controle de versão amplamente utilizado, para acompanhar e gerenciar o histórico de alterações em seu código. Em seguida, familiarize-se com o GitHub, uma plataforma online para hospedar repositórios Git, colaborar em projetos, gerenciar problemas e solicitações de pull. Domine os comandos básicos do Git, como git init, git add, git commit e git push, além de entender os conceitos de branches (ramificações) e pull requests.
Básico de linux/bash

Você não precisa aprender os dois para entrar na área, você precisa escolher um e estudar muito. Não existe uma fórmula mágica, bootcamp ou qualquer outro recurso que garantirá um emprego imediato. Se você tem vontade e determinação, estude profundamente o campo escolhido.

Mas e se você não tem um computador bom? Não se preocupe, você pode começar mesmo com um Core 2 Duo e 4GB de RAM. Este roadmap foi desenvolvido levando em consideração essa limitação e você ainda poderá progredir significativamente.

Aqui estão algumas ferramentas leves que você pode utilizar:

Sublime Text 4: Um editor de texto leve e versátil, que oferece uma ótima experiência de programação. É uma excelente opção para começar a escrever código.
Windows 7+ ou qualquer distribuição Linux: Ambos os sistemas operacionais são adequados para desenvolvimento. O Windows 7 ou uma versão mais recente é uma escolha comum, mas também existem diversas distribuições Linux leves e amigáveis que você pode experimentar.
Internet: Uma conexão à internet é essencial para acessar recursos, documentação, tutoriais e participar de comunidades de programadores. Utilize-a para se conectar com outras pessoas na área e expandir seu conhecimento.

Lembre-se de que o hardware não é o único fator determinante para o sucesso na programação. O que importa mais é a sua dedicação e vontade de aprender. Utilize os recursos disponíveis, estude intensamente e mergulhe fundo no campo escolhido. Com perseverança, você poderá alcançar seus objetivos, mesmo com um computador mais modesto.

Como você pode melhorar o uso de margin's no css

Giovanni Alves — Fri, 20 Jan 2023 03:37:11 +0000

Bom, recentemente tive um insight conversando com uma amiga, sobre margin e como ele afeta a aplicações em dispositivos.

Nesse artigo vou explicar como você pode trocar o margin e quando você deve realmente usar.

Margin é uma propriedade do CSS que define a margem de um elemento. Pode ser usada para criar espaçamentos entre elementos.

Mesmo que pareça uma boa ideia usar margin para criar espaçamentos, o uso excessivo de margin leva a problemas de layout e uma dificuldade de manutenção. Vou listar algumas razões pelas quais você pode querer evitar o uso de margin.

Pode ser difícil prever como a margem irá afetar o layout da página. A margem de um elemento pode afetar não só o elemento em questão, mas também os elementos vizinhos. Isso pode levar a layouts desajustados e difíceis de entender.
Pode ser difícil ajustar o layout quando o margin é usado em muitos elementos. Se você estiver usando margin em muitos elementos da sua página, pode ser difícil ajustar o layout global quando algo não estiver funcionando como o esperado.
O uso excessivo de margin pode tornar o código difícil de ler e manter. Quando há muitas declarações de margin em um código, pode ser difícil entender o que está acontecendo e como ajustar o layout se necessário.

Em vez de usar margin, é geralmente uma boa ideia usar outras técnicas para criar espaçamentos, como padding e grid layout. Essas técnicas podem ser mais fáceis de prever e ajustar, além de deixar o código mais limpo e fácil de manter.

Vou mostrar exemplos do mesmo elemento com e sem gap.

Nós temos esses três cards, com espaçamentos iguais e divididos.

<div class="block-content block-content-full">
  <div class="d-flex flex-column align-items-center align-self-center justify-content-center">
    <v-icon class="text-oderco" name="hi-upload" scale="2" />
    <span style="font-size: 14px" class="fw-bold text-black mt-3">Solte ou Arraste o arquivo</span>
    <button class="btn btn-primary btn-lg mt-3 card__button"> Buscar neste computador </button>
    <span style="font-size: 12px" class="mt-3">Arquivos Suportados: PDF, PNG, JPG</span>
  </div>
</div>

Esse código remete ao card do meio.

Podemos notar no código acima o uso de mt que é ao equivalente você escrever margin-topusando css. Você pode notar que em três elementos você tem o uso de margins com as mesmas margens entre elas, isso é ruim por motivos de utilização em múltiplos dispositivos (principalmente mobile) e você pode ter o problema de quebrar o elemento diversas vezes, isso dificulta na manutenção.

Agora vou mostrar o mesmo código, mas usando flex e gap.

<div class="block-content block-content-full h-100">
  <div class="d-flex flex-column gap-4">
    <span class="fw-bold text-oderco-darker">Valor Nota Fiscal de Serviço</span>
    <h2 class="fw-bold text-oderco">R$ 660,00</h2>
    <div class="row">
      <span style="font-size: 12px; color: #6e6e6e">
        <span class="fw-bold">Valor Liquido:</span> R$ 650,00 (IRRF 1,5%) </span>
      <span style="font-size: 12px; color: #6e6e6e">
        <span class="fw-bold">Vence em:</span> 26/02/2022 </span>
    </div>
  </div>
</div>

Mesmo código, mas com uso de gaps, você pode notar que não temos nenhum margine obtemos o MESMO resultado esperado. No caso dessa aplicação o gaprepresenta 16px.

Bom, mas e quando devemos usar margin? Usamos quando não precisamos de flexe grid, com elementos totalmente separados e específicos. Mas geralmente gapvai resolver todos os seus problemas.

Deixo esse video do Web Dev Simplified, onde ele comenta do mesmo assunto.

Web Dev Simplified

DEV Community: Giovanni Alves

Comece hoje a estudar web development

Front-end:

Frameworks para front-end:

Back-end:

Como você pode melhorar o uso de margin's no css