HTML e CSS: ambiente, estrutura e estilo

Configurando o ambiente e criando o primeiro site - Apresentação

Apresentando a instrutora e o curso

Olá! Sejam muito bem-vindos ao curso HTML e CSS: Ambiente, Estrutura e Estilo. Eu sou a Daniele Ligieri Castilho, instrutora na Alura, e trabalho há 14 anos com front-end. Caso não estejam me vendo, sou uma pessoa branca, com cabelos compridos e castanhos, algumas tatuagens no braço, um piercing no nariz e, atrás de mim, há uma parede iluminada nas cores azul e rosa.

Introduzindo o conteúdo do curso

Se estão dando os primeiros passos rumo à carreira de desenvolvimento front-end, temos certeza de que este curso é para vocês. Vocês aprenderão a configurar o ambiente de desenvolvimento, baixar todos os softwares necessários e deixar tudo pronto e configurado para se preocuparem apenas em escrever código e entender.

Vocês conhecerão e utilizarão as tags HTML de modo que conseguirão montar um site profissional usando as boas práticas. Aplicarão estilos usando CSS, ou seja, controlarão cores de texto e usarão imagens. Também aprenderão a criar versões do projeto, o que é muito importante para proteger o código em caso de problemas, garantindo que não percam o trabalho realizado.

Publicando o projeto na web

Neste curso, vamos aprender a publicar nosso projeto de forma gratuita na web utilizando o GitHub Pages, permitindo que possamos usar esse projeto como item de nosso portfólio.

Desenvolvendo os projetos do curso

O primeiro projeto que desenvolveremos não utiliza CSS, mas é extremamente importante para exercitarmos o uso das tags HTML. A ideia é organizar os conteúdos das aulas por meio de links, e, ao acessá-los, teremos acesso ao conteúdo aprendido.

Nosso segundo projeto será mais profissional: uma landing page da Techboard, uma empresa de monitoramento em tempo real. O propósito dessa landing page é oferecer ao usuário o primeiro acesso a uma versão demo do aplicativo. É essencial que esse site funcione tanto no computador quanto no tablet e no celular.

Requisitos e conclusão do curso

Para aproveitarmos melhor este curso, é recomendável que já tenhamos algumas noções de como a web funciona, o que é um cliente e servidor, e um pouco de conhecimento sobre as ferramentas que o navegador oferece durante o desenvolvimento.

Vamos desenvolver esses sites juntos? Nos encontramos no próximo vídeo!

Configurando o ambiente e criando o primeiro site - Instalando e configurando o VSCode

Introduzindo a importância da IDE

Estamos muito felizes que você deu mais esse passo em sua jornada de conhecimento. Vamos agora nos dedicar a atividades práticas. Antes de começarmos a programar, precisamos configurar nosso computador e o ambiente de desenvolvimento.

Neste vídeo, vamos instalar nossa IDE. O que é uma IDE? IDE é um ambiente integrado com todas as ferramentas e utilidades necessárias para escrever código. Ela oferece um local adequado para codificação, com organização facilitada de arquivos e recursos que indicam possíveis erros no que estamos escrevendo. Embora possamos escrever código em um bloco de notas ou outro tipo de arquivo, isso não seria tão produtivo, pois precisaríamos alternar entre vários programas para entender o que está acontecendo.

Instalando o Visual Studio Code

Vamos instalar nossa IDE. À medida que você avança em sua carreira, pode se familiarizar ou preferir outras IDEs. A IDE é como uma caixa de ferramentas, um ambiente integrado. Existem vários tipos de IDEs, mas neste curso, aprenderemos a usar o Visual Studio Code.

A primeira coisa que faremos é abrir o Google Chrome. Na barra de endereço, digitamos "Visual Studio Code Download". Após a busca, encontramos alguns links. O Visual Studio Code é da Microsoft, então, para evitar erros, acessamos os links oficiais. Clicamos no link da Microsoft e somos direcionados para uma página com duas opções de download: Visual Studio 2022 e Visual Studio Code. No nosso caso, queremos o Visual Studio Code, que é gratuito.

Baixando e instalando o Visual Studio Code

É importante saber qual é o seu sistema operacional para baixar o instalador correto. No meu caso, estou usando um Mac, então há um link específico para macOS. Se você estiver usando Windows, pode encontrar essa informação em Configurações, Sistema e Sobre, onde verá a versão do Windows e se é 32 ou 64 bits. Com essa informação, clique na opção correspondente. Vou clicar no macOS Universal Package e o download começará.

