Its sempre excitante na primeira vez que você tenta aprender uma nova habilidade. Especialmente codificação.

No entanto, se você não tem prática, você esquece a maior parte do que você aprende. Portanto, em algum momento você percebe que precisa praticar o que aprendeu. Caso contrário, você vai esquecer tudo.

É aí que entram os projetos. Os projetos são uma boa maneira de praticar o que você aprendeu. E confie em mim, você quer trabalhar em alguns projetos. Você pode usar os projetos para mostrar o que você trabalhou.

>

Mulher trabalhando em um projeto usando um computador

Como novato, escolher projetos que correspondam ao seu nível de conhecimento atual pode ser assustador. Você pode escolher um projeto. Então o projeto torna-se grande demais para ser realizado com o seu conhecimento atual. Pelo menos, foi o que eu passei nesta jornada de aprendizagem.

Eu curei alguns projetos que eu achei apropriados, mesmo que seu conhecimento seja limitado apenas a HTML e CSS. Esses projetos estão disponíveis em sites de aprendizagem populares onde você encontrará informações adicionais sobre o que você estará enfrentando.

1. Uma página de homenagem

>>

>

Tributo página screenshot
>

Escreva uma homenagem de alguém que você admira e publique como uma página web. Este projecto envolverá trabalhar com a adição de imagem, links, listas e parágrafos. Este projeto exigirá o conhecimento de HTML para ser criado. No entanto, você pode usar um pouco de CSS para fazer o projeto parecer melhor.

2. Um formulário de pesquisa

>

>>

>

>

>

Forms são úteis na coleta de dados online. Este projecto irá testar principalmente as suas competências em todo o tipo de inputs. Isto irá testar o seu conhecimento de formulários e estruturação da sua página web. O formulário não é necessário para enviar quaisquer dados.

Its a build up from the tribute page. Este projeto irá requerer conhecimento de html/html5 para criar.

3. Construir uma página de aterrissagem do produto

>

Página de aterrissagem do produto – Projeto do autor

Esta irá testar seus conhecimentos de HTML e CSS. Você será solicitado a praticar a criação de colunas e o alinhamento de itens dentro das colunas. Você também precisará fazer edição básica de imagens, por exemplo, cortar e redimensionar para fazer imagens perfeitas para a sua página web.
Você precisará de sólidos conhecimentos de HTML/CSS.
4. Construa uma Página de Documentação Técnica

>

>

>

>Página de documentação do projeto
>

Esta tarefa exigirá algum conhecimento de HTML CSS e bootstrap ou JavaScript. A idéia básica é: quando você clica em qualquer tópico à esquerda, ele carrega esse conteúdo à direita.

Estou tentando este projeto e eu irei postar o projeto final uma vez que esteja feito.

5. Build a Personal Portfolio Webpage

>

>>

Portfolio mostrando projetos em que você trabalhou.

Você estará praticando todas as habilidades que você aprendeu em HTML e CSS. Você também precisará saber como recortar e redimensionar imagens. Se você não tiver opções use o Gimp. É gratuito, de código aberto e disponível em Windows e Linux .

Se tiver pressa em fazer um portfolio, pode ler o artigo do Brian sobre como fazer um portfolio online usando um tema/template pronto.

6. Google.com página

>

>

>

>

>

>

>

Screenshot de google.com

Sim, já o viu muitas vezes. Mas você pode replicá-lo. A página simples do google.com com ícones, o logotipo do google, uma caixa de texto e dois botões. Você pode fazer um parecido com a página do google.com. Neste projeto você está fazendo parecer que google.com não funciona como google.com.

Você precisa saber tanto HTML como CSS.

7. google.com Página de resultados de pesquisa

>>

>

Screenshot da página de resultados de pesquisa do Google

Você criará uma página com o formato de um resultado de pesquisa do Google. A sua página deverá ter os 10 resultados normais e a navegação para as páginas seguintes na parte inferior.

Esta é uma actualização a partir da página básica do google.com acima. Entretanto, você deve ser capaz de reutilizar parte do código neste projeto.

Tambem, faça a página parecer um pouco, mas a funcionalidade não deve ser uma preocupação agora.

Conclusão

Se você está procurando aprender o básico de HTML, você pode conferir minha pequena lição introdutória em HTML.

Você fez um projeto básico enquanto estava aprendendo HTML e CSS? Se você os compartilhou abaixo e ajudou outros alunos a encontrar idéias ‘simples’ mas desafiadoras para experimentar.

Deixe uma resposta

O seu endereço de email não será publicado.