Executando verificação de segurança...
2

Como criar um site?

Fala dev's beleza?

Estou iniciando na area da programação, para ser exato fazem 2 meses que meus olhos brilham todos os dias ao digitar linhas de códigos e fazer as coisas acontecerem. Como parte da aquisição de conhecimento quero criar um site para um amigo sem cobrar nada, apenas para meu desenvolvimento profissional.

Atualmente estou no 1º semestre da faculdade e estou tendo contato com HTML, CSS e JS, mas só estudar o que me é passado não é o suficiente, quero por em pratica! e me desafiar a conquistar esse objetivo que traçei.

Voltando a pergunta, é possível criar um site dinâmico, simples e responsivo utilizando essas 3 ferramentas em que estou adquirindo conhecimento?

Carregando publicação patrocinada...
2

Primeiramente, bem-vindo ao tabnews!

Sinto a mesma sensação de brilhos nos olhos ao ver aquele código lindo.

Same energy

Voltando...

Sim, é totalmente possível criar apenas com HTML, CSS e JS. Você pode criar um simples site institucional ou uma landing page para ajudar seu amigo e também é uma ótima forma de pôr em prática o seu conhecimento.

Agora, se você quer criar um site dinâmico, procure por SPAs. Não vá direto no react se não tiver fundamentos sólidos, procure fazer na mão, entende? Têm vários vídeos no YouTube ensinando a fazer um SPA simples com rotas dinâmicas usando somente o HTML, CSS e JS.

Ajudaria muito a aprofundar os fundamentos da linguagem.

1
1

Oi @eliasneto27, você disse que já está tendo contato com essas tecnologias, mas não deixou claro exatamente qual é a sua dúvida, então vamos por partes.

Reposta Curta:
Sim, é possível criar um site dinâmico, simples e responsivo utilizando apenas HTML, CSS e Javascript.

Resposta Longa:

Segue um resumo grosseiro sobre cada tecnologia e uma visão inicial de como elas se relacionam.

HTML:
Com HTML puro é possível criar páginas simples, porém com vários tipos de conteúdo como: textos, imagens, tabelas...

Numa página em HTML puro também é possível criar links para direcionar o visitante paras suas outras páginas(navegar entre as páginas), ou sites externos.

Um arquivo HTML é basicamente um arquivo de texto (pode ser criado inclusive com o "bloco de notas" do Windows), porém dentro dele tem algumas marcações especiais chamadas de tags, por exemplo para colocar uma palavra em negrito podemos usar a tag <b> para delimitar o início do negrito e </b> para delimitar o final.

Ou seja, o código abaixo:
<b>Esse trecho está em negrito,</b> mas esse não está.

Resultaria em:
Esse trecho está em negrito, mas esse não está.

Assim como tags de formatação, existem tags para criar elementos, como inserir uma imagem ou criar uma tabela.

O HTML é uma linguagem de marcação muito simples de aprender os primeiros passos, mas também pode-se dizer que é a base sobre a qual são construidos mesmo os sites com tecnologias mais avançadas, como você verá a seguir.

CSS:
No HTML puro é possível aplicar formatações visuais à sua página, como mudar o tamanho dos seus textos, a cor do fundo da página, o tamanho das imagens, e assim por diante... porém conforme a WEB evoluiu percebeu-se vantagens em separar a formatação visual da página do conteúdo em si.

Desta forma é considerada uma melhor prática utilizar o CSS para formatar visualmente a sua página, trazendo muitas vantagens, pois a separação entre o conteúdo em si do código utilizado para formatação permite você focar em uma coisa por vez e torna a manutenção do código e alterações de conteúdo ou visuais muito mais fáceis, tendo em vista que o CSS te permite estilizar a página de uma forma muito mais estrturada e poderosa.

Além disso, sem as formatações feitas diretamente no HTML o seu código de conteúdo fica mais limpo e fácil de editar.

