Este projeto originou-se na palestra do dia 28 de abril de 2017 do FreeCodeCamp-SP (Slides e post dos slides até amanhã à noite). O objetivo desse projeto é de movimentar a comunidade, ensinar as tecnologias propostas e fornecer um projeto feito do início ao fim e totalmente compreensível ao desenvolvedor.
Se você se sentir perdido ou confuso não hesite em perguntar. Não existe pergunta básica ou burra!
Não. Nesse momento, o projeto é todo seu. Você certamente pode e deve procurar ajuda, conversar com amigos e pedir opiniões mas o código é seu por hora.
O projeto é criar uma página de eventos, esses eventos podem vir de qualquer lugar, mas, devem ser ao menos 5.
Cada evento é composto por :
- Nome
- Data
- Horário
- Local
- Descrição
- Organizador(es)
- Foto
Que tipo de evento? Podem ser eventos do seu gosto como shows, festas etc ou eventos de desenvolvimento como o FrontInSampa, vamos ver ele no exemplo abaixo:
Nome: Front In Sampa 6ª edição
Data: 1/7/2017
Horário: 8:00-19:00
Local: Teatro hotel do Maksoud Plaza: R. São Carlos do Pinhal, 424 - Bela Vista, São Paulo
Organizadores: Front In Sampa
Foto: Alguma foto
A informação acima não é tão interessante né? Cabe a você usar suas habilidades de HTML, CSS e JS para fazer isso ser melhor!
Lembre-se que você deve apresentar ao menos 5 eventos na mesma página. Parecido com o que o facebook faz.
O guia, vai te ajudar a começar de forma bem básica para usar o material auxiliar.
Para a primeira parte devem ser seguidas as seguintes regras:
- Utilizar apenas HTML, CSS e Javascript SEM BIBLIOTECAS;
- Subir o projeto no gitHub,bitBucket ou gitLab. (Curso de git em breve!).
- O projeto deve ser apresentado de forma diferente e funcional em dispositivos móveis, celulares e desktops. (Em breve material sobre como emular e criar isso).
Os conceitos da primeira parte estão mais do que cobertos nos cursos, abaixo seguem os pontos de enfoque com alguns recursos adicionais em português:
- HTML e CSS o que são ?
- Introdução à html e css
- Introduction to html
- Introdução ao css
- Tags e seus sentidos, porque usar um parágrafo, div ou section?
- Unidades relativas: Porcentagem ,em , rem, vh , para que serve? quando usar?
- Posicionamento posições absolutas, relativas e fixas. Modelo de caixa (box-sizing):
- Design fluído e responsivo tamanhos minímos e máximos.
- Media queries
- Como usar seu editor
- Como usar seu inspetor.
Guia mais completo no futuro. A segunda parte consiste em copiar o que foi feito em HTML e CSS para SASS e Pug e aprender a utilizar a linha de comando e a ferramenta npm. E manipular o DOM
- O que é a linha de comando e como usar?
- O que é o NPM e como usar?
- Pug
- SASS
- Como manipular o DOM no frontend
Mover o que foi feito para React utilizano o webpack, e começar a se tornar um(a) desenvovedor React(a) uma das tecnologias mais procuradas no mercado.
Há diversos recursos à sua disposição para aprender as tecnologias propostas e para se comunicar. Caso sinta confusão em algum momento, não hesite em pedir ajuda nos nossos canais de comunicação.
Está com alguma dúvida? Coloque nas issues do projeto (São como um fórum). Se quiser entre também no nosso grupo do facebook. Também temos um canal de comunicação instantânea no slack, é só pedir para entrar pelo facebook ou por aqui mesmo.
-
O que é HTML, CSS e Javascript - Veja os Cursos
-
Como usar o editor de códigos (ATOM) - Guia em inglês
-
Como escrever HTML
-
Como escrever CSS
-
Como escrever Javascript
-
Como fazer um site responsivo
LearnLayout - Aprenda CSS a fundo com um excelente curso em português
Khan Academy - Em português.
Code academy - Em português.
Udemy - Em português.
Javascript Eloquent - Em Português
Eloquent Javascript - Em Inglês