Introdução

HyperText Markup Language (HTML), Cascading Style Sheets (CSS), e JavaScript são as linguagens que estam por trás da web. Elas tem muito em comum, mas também são projetados para tarefas muito específicas. Entender como elas interagem entre si vai lhe dar um longo caminho a frente para se tornar um desenvolvedor web. Estaremos trabalhando nisso ao longo do tutorial, mas a essência é:

• HTML é para adicionar significado ao conteúdo, com marcações.
• O CSS é para formatar esse conteúdo marcado.
• O JavaScript é para deixar o conteúdo e a formatação interativa.

Pense no HTML como o texto e imagens por trás de uma página web, CSS como a página que realmente é exibida, e JavaScript como o comportamentos que podem manipular tanto o HTML quanto o CSS.

Por exemplo, você pode marcar algum texto em particular como um parágrafo com este HTML:

<p id='some-paragraph'>This is a paragraph.</p>

Então, você pode definir o tamanho e a cor desse parágrafo com CSS:

p {
  font-size: 20px;
  color: blue;
}

E, se você quiser apelar, você pode reescrever esse parágrafo quando o usuário clica com um pouco de JavaScript (nós vamos salvar o material apelão para um futuro tutorial):

var p = document.getElementById('some-paragraph');
p.addEventListener('click', function(event) {
  p.innerHTML = 'You clicked it!';
});

Como você pode ver, HTML, CSS e JavaScript são linguagens totalmente diferentes, mas elas se interligam de alguma forma. A maioria dos sites usa as três, mas a aparência de todos os sites são determinadas pelo HTML e CSS. Isso faz deste tutorial um ótimo ponto de partida para sua jornada de desenvolvimento web.

Infelizmente, o domínio de HTML, CSS e JavaScript é apenas um pre-requisito para se tornar um desenvolvedor web profissional. Há um monte de outras habilidades práticas que você precisa para construir um site:

• Organizar o HTML em templates reutilizáveis
• Subir um servidor web
• Mover arquivos locais do seu computador para o seu servidor web
• Reverter para uma versão anterior quando você cagar em algo
• Apontar um nome de domínio no seu servidor

Lidar com essas complexidades envolve a criação de vários "ambientes" para organizar seus arquivos e lidar com a construção/implantação do seu site. Tudo isso é ortogonal para o código HTML, CSS e JavaScript que compõem um site. Este tutorial foca completamente nas linguagens HTML e CSS— não configurando esses outros ambientes.

Mas, não fique assustado. Ganhar fluência no HTML e CSS é um primeiro passo significativo para você se tornar um verdadeiro desenvolvedor web. Só não queremos que você se afaste deste tutorial pensando que poderá lançar um site completo por conta própria. Você terá, no entanto, a habilidade de recriar a grande maioria das páginas da Internet.

Então, o que é "aprender" HTML e CSS? Nós gostamos de olhar isso através de uma lente histórica da indústria gráfica. Voltar no dias da impressoras originais, as impressoras criavam documentos através do arranjamento de caracteres metálicos, mergulhando-os em tinta, e prensando-os em um pedaço de papel.

De muitas maneiras, é exatamente isso que os desenvolvedores web fazem, exceto ao invés de ficar mexendo com as letras removíveis, eles escrevem HTML e CSS. Nós somos preocupados com a mesma tarefa que eles: transmitir conteúdo de maneiras significativas. Nós até lidamos com as mesmas questões de apresentação que eles tinham, como selecionar a fonte a ser usada, definir o tamanho dos títulos e determinar o espaço entre linhas do texto.

As impressoras costumavam imprimir um monte de páginas e encaderná-las em um livro. Hoje em dia, nós criamos um monte de arquivos HTML e os ligamos entre si em um site. Aprender HTML e CSS é uma questão de compreensão da marcação do HTML e as regras CSS disponíveis para manipular a aparência desses arquivos no navegador, de como eles devem aparecer.

Há todos os tipos de frameworks para desenvolvimento web front-end por aí (Bootstrap, ZURB foundation, e Pure CSS, só para citar alguns). O objetivo de cada um deles é abstrair alguns dos aspectos repetitivos da criação de páginas web a partir do zero. Estes tipos de frameworks são uma parte importante do desenvolvimento web no mundo real, e eles definitivamente valem a pena ser explorados—mas só depois de dominar o básico com o Fazer Front é Foda.