Por fim um mesmo documento CSS pode ser utilizado para formatar quantas páginas for necessário, sem necessidade de refazer as formatações em cada página. Um mesmo "estilo" pode ser usado em diversos elementos da página, e o CSS oferece propriedades de formatação que o HTML puro não possui.

Javascript:
O javascript permite deixar a página mais dinâmica, alterando tanto o conteúdo quanto a formatação dinamicamente, por exemplo aumentando o tamanho de uma imagem ao clicar nela, mostrando um conteúdo que estava oculto ao clicar em um botão, ler dados digitados em um formulário pelo usuário, efetuar cálculos e mostrar os resultados... é uma linguagem de programação bem completa e as possibilidades são muitas.

Como publicar o seu site na web:
Como você viu, fazer uma página em HTML é bem simples e depois você pode utilizar CSS e Javascript para aprimorar a formatação e interação com o usuário.
Mas de qualquer forma, para você publicar o seu site de forma pública na Web você precisará de um servidor que hospede os seus arquivos e disponibilize-os de forma pública atraves de uma URL (endereço da web). Se você pesquisar no google é possível encontrar empresas de hospedagem que te permitam fazer isso.

Outras tecnologias:
Existem outras tecnologias que podem ser usadas tanto para extender as funcionalidades para além do que seria possível apenas com HTML+CSS+JS, como para fazer o que já era possível com as tecnologias mencionadas, porém de forma mais prática.

  • No caso de expandir as funcionalidades temos por exemplo as tecnologias ServerSide, que permitem que o usuário salve informações no servidor, como por exemplo efetuar um cadastro, postar um comentário numa página, editar o seu perfil, além outras funcionalidades como acessar dados e páginas protegidos mediante um login seguro.
  • No caso de facilitar o que já era possível, temos o caso dos frameworks baseados em JS, que são basicamente amontoados de código Javascript pre-fabricados que aceleram muito o desenvolvimento de aplicações.

Então, qual é exatamente a sua dúvida?

1
1

Opa, entendi, então a melhor coisa realmente é colocar a mão na massa, aí muita coisa vai ficar mais clara pra você, dúvidas vão surgir mas também serão esclarecidas a medida que você progride no seu projeto.
Lembre-se que o google é seu amigo, a documentação disponivel na web sobre essas tecnologias é vasta, e vídeos no youtube também são uma boa pedida.
E claro, o pessoal aqui do tabnews também é fera e pode te ajudar.
Qualquer coisa dá um grito, abraço!

1

@eliasneto27, sim mano é possível sim, aliás, essas 3 linguagens são a a essência da web, sucesso no aprendizado e estuda bastante os conceitos e pratique!

1
1

Sim, essa sensação de um monte de letras e simbolos se transformar em algo real é muito satisfatório.

Em relação ao seu comentário

Voltando a pergunta, é possível criar um site dinâmico, simples e responsivo utilizando essas 3 ferramentas em que estou adquirindo conhecimento?

É sim, atualmente estou fazendo o curso do Gustavo Guanabara sobre web, e se liga no que eu já fiz. É basico ainda, mas já aprendi varias funções e isso que é o 2º módulo ainda!
Por exemplo, esse aqui é meu site exercicio! que fiz no modulo 2, comecei o 3º essa semana.
Então quem sabe, da uma olhada no canal dele e vê se o que você já sabe é mais ou menos que isso, dependendo do seu conhecimento, sugiro procurar por projetos no youtube ou em sites de desafios!

1
1

Eu comecei minha trajetória na programação com o grande Guanabara tbm. Consumia o conteúdo dele demais.. depois fui encontrando outros como Deschamps, a galera da rocketseat, isidro, balta.. etc.

1

Creio que para introdução o Guanabara seja um dos melhores, explicões bem didaticas e bem iniciante mesmo. Com certeza ajuda muito para quem não teve nenhum contato com tecnologia ou com a aplicação em si. Lembro até que há alguns anos, fiz um curso introdutório online do governo de SP sobre Banco de Dados e os vídeos usados eram todos do canal dele kkkk