Aprender a codificar é sempre excitante e divertido para todos e quando se trata de entrar no mundo da programação a maioria das pessoas começa com a coisa mais fácil de HTML e CSS. Toda jornada de codificação para iniciantes no frontend começa com estes dois blocos básicos de construção e você precisa ser criativo quando se trata de projetar uma bela aplicação.
Inicialmente, os iniciantes gostam de fazer botões, adicionar os links, adicionar imagens, trabalhar com layout e um monte de coisas legais no design web, mas quando se trata de fazer um projeto usando apenas HTML e CSS eles ficam presos e confusos sobre o que eles devem fazer para praticar todas essas coisas. Afinal, seu conhecimento limita-se apenas a HTML e CSS. Não importa o quê, depois de aprender tudo em algum momento você vai perceber que fazer um projeto é importante para a prática de HTML e CSS. Você precisa verificar como HTML e CSS funcionam juntos para projetar uma bela aplicação frontend. Então a questão é quais são alguns projetos para iniciantes que você pode construir para praticar tudo o que aprendeu… Vamos discutir isso.
Uma Página de Homenagem
O site mais simples que você pode fazer como iniciante é uma página de homenagem de alguém que você admira em sua vida. Ele requer apenas conhecimentos básicos de HTML e CSS. Faça uma página web escrevendo sobre essa pessoa adicionando a sua imagem. No topo da página web, adicione a imagem e o nome da pessoa e abaixo que dão layout para o resto dos detalhes. Você pode usar parágrafos, listas, links, imagens com CSS para dar uma aparência decente. Adicione uma cor de fundo e um estilo de fonte adequados na sua página web. A maioria das partes que você pode fazer usando HTML, mas para dar-lhe uma melhor aparência usando um pouco de CSS. Pegue ajuda do link dado abaixo.
- Minha Página de Homenagem
- Página de Homenagem ao Steve Jobs
- Página de Homenagem ao Albert Einstein
Página Web Incluindo Formulários
Forms são sempre uma parte essencial de qualquer projeto e você estará trabalhando com muitos formulários na maioria das aplicações, então por que não praticá-lo mais cedo e testar seu conhecimento. Uma vez que você se familiarize com o campo de entrada ou tags básicas em HTML para criar um formulário faça um projeto usando todas essas tags. Como usar um campo de texto, caixa de seleção, botão de rádio, data e outros elementos importantes em um único formulário. Você estará aprendendo como dar uma estrutura adequada a uma página web enquanto cria um formulário. O conhecimento de HTML/HTML5 é suficientemente bom, mas você pode usar um pouco de CSS para fazer o projeto parecer melhor. Pegue ajuda dos links abaixo.
- Survey Form
- Good Vibes Form
- Survey Form
Parallax Website
Um website parallax inclui imagens fixas no fundo que você pode manter no lugar e você pode percorrer a página para ver diferentes partes da imagem. Com conhecimentos básicos de HTML e CSS, você pode dar um efeito de paralaxe a um website. Usar o efeito de paralaxe no design da web é realmente popular e dá um visual bonito à página web. Experimente e divida a página inteira em três a quatro seções diferentes. Defina 3-4 imagens de fundo, alinhe o texto para diferentes seções, defina margem e preenchimento, adicione posição de fundo e outros elementos e propriedades CSS para criar um efeito de paralaxe. Você pode obter ajuda de Parallax Website.
Landing Page
A landing page é outro bom projeto que você pode fazer usando HTML e CSS, mas requer um sólido conhecimento destes dois blocos de construção. Você estará usando muita criatividade ao fazer uma página de aterrissagem. Você vai praticar como adicionar rodapé e cabeçalho, criar colunas, alinhar-itens, dividir as seções e muitas coisas. Você terá que usar o CSS cuidadosamente, tendo em mente que elementos diferentes não se sobrepõem uns aos outros. Você também cuidará das combinações de cores, acolchoamento, margem, espaço entre seções, parágrafos e caixas. As combinações de cores devem ir bem umas com as outras para diferentes secções ou fundos. Você pode obter ajuda no link abaixo.
- Aterragem em tela cheia
- Página de aterragem
Site de restauração
Showcase seus sólidos conhecimentos de HTML e CSS criando uma bela página web para um restaurante. Fazer um layout para um restaurante será um pouco complicado do que os exemplos de projetos anteriores. Você estará alinhando os diferentes itens de comida e bebidas usando uma grade de layout CSS. Você estará adicionando preços, imagens e você precisará dar a ele uma bela aparência e sensação, usando a combinação adequada de cores, estilo de fonte e imagens. Você pode adicionar galeria de imagens para diferentes itens de comida, você também pode adicionar imagens deslizantes para uma melhor aparência. Adicione links para redireccionar para páginas internas. Torne-o responsivo ao definir um viewport, usando consultas de mídia e grid. Você pode obter ajuda de Restaurante Website.
Uma Página Web de Evento ou Conferência
Você pode fazer uma página estática segurando um evento ou conferência. As pessoas que estão interessadas em participar da conferência criam um botão de registo para elas. Mencione diferentes links para orador, local e horário na parte superior da seção de cabeçalho. Descreva a finalidade da conferência ou a categoria de pessoas que podem ser beneficiadas com esta conferência. Adicione uma introdução e imagens do orador, detalhes do local e o objectivo principal da conferência na sua página web. Divida a página em seções, acrescente cabeçalho e rodapé mostrando o menu. Use cores de fundo adequadas que podem combinar bem umas com as outras para várias secções. Escolha um estilo de fonte decente e uma cor de fonte que combine com o tema da sua página web. Isso requer conhecimento profundo de HTML/HTML5 e CSS. Você pode obter ajuda da Style Conference.
Music Store Page
Se você é um amante de música, você pode fazer uma página web para ela. Requer conhecimentos de HTML5/CSS3. Adicione uma imagem de fundo adequada descrevendo a finalidade ou o que é a página. Na seção de cabeçalho, adicione menus diferentes. Adicione botões, links, imagens e alguma descrição sobre a coleção de músicas disponíveis. Na parte inferior mencione os links para compras, loja, carreira ou detalhes de contato. Você também pode adicionar outros recursos em suas páginas da web, como uma opção de teste, cartões de presente ou assinatura. Faça com que a visualização das definições seja reactiva ou utilize consultas de media e grelha. Você pode obter ajuda do myTunes.
Photography Site
Se você tem um conhecimento profundo de HTML5 e CSS3, você pode fazer um site de fotografia com uma página de resposta. Use flexbox e consultas de mídia para obter respostas. Adicione o nome da empresa com uma imagem (relacionada à fotografia) no topo (página de destino). Abaixo disso, mostre o seu trabalho adicionando várias imagens. Mencione o detalhe do contacto do fotógrafo na parte inferior (rodapé). Adicione um botão para visualizar o seu trabalho. Este botão vai levá-lo directamente para a secção de imagens. Você precisa cuidar da margem, acolchoamento, combinação de cores, tamanho de fonte, estilo de fonte, tamanho de imagem e estilo de um botão. Você pode obter ajuda da Acme Photography.
Personal Portfolio
Com conhecimento de HTML5 e CSS3, você também pode criar o seu portfolio. Mostre suas amostras de trabalho e habilidades no seu portfólio com seu nome e fotos. Você também pode adicionar seu CV lá e hospedar seu portfólio completo na conta do GitHub. Na sua seção de cabeçalho mencione alguns menus como sobre, contato, trabalho ou serviços. No topo adicione uma de suas imagens e se apresente lá. Abaixo disso adicione algumas amostras de trabalho e por fim (rodapé) adicione informações de contato ou conta de mídia social. Você pode obter ajuda do Portfólio Pessoal.
Documentação Técnica
Se você tem um pouco de conhecimento de Javascript então você pode criar uma página web de documentação técnica. Requer conhecimentos de HTML, CSS e javascript básico. Divida a página web inteira em duas seções. O lado esquerdo cria um menu com todos os tópicos listados de cima para baixo. Do lado direito você precisa mencionar a documentação ou descrição para os tópicos. A idéia é que uma vez que você clique em um dos tópicos da seção da esquerda, ele deve carregar o conteúdo à direita. Para clicar, você pode usar a opção javascript ou CSS bookmark. Você não precisa fazer muito chique, apenas dar um visual simples e decente, que pareça bom para a documentação técnica. Você pode obter ajuda da Documentação Técnica.
Helpful Link: 10 Dicas para um Desenho Web Eficaz em 2019
