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.

>
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

>>
>
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

>
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

>
>
>
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

>>
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

>
>
>
>
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

>>
>
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.