Introdução
É impressionante o que é possível fazer na Web atualmente. Você pode criar experiências da Web que são executadas em todos os dispositivos, incluir todos os tipos de conteúdo de mídia e executar computação complicada. Você pode até criar aplicativos que se parecem com aplicativos nativos.
Se quiser iniciar o desenvolvimento para a Web hoje mesmo, você se deparará com uma enorme variedade de opções. Neste módulo, você vai aprender sobre os componentes básicos de um site e algumas ferramentas que poderá usar para começar a desenvolver para a Web. Você usará HTML, CSS e JavaScript para criar um site e usará as ferramentas para desenvolvedores no navegador para entender o que está acontecendo.
Com esse conhecimento fundamental em mãos, você terá mais contexto para tomar decisões melhores no futuro ao criar seus sites. Por exemplo, se você deve escolher estruturas do JavaScript ou criar suas funções JavaScript para criar seu site.
Vamos começar vendo onde queremos chegar.
Cenário
Imagine que você seja um desenvolvedor da Web que tenha sido incumbido de tornar o site da sua empresa atrativo para uma gama mais ampla de clientes. Para permitir que os clientes personalizem as experiências deles no seu site, você decide adicionar suporte para temas claros e escuros. Você cria um pequeno site de prova de conceito para demonstrar o suporte aos temas usando CSS e escreve uma função JavaScript para alternar entre esses temas.
Quando concluído, seu site ficará como este exemplo quando o tema escuro for selecionado:
O que há em uma página da Web?
O conteúdo, o estilo e a lógica interativa são separados em arquivos HTML, CSS e JavaScript, respectivamente. Um princípio de design na programação moderna é a separação de interesses. Entre os vários motivos para separar os assuntos estão a simplicidade e a reutilização. Por exemplo, ao estilizar elementos HTML usando CSS, você pode simplificar seu código HTML. Em vez de codificar a aparência em cada elemento, você aplica estilos CSS a todos os elementos em uma página, independentemente da complexidade da página. Além disso, você pode vincular várias páginas HTML a um único arquivo CSS, o que ajuda a simplificar uma aparência consistente para todo o site.