Este tutorial é sobre os fundamentos do HTML e CSS. Você vai sair daqui com a habilidade de construir praticamente qualquer coisa que você vai precisar como desenvolvedor web, com HTML e CSS puro. Isso são lições que vão ficar contigo para sempre, apesar das novas adições maneiras ao HTML e CSS ou os novos frameworks modinhas que ajudam você a fazer as coisas mais rápido.

Fazer Front é Foda é pura educação na prática. Com a exceção do que você já leu, boa parte deste tutorial gira em torno de exemplos concretos, explicando os aspectos conceituais do HTML e do CSS ao longo do caminho.

Para tirar o máximo deste tutorial, você deve estar ativamente criando páginas web e acompanhando cada passo de cada capítulo. Se você está falando sério sobre se tornar um desenvolvedor web, você deve estar digitando cada código letra por letra, ao invés de só copiar e colar no seu editor de texto.

Por quê? Porque isso é o que você estará realmente fazendo como um verdadeiro desenvolvedor web. Ao digitar os exemplos de código eles vão entrar na sua memória muscular, que lhe vai ser muito útil quando você estiver no meio do mercado de trabalho marcando o conteúdo para sites reais.

Para este tutorial, um editor de texto e um navegador de internet decente é tudo que você precisa. Seu fluxo de trabalho basicamente é escrever código em seu editor de texto, e então abrir sua página em um navegador para ver como ela fica. Quando você começar a criar seus próprios sites, você eventualmente adicionará mais ferramentas no seu repertório, mas é importante começar de forma simples para aprender os fundamentos do HTML e do CSS.

Dito isso, tome um tempo para se tornar realmente bom em usar seu editor de texto. Os decentes vêm com recursos que permitem que você escreva código mais rápido do que você normalmente faria, eles te ajudam com recursos como auto-completar, pular ao redor do seu texto, e navegar pelo seus arquivos de maneira mais eficiente. Aprender bem seu editor de texto é uma parte essêncial do aprendizado de HTML e CSS.

O único pré-requisito real para um bom navegador web é que seja atualizado e bastante usado. Chrome e Firefox são os favoritos entre os desenvolvedores web. Safari é OK se você estiver usando o OS X, também. Sugerimos fortemente não criar sites com Internet Explorer. Desenvolvimento web profissional frequentemente requer uma maneira eficiente de testar o código em todos esses navegadores, mas isso é um pouco mais complicado do que o que precisamos neste momento.

Recomendamos o editor de texto Atom. É fácil de usar, mesmo para iniciantes, e ele oferece todas as características vantajosas que mencionamos acima, e está disponível para todos os principais sistemas operacionais. Também é infinitamente configurável, o que irá se tornam bem importante à medida que você identifica tarefas repetitivas que você pode automatizar.

Se você ainda não tem o Atom, vá em frente e baixa ele agora, já que você precisará dele para o próximo capítulo. Uma vez que você tenha feito o download, abra-o para que possamos fazer um breve tour pelas suas principais características. Você deve ver dois painéis com telas de boas-vindas diferentes:

Não precisamos de nenhuma dessas telas de boas vindas, então feche as duas clicando no ícone x em suas abas correspondentes. Você também pode usar o atalho Cmd+W (Mac) ou Ctrl+W (Windows/Linux) para fechá-los (os atalhos são ótimos, use-os sempre que puder). Você deve ser deixado com uma única aba sem nome (untitled).

Cada site em que você trabalha no Atom é um "projeto", que é essencialmente apenas uma pasta no seu sistema de arquivos que contém um monte de arquivos HTML e CSS. Vamos explorar o Atom, criando um projeto falso e adicionando alguns arquivos de texto. Clique em File > Open na barra de menu para abrir um arquivo e então selecione New Folder para criar uma nova pasta. Dê o nome de hello-atom, e clique em Open.

Agora você deve ver uma barra lateral à esquerda da interface que diz hello-atom no topo ao lado de um pequeno ícone de pasta. Este é o nosso navegador de arquivos. Claro, não vai mostrar nada até que nós adicionar alguns arquivos, então vamos fazer isso a seguir.

Digite qualquer texto na tab untitled, depois aperte Cmd+S (Mac) ou Ctrl+S (Windows, Linux) para salvar o arquivo. Dê o nome de page-one.html. Depois de salvá-lo, você deve vê-lo no navegador de arquivos do Atom.

