Construir 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 vai guiar você passo a passo através da construção de 3 projetos com HTML, CSS e JavaScript. Você vai 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, o CSS decide 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”.

Nós normalmente escrevemos CSS the the um arquivo externo que chamamos de “fonte de estilos”. Em seguida, linkamos essa fonte de estilos ao arquivo HTML, aplicando todos os estilos aos elementos HTML correspondentes baseado 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 manutenvel e um processo de renderização mais eficiente porque os navegadores podem renderizar a estrutura mais rápido, enquanto fazem 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 envolventes.

Projetos em HTML, CSS e JavaScript em Espanhol

Impressionante. 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. Esta barra de navegação será responsiva, portanto, ela expandirá ou encolherá para caber no tamanho da tela. Se a tela for muito pequena, ela irá automaticamente transformar-se 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 móvel

Esta é a versão móvel 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 do 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 de destino

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

Quando o usuário clicar no botão “Junte-se conosco!”, um modal personalizado será exibido. Você implementará este modal com HTML, CSS e JavaScript passo a passo.

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

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