lucas-de-sa / gh-pages

Exercício onde as pessoas criaram seu primeiro WebSite.

MeuPrimeiroSite

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.

Passo a Passo

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

Organizando o Site (O HTML)

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:

• http://www.w3schools.com/
• https://developer.mozilla.org/en-US/docs/Web/HTML

A Cara do site

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/

Tutoriais que dão uma visão geral

• 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

Ajuda e Suporte

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!