As diferenças entre HTML, CSS e Javascript (e algumas ótimas dicas para construir seu primeiro site!)

Já fingiu entender algo, mas na verdade não sabia “bulhufas” do assunto? Agora, imagine que uma tarefa lhe foi atribuída sobre aquilo que disse ter conhecimento… Você fica: “Oh, meu Deus, e agora?”.

Pesadelo!

Bem, para sua sorte, se continuar lendo esse artigo, aprenderá sobre assuntos que talvez você esteja tentando entender melhor. Assim, da próxima vez que alguém te perguntar algo sobre CSS, HTML e Javascript, você estará preparado!

Vamos direto ao assunto, então? Você pode ter se deparado com esses conceitos antes, seja porque quis construir seu próprio website ou ajudar alguém com isso.

CSS, HTML e Javascript são os três blocos de construção principais de qualquer página web. Eles trabalham juntos, mas, como explicaremos a seguir, todos desempenham papéis distintos quando se trata de codificação e desenvolvimento web.

O que é HTML?

Você já apertou algo sem querer enquanto estava navegando em um site e acabou indo parar em uma página cheia de texto, códigos aleatórios e ícones HTML (</>)? A sensação de estar em alguma versão confusa e de baixo orçamento do filme “Matrix” pode ter sido familiar neste caso.

O que você talvez não sabia é que o código fonte da página estava sendo inspecionado naquele momento do click. Ou seja, mesmo sem querer, sua experiência com HTML se deu por conta de um acidente.

Se já teve alguma experiência como essa antes, prometemos abordar o assunto de maneira tranquila e sem sustos. Ao aprender sobre HTML, você vai passar a amá-lo. Tenho certeza.

Então, vamos começar com a abreviatura em si. HTML é o acrônimo para “Hypertext Markup Language”.

O hipertexto é, essencialmente, o “texto estrutural”. Uma linguagem de marcação é uma “linguagem” ou “conteúdo” especial que os computadores entendem, originalmente projetado para descrever páginas da web e tornar o conteúdo interativo. Entenda isso como sendo o esqueleto de uma página web.

O HTML foi lançado em 1989 como uma linguagem editorial oficial da World Wide Web e é o bloco inicial de construção de qualquer ambiente online. Ele é formado por 3 aspectos principais: tags, elementos e atributos.

A sua versão mais recente é o HTML5 que carrega todas as marcas registradas originais do HTML regular, mas tem maior dinamismo e necessita de menos código.

O que é CSS?

O CSS é como se fosse uma banda de rock alternativo dos anos 2000 que recomendamos fortemente acompanhar! É um bloco de construção essencial para codificar sua Webpage. Seus elementos são visuais e estéticos.

A abreviatura da palavra significa “Cascade Styling Sheets”. Como o nome sugere, CSS define a aparência e o estilo do site. Ajuda a determinar a cor, as fontes, o posicionamento de certos elementos e até influencia na animação da página.

O CSS seguiu a criação do HTML para fazer os sites parecerem mais bonitos. Se não fosse por ele, as páginas teriam a mesma aparência em preto e branco, alguns hiperlinks em azul e, às vezes, uma nova fonte romana (CHATO!). Portanto, se HTML é o esqueleto, CSS é a pele, os olhos, o cabelo, o nariz e os pés de um website que o tornam único.

Portanto, embora HTML e CSS funcionem bem juntos, são linguagens bastante distintas.  Aprender sobre os dois também te dará a possibilidade de trabalhá-los separadamente, já que ambos têm uma infinidade de aplicações diferentes!

Para construir um site, você pode, inclusive, concentrar-se nestes dois elementos e aprender tudo que precisa com o especialista Uros Cirkovic em apenas 60 minutos. E o melhor, GRATUITAMENTE! Ficou interessado? Então, assista o webinar “Como construir um website com HTML e CSS em 60 minutos“.

Muito bem, estamos quase lá …

O que é Javascript?

