Flexbox em CSS & HTML: Configuração do projeto inicial

Neste tutorial, você aprenderá como preparar seu projeto para trabalhar com CSS Flexbox. É importante ter uma base sólida antes de mergulhar mais fundo nas técnicas de layout do Flexbox. Estamos usando o Visual Studio Code para o desenvolvimento, mas você também pode escolher um editor de texto simples e um navegador. Nos próximos passos, vamos configurar um projeto simples que o ajudará a entender e aplicar o Flexbox.

Principais Descobertas

• O uso de um servidor de desenvolvimento facilita o trabalho em seus projetos.
• Você pode trabalhar sem frameworks para aprender os fundamentos de JavaScript e CSS.
• O arquivo index.html é o ponto central do seu projeto, a partir do qual você trabalhará.

Guia Passo a Passo

Primeiro, abra um terminal no Visual Studio Code ou em outro programa de sua escolha. Verifique se o Node.js está instalado antes de prosseguir. Isso é crucial para executar os comandos do NPM.

Agora você pode utilizar o pacote NPM para a estruturação do projeto. Digite npx create-v no terminal para iniciar o processo de criação do seu projeto. Você será questionado se deseja baixar o pacote. Confirme.

Em seguida, insira o nome do seu projeto. Recomendo chamá-lo simplesmente de "flexbox", porque é exatamente o que vamos abordar. Depois de inserir o nome, será solicitada a escolha de um framework de IU. Nesse caso, selecione "Vanilla JavaScript", pois não usaremos frameworks específicos.

No próximo passo, será perguntado se você deseja usar TypeScript. Novamente, é aconselhável escolher "não" para manter as coisas simples e se concentrar nas tecnologias principais.

Agora você está quase pronto. Você só precisa navegar até o diretório do seu novo projeto. Faça isso com o comando cd flexbox. Assim, você entrará na pasta que acabou de ser criada.

Em seguida, execute o comando npm install no terminal. Isso instalará todos os pacotes necessários para o seu projeto.

Depois que isso estiver concluído, inicie o servidor de desenvolvimento local com npm run dev. Isso abrirá seu projeto e o disponibilizará em um servidor local.

Agora você pode dar uma olhada no arquivo index.html gerado, localizado no diretório do seu projeto. Este arquivo é a parte mais importante do seu projeto, onde você criará todo o seu conteúdo e estrutura.

O próximo passo é excluir o script padrão gerado para o projeto. Não precisamos usar o script main.js logo de início, então basta excluí-lo. Você também pode remover a folha de estilos style.css, pois inicialmente queremos gerenciar tudo no index.html.

No index.html, vamos construir a estrutura do nosso contêiner Flexbox. Precisamos de um contêiner principal que, por sua vez, conterá alguns contêineres secundários. Esta é uma estrutura fundamental que precisamos para o Flexbox.

Para visualizar suas alterações no navegador, abra o Chrome e vá para http://localhost:3000. Quando você inicia o servidor de desenvolvimento, a URL para acessar seu arquivo index.html é exibida.

Recomendo que ao abrir links no navegador, você utilize a tecla Ctrl (ou Command no Mac) para abri-los diretamente no navegador padrão. Isso permite que você acompanhe suas alterações.

Depois que a página estiver aberta, você pode, por exemplo, alterar o título no seu index.html de "Weed App" para "Flexbox" e salvar a página. A atualização ao vivo trará suas alterações imediatamente para o navegador.

Você pode adicionar mais texto à página, por exemplo, "Curso de Flexbox", e ver como o texto é atualizado dinamicamente, sem precisar recarregar manualmente a página. Esta pré-visualização em tempo real facilita muito o trabalho.

Os exemplos de Flexbox serão mais trabalhados no arquivo Index-HTML no próximo passo. Aqui é onde vamos estilizar o layout com CSS e criar os contêineres Flexbox. Fique atento aos próximos vídeos, onde aprofundaremos as técnicas de Flexbox.

Resumo

Neste tutorial, você aprendeu como configurar um projeto simples para trabalhar com CSS Flexbox. Você captou os fundamentos da estrutura do projeto, preparou o arquivo Index-HTML e utilizou o servidor de desenvolvimento local. Estes são os primeiros passos para dominar o Flexbox.