Exercício para criar seu primeiro WebSite utilizando apenas HTML e CSS. Sem JS, bibliotecas e frameworks por enquanto. Vamos criar apenas uma página simples sobre um assunto, que nem fosse uma página da wikipedia mais estilosa.
- Definir um tema que você fará o site. Um música, um cantor, um doce, uma comida típica, um local ou algo bem específico.
- Dar um fork no repositório: https://github.com/WebDevEACH/MeuPrimeiroSite
- Editar os arquivos: index.html e style.css com o conteúdo do meu site.
- Seguir esse passo a passo para transformar o meu repositório num site: https://help.github.com/articles/creating-pages-with-the-automatic-generator/
- IMPORTANTE: Você terá que renomear seu repositório para username.github.io, antes de publicar o seu site.
- Depois de seu site estiver públicado, compartilhe ele com a gente, vou colocar um link nesse repositório e é a melhor maneira de aprender é por feedbacks.
Comece pensando no que pode falar do tema. Tente dividir os temas em sessões e pense em que tipo de conteúdo vai em cada uma das sessões: textos, imagens, citações ou frases de destaque, GIFs, links para outros sites e iframes de redes socias(Como um post do Twitter, um botão de like do Facebook, um música do SoundCloud ou vídeos do YouTube).
Tente usar o maior número de tags diferentes possível. Para saber o que cada Tag faz olhe a documentação, recomendo esses sites:
Agora que já temos o conteúdo temos que decidir a cara do site e esse é o trabalho do CSS. Pense em que fonts usuará, nas cores, no tamanho das coisas, no espaçamento e na composição dos elementos da página.
A melhor coisa é explorar as possibilidades.
Esses sites explicam a maioria das propriedades e dos estados do CSS, com exemplos:
- https://css-tricks.com/almanac/
- https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
- http://tympanus.net/codrops/css_reference/
- http://www.w3schools.com/html/
- https://dash.generalassemb.ly/?vip=bento
- https://www.codecademy.com/courses/web-beginner-en-HZA3b/0/1?curriculum_id=50579fb998b470000202dc8b
Ninguém começa sabendo. E você não está sozinho. Então qualquer dúvida sobre o que utilizar como começar ou qualquer coisa poste no grupo e peça ajuda. Vamos criar sites juntos.
Boa sorte!