É aqui que as coisas ficam um pouco mais complicadas. O Javascript está presente em quase todos os sites funcionais e permite que estes sejam dinâmicos e interativos. É a linguagem que os criadores da web utilizam para criar páginas web responsivas.

O Javascript é o mestre dos mestres, pois com ele você poderá alterar o HTML e o CSS de um website.

Por exemplo, com Javascript, é possível fazer o seguinte:

E a lista continua…

Como esses três funcionam juntos?

Vamos a um exemplo ilustrativo para que entenda como os três funcionam juntos. Imagine que você está navegando em um e-commerce de moda e a primeira coisa que vê ao acessar a página é um pop-up com a seguinte frase: “10% de desconto apenas hoje”.

Isso é Javascript, enquanto que HTML é o preço, tamanhos, descrição, imagem do artigo, etc, e CSS o aspecto da sua loja online, as cores, tipo de letra, tamanho da imagem, quadros e muito mais.

Agora que sabe a diferença entre HTML, CSS e Javascript e como eles se ajudam mutuamente, temos algumas dicas essenciais para você começar a planejar o seu website. Aproveite e divirta-se com o processo de aprendizado!

Gostou do artigo? Aprenda mais sobre Web Development!

Dê o primeiro passo e saiba sobre o nosso Bootcamp em Web Development. Faça o download do programa aqui

8 dicas para construir um site do zero

Escolha o que pôr em prática. Por exemplo, escrever um CV, criar portfolio ou página de destino sobre uma determinada oferta de serviço.

Tire imediatamente da sua cabeça. Nesta fase, tenha em mente apenas a estrutura e o conteúdo do seu site.

Há uma razão para a palavra rascunho: é uma cópia rudimentar da sua brilhante ideia que em breve se tornará realidade. Pense nisso como um diamante bruto que logo será lapidado.

Inspire-se em exemplos interessantes para criar a sua estrutura. Por exemplo, pense onde prefere que a navegação principal aconteça e o que colocar no rodapé da página.

 Honestamente, muitos de nós, desenvolvedores, simplesmente pegamos uma caneta e papel e desenhamos o layout básico para servir de modelo (muitos de nós ainda desenham pior do que crianças de 7 anos, então não espere uma obra-prima; saber desenhar bem não é um pré requisito aqui).

Adicione “lorem ipsum” neste momento, mas se sentir que sua criatividade está fluindo bem, escreva tudo que vier à cabeça de uma só vez. Isso vai te poupar tempo e isso é algo importante a considerar.

Além disso, se, por exemplo, optar por criar seu Portfólio, pense em algumas linhas sobre o que faz, áreas de atuação, experiência profissional e formação.

Pesquise por exemplos de inspiração visual. Quando se trata de CSS, você terá que pensar no design em si, como largura, altura, margem, preenchimento, posição, cor de fundo, tamanho da fonte, etc.

Por isso, recomendamos que visite algumas páginas web e use-as como ponto de referência para ter um conceito mais claro sobre a estética em si.

Conte conosco! Temos certeza de que aprender sobre CSS, HTML e Javascript será divertido e fácil. Por isso, ao invés de tentar fazer tudo sozinho, assista o Webinar e conte com uma verdadeira aula particular para aprender tudo que precisa sobre criação de websites.

Após o webinar, comece a colocar em prática o que aprendeu e celebre cada conquista. Para tornar esse processo ainda mais agradável, comemore com uma taça de vinho ou dance ao som da sua música favorita. Uma boa ideia é também compartilhar suas realizações dando um abraço em quem se ama.

Assim, agora que chegamos ao final deste artigo e você ficou sabendo um pouco mais sobre como construir um website a partir do zero, que tal investir seu tempo fazendo o curso conosco  para adquirir novas habilidades demandadas pelo mercado?

Sinceramente, você pode construir uma carreira a partir disso. Inscreva-se no Bootcamp de Desenvolvimento Web e saiba mais!

FONTE: ironhack