Autores

social_coders

Repositório e portfólio oficial da empresa Social Coders.

Bem vindo ao nosso repositório

Aqui é possível acompanhar todo nosso processo de desenvolvimento

Para baixar o nosso projeto basta clicar no botão azul < > Code e fazer o download da pasta zipada

Após isso, é só clicar em algum dos arquivos html disponíveis e selecionar para abrir no seu browser, a navegação vai ser toda por lá.

Aqui uma visualização do que desenvolvemos:

Utilizamos as seguintes tecnologias:

HTML, CSS, JavaScript, Regex, Git, GitHub, VSCode.

Obrigada pela visita!

Aqui organizamos o nosso desenvolvimento e salvamos algumas das nossas referências usadas para desenvolvimento

Orientação para usar o repositório no Git Hub ⚠️

Atenção! Leia atentamente as instruções que vocês encontrarem!

1. Crie uma conta no site do GitHub, pense que você usará para postar seus projetos além de acessar esse repositório do trabalho, já é um treinamento.
2. Pesquise como fazer a instalação da ferramenta Git no seu sistema operacional.
   Git é a ferramenta local de versionamento, GitHub é o repositório online.
3. Abra o VSCode na pasta que você deseja clonar o repositório.
4. Abra o terminal do VSCode com o comando ctrl+j.
5. Abra seu browser e vá para a página do nosso projeto: https://github.com/lorismilloni/social_coders
6. No botão azul "Code", clique e selecione "SSH", copie esse link.
7. Volte para seu terminal (que está na pasta que você copiará o repositório) e escreva:
   git clone link_copiado
   Aperte enter no final desses comandos.
8. Pronto! Verifique se você tem os arquivos no seu computador.
9. Agora crie sua branch de trabalho!
10. Digite no terminal do VSCode o comando:
    git checkout -b meu_nome
    Exemplo: git checkout -b loris_milloni
11. Comece a alterar os arquivos, lembre de salvar sempre! (ctrl+s é o atalho para salvar)
12. Terminou uma alteração? Adicione!
    Use o comando git add .
    Usando o ponto você adiciona ao Git todos os arquivos que alterou.
13. Commite suas alterações, é como oficializar os arquivos que adicinou.
    Use o comando: git commit -m 'nas aspas digite o que fez, tipo, criei um botão'
14. Confira se está na sua branch
    Digite no terminal git branch
15. Agora chegou a hora de colocar essas alterações no repositório online! Digite no terminal git push -u origin nome_da_sua_branch
    Depois desse primeiro uso, é só digitar git push.
16. Ainda não acabou! Vá na página do projeto e crie seu PULL REQUEST
    A base é a branch main, e a compare é a sua branch
    Clique em Create Pull Request e confirme, outra pessoa vem aprovar dps
    Para mais orientação disso tem esse vídeo
    Como criar seu primeiro Pull Request no GitHub
17. É necessário atualizar a branch sempre, eu vou ajudar com isso, mas os comandos de referência são:
    git checkout main (vai para a branch principal que recebeu os merges)
    git pull (para puxar as informações atualizadas do repositório)
    git checkout sua_branch (ATENÇÃO! tudo deve ter sido salvo, commitado, e pushado pro repositório)
    git rebase main

Nessa playlist tem vídeos curtos para ajudar:

Instalando o Git Clonando um repositório para sua máquina O que é uma branch e criando uma branch

O que falta fazermos no trabalho do Cotolengo?

1. Formulário ✔️
   1.1 Criar os elementos do formulário ✔️
   1.1 Adicionar o formulário oficial na página form.html ✔️
   1.2 Estilizar o formulário ✔️
2. Criar o formulário para voluntários ✔️
   2.1 Estilizar o formulário para voluntários ✔️
3. Criar a página sobre ✔️
   3.1 Criar o texto da página sobre ✔️
4. Criar a home page ✔️
   4.1 Adicionar textos e imagens à homepage ✔️
   4.2 Criar footer para Cotolengo ✔️
   4.3 Criar footer para a Empresa ✔️
   4.4 Criar Header com acesso para as páginas ✔️
   4.5 Estilizar a home page ✔️
5. Melhorar responsividade ✔️
6. Adicionar botões ✔️
7. Adicionar JavaScript para validações ✔️
8. Conferir os padrões de HTML Semântico ✔️

Orientações para uso do DOM (document object model)

Manipular DOM com JavaScript

Paleta de cores

Paleta escolhida Cotolengo

Referência elementos HTML

HTML
How to Build HTML Forms Right: Semantics
HTML Semantic Elements
Semantics
HTML semantics cheat sheet
How to structure a web form
Flexbox CheatSheet
CSS @media Rule
Page Headers And Footers