DEV Community

Cover image for Como fazer um projeto sem travar
Rafael Nunes
Rafael Nunes

Posted on

Como fazer um projeto sem travar

doers

*É melhor algo feito, do que algo perfeito ! *

Essa é uma fraze de uma pessoa bem "doer", mas é verdade, é preferível que faça algo pequeno mas faça, do que tentar dar um grande salto e depois parar.

Pensando nas dificuldades que se encontra na hora de codar, eu fiz aqui um passo a passo para ser seguido pra que seu projeto ganhe vida, e essa é só uma forma que você pode adotar para faze-lo do inicio ao fim sem travar.

Analize do projeto.

Quando fizer a analize tente entender e anote suas dúvidas. Se preciso as anote para que na hora de codar não fique quebrando cabeça com o que você pode ou não fazer.

Tirar as dúvidas com o designer, caso tenha um.

Se necessário quebre o projeto em componentes,
Coisas que possam ser reaproveitadas pois são repetidas, talvez você economize boas linhas de código fazendo essas partes em uma folha de css global por exemplo.

Desenhe estrutura basica que o projeto vai ter como planejamento.
Pensar em blocos é mais fácil

Planejamento de uma pagina

Perceba como um objeto pode ter várias partes, assim já tendo a vizualização planejada do que você deve fazer para codar fica bem mais fácil.

Criar a estrutura base

Criar a estrutura de pastas

estrutura base

Observe que tudo que não for o index ou readme, fica na pasta src com suas respectivas pastas onde serão usadas no projeto.
A estrutura de pastas é muito importante para que você não se perca no meio.

Criar o HTML

Nessa parte já se começa a codificar

Não tem problema em criar ele e depois mudar, talvez alguma div não se comportou como você planejou, talvez houve algo que você deixou passar , você não precisa ter um planejamento perfeito antes de começar, mas não deixe de planejar o que será feito.

Criar o CSS

Criar arquivo de reset.css para zerar margens e paddings e outras coisas globais.
Um pra animações, outro para estrutura dos elementos, um para objetos comuns.
Dependerá do seu projeto e do seu tamanho , mas tenha folhas de codigo css separadas para cada tarefa, ao invez de fazer uma folha gigantesca.

criar o arquivo de style.css, é mais intuitivo criar de cima para baixo de acordo com a ordem dos elementos que você irá fazer.

criar o JS

Primeiro pensar na lógica do código para depois ir para ele
Se você estiver seguindo alguem e tiver errado, tente entender a lógica, não tente arrumar e escutar a pessoa.

Finalizando MVP

uma espécie de versão beta, pra dar vida ao projeto e depois ir fazendo melhorias.
Refatorando e etc.
Assim seu projeto ganha vida rapidamente e você já conseguirá ânimo para ir para o próximo ou melhora-lo.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More