Vamos fazer mais um arquivo clicando em Cmd+N (Mac) ou Ctrl+N (Windows, Linux). Isto vai criar mais uma aba untitled. Como em nosso último arquivo, adicione qualquer texto que você quer, então salve como page-two.html.

Mais uma vez, um dos aspectos mais importantes de um editor de texto decente é deixar que você navegue por todos os arquivos do seu projeto de maneira eficiente. No Atom, você pode selecionar a aba do arquivo no qual você quer trabalhar ou você pode encontrar o arquivo no navegador de arquivos no lado esquerdo da interface. Você pode usar também Ctrl+Tab para alternar entre as abas abertas.

Tudo isso é muito bom e elegante para navegar entre os arquivos, mas há muitas vezes que você pode estar procurando por um arquivo específico. Por exemplo, imagine descobrir um link quebrado em seu site enquanto você está fazendo algum teste de qualidade. Você quer ser capaz de saltar direto para aquele arquivo com Atom para consertar o link o mais rápido possível.

Para isso, você vai precisa do fuzzy finder do Atom, que é acessível através do comando Cmd+T (Mac) ou Ctrl+T (Windows, Linux). Quando você apertar isso, o Atom abrirá uma barra de busca e deixará você digitar qualquer parte do nome do arquivo que você está procurando. Tente fechar ambas as abas, pressionando Cmd+T ou Ctrl+T, e abrindo "one". O arquivo page-one.html deve aparecer, assim aperte Enter para editá-lo. Esta funcionalidade é indispensável uma vez que seu projeto vai crescer para algumas dezenas de arquivos espalhados em várias pastas.

Atom não só permite que você tenha múltiplas abas, mas também múltiplos painéis. Para ver do que estamos falando, tente clicar com o botão direito em um dos arquivos no navegador de arquivos e selecionando Split Right. Isso abrirá esse arquivo em um novo painel, permitindo que você veja vários arquivos ao mesmo tempo.

Múltiplos painéis são realmente úteis para ver um arquivo CSS e seu HTML relacionado ao mesmo tempo.

Por fim, ocasionalmente precisaremos trabalhar com arquivos fora da Interface Atom (por exemplo, quando queremos copiar arquivos de imagem para o nosso site). Podemos usar o navegador de arquivos embutido no sistema operacional para isto. Clique com o botão direito do mouse em um arquivo no navegador de arquivos do Atom, depois selecione Show in Finder/Explorer/Some Other File Browser para abrir o navegador de arquivos padrão do seu sistema.

A partir daqui, você pode adicionar novos arquivos, criar pastas, ou abrir um arquivo HTML em um navegador web. Esse último vai se tornar uma tarefa comum para o resto deste tutorial, então vamos testar com o nosso arquivo page-one.html. Clique com o botão direito do mouse no seu navegador de arquivos padrão do sistema e selecione Abrir com > Chrome/Firefox/Safari. Você deve ver o texto que você adicionou no arquivo sendo mostrado como uma página web no seu navegador web padrão.

Agora, você pode editar o conteúdo do page-one.html no Atom, salve e recarregue no seu browser, pressionando Cmd+R (Mac) ou Ctrl+R (Windows, Linux). Este é o fluxo de trabalho básico de edição para todos os desenvolvedores web, e você vai se acostumar muito, muito com isso quando você finalizar os próximos 13 capítulos.

Parabéns! Você completou seu primeiro passo para se tornar um desenvolvedor web profissional. Esperamos que este capítulo tenha lhe dado um entendimento básico de como HTML e CSS se encaixam no contexto mais amplo da indústria de desenvolvimento web e a filosofia geral por trás do Fazer Front é Foda.

Os assuntos do Atom que acabamos de cobrir vão se tornar parte da nossa rotina do dia-a-dia, então tenha certeza de que você está confortável com tudo antes de seguir em frente. Nós encorajamos você a brincar um pouco com o projeto de exemplo, adicionando mais arquivos e praticando a navegação de um arquivo para o outro. Dominar o ofício de escrever HTML e CSS é o que distingue desenvolvedores surpreendentemente produtivos da média.

Agora que temos um editor de texto apropriado, estamos prontos para começar a codificar algumas páginas web reais. Vamos começar explorando os mais comuns elementos HTML nos próximos dois capítulos, então adicionaremos um pouco de CSS na mistura.