Antes de iniciar o download, somos redirecionados para o site Visual Studio Code Docs, que é a documentação do Visual Studio Code. É útil salvar essa URL nos favoritos para consultar caso precise fazer configurações adicionais. Vamos fazer algumas agora, mas você pode explorar a documentação oficial com mais calma.

Configurando o Visual Studio Code

Após o download, vamos à pasta de downloads. O arquivo vem compactado em um zip, que devemos extrair. Damos dois cliques no Visual Studio Code para abrir. No macOS, o Visual Studio Code abrirá diretamente. No Windows, provavelmente aparecerá uma janela do instalador, onde você deve clicar em avançar até concluir. Assim, chegaremos ao mesmo ponto.

Ao abrir o Visual Studio Code, vemos uma tela preta com duas colunas. Uma coluna contém opções do Visual Studio Code, como criar um novo arquivo, abrir uma pasta e acessar projetos recentes.

Traduzindo e ajustando configurações no Visual Studio Code

Do lado direito, temos a opção de iniciar os primeiros passos com o Visual Studio Code, incluindo uma opção para aprender os fundamentos. A primeira ação que vamos realizar para facilitar nosso entendimento é traduzir o Visual Studio Code para português. Para isso, vamos ao menu lateral esquerdo, onde há alguns ícones. Um desses ícones, que se parece com bloquinhos, é o ícone de extensões. Ao clicar nele, abrirá uma barra de busca. Vamos digitar "português" e selecionar a primeira opção, "português Brasil". Em seguida, clicamos no botão "instalar". Após a instalação, aparecerá um aviso informando que a linguagem foi alterada e que é necessário reiniciar. Clicamos no botão, o Visual Studio será fechado e reaberto, agora em português.

No mesmo menu lateral esquerdo, no final, há uma engrenagem chamada "gerenciar". Clicamos nela e, em seguida, em "configurações". Isso abrirá uma série de opções que podemos modificar. A primeira delas é o font-size, ou seja, o tamanho da fonte. Este número controla o tamanho da fonte em pixels. Podemos ajustar para o tamanho que for mais agradável. Como estamos gravando um vídeo, vamos aumentar um pouco a fonte para facilitar, ajustando para 20. Se necessário, podemos voltar e modificar novamente.

Configurando autosave e outras preferências

Outra configuração importante é a opção de autosalvamento. Os arquivos terão salvamento automático conforme forem modificados. Isso é útil para evitar a perda de código caso o arquivo seja fechado sem ser salvo. Para prevenir esses descuidos, configuramos o autosave para afterDelay. Isso significa que o salvamento ocorrerá após um certo tempo sem digitação, e não a cada letra escrita. Outras opções incluem salvar ao mudar o foco da tela ou de janela, mas o afterDelay é mais garantido.

Há também a opção de mudar a família da fonte, Font Family, conforme a preferência. Outra configuração é o Editor Word Wrap. Essa opção quebra linhas muito compridas ao invés de criar uma barra de rolagem horizontal. Vamos configurar o Editor Word Wrap para On.

Escolhendo o tema e finalizando a configuração

Por fim, podemos escolher entre diversos temas. A maioria das pessoas desenvolvedoras prefere uma tela preta, pois é mais confortável para a visão durante longos períodos de codificação. Embora seja possível escolher um tema claro, optamos pelo tema escuro, especificamente o "escuro moderno".

Com isso, concluímos as configurações básicas do ambiente de desenvolvimento. Instalamos e configuramos o Visual Studio Code, encerrando esta primeira parte. No próximo vídeo, falaremos mais sobre o Google Chrome. Até lá!

Configurando o ambiente e criando o primeiro site - Google Chrome e as ferramentas de desenvolvedor

Introduzindo o uso do navegador no desenvolvimento

Já baixamos e fizemos as configurações iniciais do VS Code. A próxima ferramenta que vamos entender melhor é o navegador, que já utilizamos bastante no dia a dia. O navegador não serve apenas para acessar sites e consumir informações; ele possui um conjunto completo de ferramentas para pessoas desenvolvedoras, que nos ajudam a investigar nosso código, entender problemas e testar funcionalidades.

Provavelmente, temos um navegador de preferência, mas para este curso utilizaremos o Google Chrome. Caso ainda não o tenhamos instalado, é recomendado pausar o vídeo, pesquisar no Google, baixar e instalar o Google Chrome, e depois retornar para continuar.

Explorando as ferramentas de desenvolvimento do Google Chrome

O Google Chrome, assim como a maioria dos navegadores, possui um conjunto de ferramentas que auxiliam no desenvolvimento. Essas ferramentas são acessíveis ao clicar com o botão direito do mouse em qualquer lugar da tela e selecionar a opção "Inspecionar" (ou "Inspect", se estiver em inglês). Ao fazer isso, o navegador abrirá uma coluna à direita com diversas opções para utilizarmos.

Estamos em um curso de desenvolvimento web, focado em front-end, e utilizaremos o navegador para escrever código HTML, CSS e JavaScript, conforme visto em outros cursos. Ter essas ferramentas disponíveis no navegador nos ajuda a investigar e testar funcionalidades.

Investigando e modificando o HTML e CSS de um site

Por exemplo, ao acessar o site da Alura (www.alura.com.br), podemos estar curiosos para saber como o HTML da página foi montado. Para isso, clicamos com o botão direito e selecionamos "Inspecionar". A aba "Elements" será exibida, mostrando o código HTML do site. Se não estiver selecionada, podemos clicar nela. Dentro da aba "Elements", encontramos o HTML do site da Alura.

Além disso, podemos verificar o estilo do site, como a cor da palavra "tecnologia" ou o verde utilizado. Na aba "Elements", há uma segunda coluna com a aba "Styles", onde podemos ver todo o código CSS do site da Alura.

Testando modificações temporárias no navegador

Essas ferramentas são úteis para testar e investigar. Podemos fazer várias modificações nas ferramentas de desenvolvimento para testar como o site ficaria. No entanto, essas modificações não são permanentes. Vamos testar aos poucos, por exemplo, trocando o texto "desenvolva sua carreira em tecnologia" para "desenvolva sua carreira em front-end".

Podemos clicar com o botão direito sobre a palavra "tecnologia", selecionar "Inspecionar" (ou "Inspect"), e na aba "Elements" será exibido exatamente onde esse texto está localizado. Podemos interagir com isso, por exemplo, dando dois cliques para apagar a palavra "tecnologia" e escrever o que desejarmos, como "Front-end", e pressionar "Enter". A alteração será refletida imediatamente.

Utilizando o Developer Tools para investigações mais profundas

Podemos testar várias coisas aqui. Por exemplo, se não quisermos que a cor seja azul, podemos alterá-la para vermelha. No CSS, onde está especificada a cor azul, podemos trocá-la para vermelha, e a mudança será visível. As ferramentas do desenvolvedor, ou Developer Tools, nos ajudam a investigar e testar modificações, além de visualizar o que estamos fazendo. Podemos renderizar, salvar o arquivo, acessar o site e verificar as alterações. No entanto, se atualizarmos a página, todas as modificações feitas serão perdidas, pois estamos alterando apenas no navegador para fins de investigação. Os arquivos oficiais, como HTML, CSS e JavaScript, permanecem inalterados. Para tornar as modificações permanentes, precisaríamos alterá-las nos arquivos originais.

Explorando funcionalidades adicionais do Developer Tools

O que mais o Developer Tools oferece? Há diversas funcionalidades, mas durante o curso, utilizaremos bastante a aba "Elements" para visualizar o HTML e a aba "Styles" para entender o CSS. Quando chegarmos à parte de JavaScript, usaremos bastante o "Console", que nos informa sobre erros de JavaScript. A aba "Network" é importante para entender quais arquivos estão sendo requisitados e recebidos de um servidor, algo que vimos em cursos anteriores ao discutir cliente, servidor e requisições de arquivos. Utilizaremos bastante essa aba, especialmente na parte de JavaScript.

Outra opção interessante é a "Device Toolbar", que nos permite escolher um tipo de dispositivo móvel para entender como o site ficaria em um celular ou tablet. Ao clicar no ícone de um computador com celular, ao lado da barra "Elements", podemos escolher um dispositivo para testar ou inserir manualmente as medidas. Por exemplo, podemos ver como o site da Alura se comportaria em um iPhone 14 Pro Max, ajustando as dimensões para 430 por 932.

Incentivando a prática e exploração das ferramentas

Recomendamos baixar o Google Chrome, se ainda não tiver, e explorar essas ferramentas. Acesse um site de sua escolha, como o G1, e experimente modificar o título de uma notícia. Explore e divirta-se com essas funcionalidades. Com isso, estamos prontos para começar a escrever código e colocar a mão na massa. Esperamos vocês no próximo vídeo.

Sobre o curso HTML e CSS: ambiente, estrutura e estilo

O curso HTML e CSS: ambiente, estrutura e estilo possui 449 minutos de vídeos, em um total de 56 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Configurando o ambiente e criando o primeiro site
• Explorando as tags HTML
• HTML semântico e boas práticas de layout
• Estilizando e adaptando layouts com CSS
• Compartilhando o projeto com Git e GitHub
• Hospedagem e publicação de sites