HTML e CSS formar a base do moderno Desenvolvimento da Internet. O HTML outline como uma página da internet está estruturada e o CSS outline seu estilo. Embora os dois idiomas sejam relativamente fáceis de aprender, depois de conhecer o básico, você ainda precisará aprimorar suas habilidades com a prática.
Os desafios do código são uma ótima maneira de aprimorar suas habilidades de programação e combiná -las de maneiras diferentes. Aqui estão 11 desafios de código HTML e CSS que ajudarão você a levar suas habilidades para o próximo nível. Para começar, basta escolher um desafio, abrir um espaço de trabalhoe comece a codificar.
Observe que, embora esses desafios sejam projetados para iniciantes, você ainda precisará ter um entendimento básico de HTML e CSS. Se você precisar de uma atualização, use os cursos abaixo:
1. Crie uma página de homenagem
Escolha uma figura histórica que seja significativa para você e crie uma página da Internet dedicada a eles. A página da internet deve incluir:
- Um título ou cabeçalho Com o nome da pessoa
- Uma imagem da pessoa
- Uma legenda para a imagem
- Uma linha do tempo da vida da pessoa na forma de um lista
Isso pode ser concluído apenas com HTML, mas use o CSS para dar algum estilo.
2. Crie uma página da Wikipedia
A Wikipedia é uma das espacas da Web e possui um format relativamente simples. Crie uma página da Wikipedia sobre o tópico de sua escolha. Deve incluir:
- Um título ou cabeçalho
- Um índice com hyperlinks para seções dentro da página
- Hyperlinks de números de superscritos que vinculam ao número correspondente na seção de referência
- Uma lista ordenada de referências
3. Crie uma página de resultados de pesquisa HTML e CSS somente
Crie uma página de resultados de pesquisa simulada do Google. Deve incluir:
- O logotipo do Google
- Uma barra de pesquisa no topo
- Uma lista de resultados de pesquisa com hyperlinks clicáveis
Aqui está um exemplo do que pode ser.
4. Crie um formulário de pesquisa
Formulários HTML são uma parte importante de muitos websites. Crie um formulário para uma pesquisa sobre o tópico de sua escolha.
Inclua uma variedade de opções de resposta, incluindo campos de texto, suspensos, botões de rádio, caixas de seleção e um botão de envio. Não se esqueça de adicionar um título e considere usar o CSS para melhorar a aparência do seu formulário. Aqui está um exemplo.
5. Crie uma galeria de imagens
As galerias de imagens podem ser um modelo essencial para muitos websites – como portfólios de fotografia, por exemplo. Escolha um tema que você gosta (filmes, plantas, arquitetura) e crie uma galeria de imagens usando o Float ou o Exibir Flexbox.
Esta galeria deve conter:
- Um título ou cabeçalho
- Mais de 8 imagens clicáveis com descrições
- Uma barra de navegação superior
- Um rodapé, completo com hyperlinks de mídia social
6. Crie um website de paralaxe
Um website de paralaxe tem uma imagem fixa em segundo plano que permanece no lugar enquanto você percorre outras partes da página. É um efeito standard em internet design e dá uma aparência elegante a uma página.
Projete uma página da paralaxe. Divida a página em três ou quatro seções. Defina três ou quatro fundo imagens e alinhar texto a cada seção. Você vai usar margensAssim, preenchimentoe posicionamento de segundo plano para criar o efeito. Aqui está um exemplo de um paralaxe website.
7. Crie uma página de destino do produto
Muitos websites são projetados para mostrar e vender produtos. Uma página de destino de produtos precisa ser atraente, informativa e fácil de ler para atrair os consumidores. Sua página de destino de produto deve incluir:
- Uma foto do produto
- Um cabeçalho e rodapé
- Colunas
- Várias seções
Considere o esquema de cores e verifique se elementos Não se sobrepõem.
8. Crie um website de restaurante
Um website de restaurante é semelhante a uma página de destino de produtos, na medida em que deve mostrar os itens de restaurante e cardápio. É mais complexo, porém, com imagens de diferentes alimentos e bebidas. Primeiro, crie um website de restaurante responsivo usando uma visualização e consultas de mídia.
9. Crie um quadro de xadrez
Este desafio ensina como criar e formatar um mesa. Você também precisará aprender a inserir caracteres Unicode.
Crie um quadro de xadrez. A placa deve ser cores alternadas e uma grade de oito por oito. Aqui estão os caracteres Unicode que você precisará para as peças.
- Rei Branco: ♔
- Rainha branca: ♕
- Rook White: ♖
- Bispo branco: ♗
- Cavaleiro branco: ♘
- Peão branco: ♙
- Rei Negro: ♚
- Rainha Negra: ♛
- Rook preta: ♜
- Bispo preto: ♝
- Cavaleiro das costas: ♞
- Peão preto: ♟
10. Crie um evento ou website de conferência
Esse desafio continua o tema de construir páginas atraentes da internet. Este incluirá um botão de registro que vincula a um formulário de registro. Você também precisará de detalhes e imagens do alto -falante, intérprete e native. Descreva o evento e inclua várias seções junto com um cabeçalho e rodapé. Considere o esquema de cores e use fontes legíveis e reflita o tema do evento.
11. Crie um website de portfólio
Pegue o que você aprendeu ao longo dos outros desafios e crie um website de portfólio. O website deve refletir suas habilidades.
Inclua uma página com seu currículo, amostras de trabalho, uma foto e um menu superior com hyperlinks para uma página Sobre, página de contato e quaisquer outras páginas que você queira incluir. No rodapé, inclua suas informações de contato e hyperlinks para suas contas de mídia social relevantes.
Construindo suas habilidades HTML e CSS
Os desafios do código são apenas uma maneira de criar suas habilidades HTML e CSS. Você também pode aprimorar os cursos como Aprenda htmlAssim, Aprenda CSSe Aprenda CSS intermediário. Esses cursos se baseiam um no outro, embora você sempre possa entrar em uma classe intermediária se já tiver um bom conhecimento básico do CSS.
Os caminhos de habilidade são outra ótima maneira de aprender habilidades específicas. Nosso Aprenda a construir websites O caminho de habilidade o leva a HTML e CSS, juntamente com o design responsivo e acessibilidade. Você terminará a turma com um website polido que você pode usar em seu portfólio. Também temos um curso independente em Design responsivo.
Se você se sentir confiante em suas habilidades HTML e CSS, talvez seja hora de aprender outro idioma. Nosso curso em JavaScript Construa -se em HTML e CSS para ajudá -lo a tornar os websites ainda mais receptivos e dinâmicos. Depois de aprender JavaScript, oferecemos um curso sobre Construindo websites de javascript interativos Isso reúne todas essas habilidades.
Este weblog foi publicado originalmente em novembro de 2021 e foi atualizado para incluir desafios adicionais de HTML e CSS para iniciantes.
Se você está procurando entrar em uma nova carreira, criar suas habilidades técnicas ou apenas codificar por diversão, estamos aqui para ajudar a cada passo do caminho. Confira nossa postagem no weblog sobre Como escolher o melhor plano de codecademia para você Para aprender sobre nossos cursos estruturados, certificações profissionais, recursos de preparação para entrevistas, serviços de carreira e muito mais.
