Olá, seja bem vinda ao primeiro conteúdo do nosso Guia de Estudos. Se você não sabe do que to falando, veja esse post de introdução que fiz explicando tudo sobre o Guia de Estudos para aprender programação Front End.

Pra tentar facilitar o seu aprendizado, além das indicações de cursos, ao longo do post deixarei dicas para te ajudar a estudar e a fazer os seus primeiros códigos. E lá vai a primeira dica de todas: NÃO DESISTA! Complete todos os passos dessa postagem até o final, incluindo os cursos (que são gratuitos, super rápidos e para inciantes) – acho que vale a pena tentar, passar por todo o processo e ver o resultado final antes de decidir se você gosta ou não.

Programar pode parecer difícil e é, mas se você tentar, e for um passo de cada vez, estudar e pesquisar, você consegue. Acredite nisso.

Os cursos 

Separei dois cursos da Udemy pra iniciar, que são super rápidos (os dois juntos levam menos de 3 horas de duração)

Assista as aulas, faça os exercícios delas, e não precisa se apegar a decorar os códigos. É bom ter um lugar pra anotar eles onde você possa consultar e lembrar que eles existem: um bloco de notas, no google drive, ou até num caderninho – o jeito que der certo pra você!

Vai ter PROJETINHO sim: 

Depois de assistir as aulas, quero que você crie sua primeira página, que será uma página de cadastro. Ela não vai funcionar por enquanto, só precisa ter uma imagem, um texto, e um formulário.

Eu sou uma pessoa bem visual, então quis buscar uma inspiração bem fofinha pra vocês, mas obviamente não precisa ficar parecido.

Pra ver a imagem maior: https://www.behance.net/gallery/68433191/Sign-Up-Page-Design

Então os requisitos da página são: 

  • Ter uma imagem do lado esquerdo
  • Do lado direito, ter:
    • Título 
    • Campos de nome, email e senha 
    • Botão de “Cadastrar” 
  • As cores do fundo do lado esquerdo e do lado direito devem ser diferentes

A imagem acima é só pra te inspirar e mostrar um pouco de quanta coisa linda e incrível da pra fazer somente com HTML e CSS. E se quiser outras inspirações, você pode procurar no pinterest, por exemplo:

Pinterest – Sing up page (ideias)

Diquinhas pra criar a página: 

  • A imagem pode ser achada no Google mesmo, ou você pode usar um site de criar logo, ou algum programa de edição e criação de imagens caso você queira explorar suas habilidades de design.
  • Para colocar a imagem pesquise por image tag html 
  • Para os campos de cadastro, procure por input text html, input password html, input button html 
  • Bônus: Procure algum vídeo sobre “Inspecionar Elemento” e aprende a usar essa ferramenta que é sensacional pra te ajudar com o CSS

Caso vocês tenham qualquer dúvida ou dificuldade, ou até mesmo sugestão, podem deixar aqui nos comentários, mandar um e-mail para contato@butlariz.com ou até me mandar mensagem no instagram: @butlariz. Ahhh, e se criarem a página, me mandem também, adoraria ver!

Criei uma lista de e-mail para avisar das próximas aulas do Guia, então se quiser receber os alertas, é só se cadastrar aqui.

Recado final: Programar tem muito a ver com gostar e se esforçar. Eu espero de coração que vocês gostem, porque é um mundo sensacional, mas se não gostarem tudo bem também, cada pessoa tem suas preferências, seus gostos, e o que ama fazer na vida. Mas o mais importante é TENTAR, programar não é fácil, mas te garanto: é delicioso.