A construção de projetos é muito importante para aprender a programar. Quando você cria um projeto, expande seu portfólio e aprende a aplicar suas habilidades a novas situações.

Nós acabamos de publicar um curso de 2 horas no canal YouTube freeCodeCamp.org em Espanhol que o guiará passo a passo através da construção de 3 projetos com HTML, CSS e JavaScript. Você praticará suas habilidades construindo uma barra de navegação responsiva com menus dropdown, um slider e uma página de destino com um modal personalizado.

Se você tem amigos que falam espanhol, você é bem-vindo a compartilhar a versão em espanhol deste artigo com eles.

O Jordan Alexander Cruz Garcia ministra este curso. Ele é um desenvolvedor web que adora compartilhar seu conhecimento e ensinar outros sobre o maravilhoso mundo do CSS.

💡 Dica: Observe que o curso se concentra em HTML e CSS, mas também requer conhecimento básico de JavaScript para a implementação da interatividade.

HTML, CSS e JavaScript

HTML significa HyperText Markup Language e CSS significa Cascading Style Sheets. Enquanto HTML fornece a estrutura e o conteúdo de um site, CSS determina como o conteúdo é exibido. Ele controla os aspectos visuais do site, como fontes, cores, layouts, espaçamento e animações.

Com CSS, você pode facilmente criar diferentes estilos e layout para diferentes tamanhos de tela, fazendo com que o seu site seja ótimo em computadores, tablets e dispositivos móveis.

💡 Dica: Sites que se adaptam a diferentes tamanhos de tela são chamados de “sites responsivos”.

Normalmente, escrevemos CSS the um arquivo externo que chamamos de “fonte de estilos”. Em seguida, ligamos essa fonte de estilos ao arquivo HTML, aplicando todos os estilos aos elementos HTML correspondentes com base em seletores e propriedades CSS.

Separar o conteúdo do site de sua apresentação é muito útil. Isso resulta em uma estrutura de projeto mais manutenível e um processo de renderização mais eficiente, pois os navegadores conseguem renderizar a estrutura mais rápido, enquanto fazem o download dos estilos CSS em plano de fundo.

Basicamente, CSS é uma ferramenta essencial para criar os sites bonitos, visuais e amigáveis que vemos hoje.

JavaScript adiciona interatividade ao site. Ele transforma elementos simples em elementos interativos para criar experiências de usuário engajantes.

Projetos de HTML, CSS e JavaScript em Espanhol

Muito bem. Agora que você sabe mais sobre HTML, CSS e JavaScript, vamos ver os projetos que você vai construir durante o curso.

Projeto 1: Barra de Navegação

Você começará construindo uma barra de navegação com menus suspensos. essa barra de navegação será responsiva, portanto, ela expandirá ou encolherá para caber no tamanho da tela. Se a tela for muito pequena, ela transformar-se-á automaticamente em uma barra lateral.

💡 Dica: As principais opções sempre serão exibidas. Quando o usuário clicar em “Sobre” ou “Projetos”, uma lista suspensa com opções adicionais será exibida.

Versão de desktop

Aqui você pode ver a versão de desktop.

Versão mobile

Esta é a versão mobile que você verá em dispositivos pequenos.

💡 Dica: Esta técnica de ocultar e alternar a barra de navegação é usada frequentemente para otimizar o espaço para o conteúdo o máximo possível.

Projeto 2: Slider

A seguir, você vai construir um slider com três posições que mudarão quando o usuário clicar nas setas esquerda ou direita. Cada posição terá um título, um parágrafo curto e uma imagem circular.

💡Dica: Sliders são úteis para compartilhar feedback do usuário, citações e avaliações.

Projeto 3: Página Inicial

Finalmente, você vai construir uma página inicial passo a passo com o CSS Grid.

Quando o usuário clicar no botão “Junte-se conosco!”, uma caixa de diálogo personalizada será exibida. Você implementará esta caixa de diálogo com HTML, CSS e JavaScript passo a passo.

Se você estiver pronto para começar a praticar suas habilidades em HTML, CSS e JavaScript, veja o curso no canal YouTube freeCodeCamp.org em espanhol:

✍️ Curso criado por Jordan Alexander Cruz Garcia (AlexCG).