30 sites em 30 dias

Introdução

Aqui você vai encontrar uma lista de 30 sites. Sua tarefa, por 30 dias, é clonar cada um desses sites (apenas a página apontada pelo link). Um site por dia.

A ideia vem de estudos musicais: Exercícios com o objetivo de exercitar uma habilidade específica. Veja essa lista como estudos em HTML/CSS. O objetivo é exercitar o conhecimento em HTML e CSS de forma a ganhar habilidade prática.

Por que um site por dia?

Considere a Lei de Parkinson: O trabalho se expande para preencher o tempo disponível. Se o tempo dado para uma tarefa for muito grande, naturalmente vamos tentar utilizar todo aquele tempo.

Nada é perfeito, sempre há algo a melhorar. Poderíamos passar meses trabalhando em uma única página e nunca terminar. Esse é ponto de fazer uma página por dia: Com o tempo limitado, você é forçado a fazer escolhas, olhar para seu processo e identificar on melhorar.

Como usar esse repositório?

1. Faça um fork do repositório para ter sua própria cópia.
2. Crie um diretório com seu nome de usário do GitHub.
3. Para cada dia, crie um diretório com o nome do site em que vai trabalhar (siga os sites na ordem listada aqui, um por dia).
   1. Dentro do diretório, crie um arquivo index.html e outro styles.css. Todo seu trabalho vai acontecer nesses dois arquivos.
   2. Se precisar baixar imagens, crie um diretório images dentro do diretório do site e coloque as imagens lá.
4. Clone o site. Limite seu tempo de trabalho: 4 horas no máximo!! Tente melhorar seu tempo gasto a cada dia.. Caso as 4 horas se passem e você não tenha terminado o clone, pare mesmo assim. Reflita sobre o que poderia ter te ajudado a terminar mais rápido. Lembre-se: Não precisa ser perfeito, só precisa ser feito.
5. Pare, pense e responda as 3 perguntas abaixo:
   • 📚 Você aprendeu algo novo hoje? Se sim, o que?
   • 😓 O que poderia ter sido melhor hoje? Há algo que você queira melhorar para a próxima?
   • 🔥 O que foi bem hoje? Houve algo que você gostou?
6. Envie um pull-request com seu código e coloque a respostas para as perguntas acima no conteúdo.
7. Se prepare para o próximo dia.

Restrições

• Clone apenas a página apontada pelo link.
• Se o site tiver animações, ignore. Clone apenas a aparência.
• Não faça o site responsivo. Foque apenas em fazer com que ele funcione no navegador de um computador.
• Se o site tiver imagens, simplesmente salve-as no seu computador e jogue na pasta images do clone.

---

Sites

1. Hacker news
2. Lobsters
3. Google
4. Twitter -- Saia da sua conta pra ver a página de login
5. Interior design
6. Blogging for devs
7. Registro.br
8. Wesbos
9. AirApps
10. Petição pública Brasil
11. Tesouro direto
12. Indie Hackers
13. Not a nomad blog
14. Podcast hosting review
15. Ubiquiti
16. WhatsApp
17. Google Cloud
18. Transistor.fm
19. PocketCasts
20. Basecamp
21. Product Hunt
22. XP Investimentos
23. Stripe Press
24. Microsoft São Paulo
25. Laracasts
26. GoRails
27. TappsGames
28. IGDB
29. Dribbble
30. NuBank