[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

A frontpage and HTML form developed for a social project at a local church with other 3 students at my frontend class in university, we used vanilla JS and no frameworks so the newer students can learn classes in HTML and CSS and DOM in details.

Notifications You must be signed in to change notification settings

lorismilloni/social_coders

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

83 Commits
 
 
 
 
 
 

Repository files navigation

Autores

image

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 Download

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:

Web site

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

About

A frontpage and HTML form developed for a social project at a local church with other 3 students at my frontend class in university, we used vanilla JS and no frameworks so the newer students can learn classes in HTML and CSS and DOM in details.

Topics

Resources

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •