O mais básico que você precisa saber para iniciar sua carreira #VemComigoSerDesenvolvedor Parte 1

HTML, a base de tudo. CSS pra ficar bonito.

Recomendo somente ler este artigo se você estiver disponível para seguir o passo-a-passo que ele propõe. Ler sem executar irá lhe ensinar pouco e pode parecer bem mais difícil do que é. Salve-o para outra ocasião se você estiver indisponível.

Você pode querer ler a introdução desse artigo.Clique aqui.

Eu fiz algumas promessas no último artigo que, acredito, te empolgaram para que você chegasse nesse aqui. Mas talvez você também esteja desconfiado, seja de mim ou de si mesmo. Conseguir uma carreira promissora sem faculdade?

Sem faculdade não significa sem estudo. Estudar é algo que você fará o resto da vida se for desenvolvedor, mas que eu pessoalmente acredito que todo mundo deveria fazer. Quem somos nós, se não eternos aprendizes?

E hoje eu começo a mostrar o fundamental para sua carreira como desenvolvedor front-end. Para colocar a mão na massa primeiro teremos que prepará-la. Pronto?

1 — Crie uma pasta chamada “Projetos Front-End” (ou algum outro nome que passe essa ideia), preferencialmente dentro de “Meus Documentos”.

2 — Baixe o Sublime Text, clicando neste link, em Windows*. Não se preocupe, ele é o único programa que vamos baixar e instalar por um bom tempo. Ele é bem leve e não vai gastar muito dos seus dados. Você pode usá-lo gratuitamente, mas se puder pagar algum dia, pague e dê uma forcinha!

3 — Instale o Sublime Text, clicando no arquivo que você acabou de baixar. Se tiver perdido o arquivo, é provável que ele esteja na pasta Downloads de seu computador, ou na opção Downloads do seu navegador.

Encontrando Downloads no Mozilla Firefox (esquerda) e no Google Chrome (direita). Recomendo usar um desses dois navegadores.

Caso o computador pergunte se deseja permitir modificações, responda sim. Depois, siga o fluxo da imagem abaixo, apertando Next três vezes e depois Install.

O Sublime Text é o que chamamos de editor de código. É nele que faremos a mágica acontecer.

4 — Abra o Sublime, clicando no ícone (um quadrado escuro de borda branca com a letra S). Ele pode estar na sua área de trabalho ou no menu iniciar. Se não encontrá-lo, entre nas pastas e vá em Meu Computador ->Arquivos de Programas -> Sublime Text 3. Clique no ícone de nome sublime_text.

Se der tudo certo, você verá uma tela semelhante a esta:

Pode respirar fundo! A parte chata já foi. Agora vamos pro que é legal.

Fazendo sites \o/

De forma grosseira, sites podem ser divididos em estrutura, estilo e funcionalidade. Por hora vamos nos focar em estrutura e estilo, mas vamos chamar estrutura de HTML e estilo de CSS, pois é assim que chamamos as respectivas linguagens utilizadas.

Existem várias analogias para essa dupla: HTML é a massa do bolo e CSS é a cobertura. HTML é o esqueleto e CSS é a carne. HTML é uma casa que tem uma certa quantidade de quartos e banheiros, CSS define o acabamento da casa. Vamos analisá-los individualmente e isso se tornará mais claro.

HTML, a Estrutura

Copie o código abaixo e cole no Sublime. Você pode digitá-lo manualmente também se quiser se familiarizar, apenas esteja atento para não cometer erros de digitação :)

Ao terminar de copiar e colar, salve o arquivo. Você pode salvar através do menu File -> Save do Sublime, ou simplesmente apertando as teclas Control e S ao mesmo tempo. A janelinha abaixo deve aparecer.

Salve o arquivo como base.html dentro da sua pasta Projetos Front End. Se não souber como, os próximos passos explicam.

O Sublime tende a ser esperto e reconhecer que o arquivo é HTML. Confira isso em “Tipo”. Daqui em diante, sempre confira se “Tipo” confere com o tipo de arquivo do qual estamos falando.

Digite “base” em nome. Depois, procure a pasta “Projetos Front-End” e clique duas vezes nela. Agora, basta apertar “Salvar”.

Legal! Se você for na pasta, vai ver que tem um arquivo nela chamado base.html com o ícone do seu navegador favorito. Você pode clicar nesse arquivo, mas ele abrirá uma tela em branco. Volte ao código.

Notou uma linha cinzenta, dizendo <! — CONTEÚDO AQUI — ->? Escreva algo em baixo dessa linha, qualquer coisa. A tradição é escrever “Olá mundo”, mas podemos ser mais ambiciosos. Não se esqueça de salvar o arquivo a cada modificação. Use o atalho Ctrl + S para ser mais rápido.

Se você recarregar a tela em branco, verá que agora ela contém seu texto. Volte ao código e dê uma olhada nele. Notou que tem vários elementos no código que começam com < e terminam com >, geralmente ao começo e final de cada linha? De agora em diante, vamos chamá-los de tags ou elementos HTML.

Não vou me aprofundar muito em cada elemento para não atrasar nossa primeira prática que é super importante. Se você estiver muito curioso, pode pesquisar essas tags no Google. Você descobrirá que vida de desenvolvedor tem muito disso: curiosidade e buscas. Dois lugares legais para se entender HTML e CSS são o MDN e o W3Schools. Eu costumava achar o W3Schools mais fácil, hoje em dia prefiro o MDN. Recomendo que dê uma olhada em ambos quando for pesquisar: é sempre legal ter um novo conceito explicado em mais uma maneira.

Por hora basta saber que a tag <html> engloba dois elementos principais: um <head> e um <body>. Se você manjar de inglês, pode ter notado que head significa cabeça e body significa corpo. Essa é uma boa maneira de se lembrar o que cada elementos faz e representa: De modo geral, <head> contêm informações sobre a página HTML — coisas como título, idioma e quais palavras-chave ajudarão as pessoas a encontrar essa página no Google. É no <body> que fica o conteúdo em si da página, o que ficará visível pra todo mundo. Por isso mesmo, a não ser que eu especifique o contrário, insira novos elementos sempre dentro de <body>, ou você não conseguirá vê-los!

Mas… por que a linha cinza não aparece?

Você pode ter notado que, apesar de estar dentro de <body>, <! — CONTEÚDO AQUI — -> não aparece na tela. Isso acontece porque ele é um comentário. Comentários são linhas de código que são ignoradas pelo navegador e são super úteis pra você fazer anotações que te ajudem a lembrar mais tarde o que aquilo significa. Em html, para fazer um comentário, basta escrever qualquer coisa entre <! — e — >.

Voltemos ao nosso código principal. Como o nome sugere, a página que criamos é uma base para qualquer página HTML. Use-o para todas que criar. Em breve você saberá modificá-lo de acordo com a necessidade.

Agora, devo confessar que fiz você fazer algo feio. Escrever texto diretamente no <body> não é recomendado, mesmo que funcione. Existem várias tags html que não estão na base que você está olhando. Vamos aprender as principais agora. Não se preocupe se parecer muita coisa para se lembrar de uma vez. Mesmo desenvolvedores experientes esquecem às vezes como se escreve uma tag. Consulte esse artigo ou o Google sempre que tiver dúvidas.

Principais Elementos HTML

H1 (<h1></h1>) — Títulos

Antes de qualquer coisa, vamos consertar nosso texto. Digite <h1> antes do texto começar e </h1> após seu término. Acostume-se também com essas nomenclaturas: <h1> é a abertura de uma tag, </h1> é o fechamento da tag. Recarregue a página sempre que inserirmos coisas novas.

Opa! Nosso texto está bem mais robusto de repente.

Isso ocorre porque <h1> é um elemento de heading (um título, um cabeçalho). Existem 6 elementos de heading, todos em negrito e de tamanho variado. Do maior para o menor: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Use qualquer um deles ou todos eles e veja a diferença! Não se esqueça que a tag de fechamento deve corresponder à tag de abertura, ou seja, se você trocar o <h1> para <h4>, troque também </h1> para </h4>.

P (<p></p>) — Parágrafos

Mas talvez você não tenha escrito seu texto pensando em fazê-lo de título. Nesse caso, é melhor usar a tag <p>. Essa tag representa parágrafos, textos comuns. Ela deve ser aberta e fechada assim como <h1>. Escreva algo para ter pelo menos um parágrafo e um título na sua página.

IMG(<img src=””>) — Imagem

O elemento imagem é diferente dos que vimos anteriormente. Duas diferenças se destacam: Primeiro, ele não tem tag de fechamento. Ou seja, </img> não existe! Segundo, ele tem um atributo obrigatório.

O que é um atributo?
Atributos são utilizados para especificar algo sobre o elemento que você está criando. Praticamente todos os elementos podem receber atributos, mas em alguns casos, como <img>, um deles é obrigatório. Vamos usar atributos com frequência para aplicar CSS daqui a pouco também. Atributos estão presentes na tag de abertura, logo depois da palavrinha que determina o elemento. Elementos podem ter múltiplos atributos, separados por espaço.

No caso de <img>, o atributo obrigatório é o src — source, em inglês (significa fonte). Ou seja, nós primeiro dizemos ao HTML que queremos inserir uma imagem na página, depois, temos que contar a ele onde esta imagem está. Costumamos também nos referir ao source como caminho da imagem. Você pode usar um caminho local para pegar uma imagem do seu computador ou usar um link da internet para pegar uma imagem online. Note que esses links devem terminar com a extensão da imagem (.jpg, .png, .gif, etc) para funcionarem.

Vamos experimentar de ambas as formas? Primeiro, eu vou criar uma pasta chamada “imagens” dentro de “Projetos Front-End”. Depois, vou colar nessa pasta uma fotinha minha.

Dentro das aspas, escreva primeiro o nome da pasta, depois o nome da imagem e finalmente o tipo de imagem

Preste atenção no nome da foto e na extensão do arquivo. Você consegue ver a extensão em “Tipo”. Se a extensão for JPEG, usar .jpg no caminho há de funcionar.

Dependendo do tamanho da sua imagem, ela ficará enorme na página. Aconteceu isso comigo: A foto é minha mas você só vê a minha testa. Se isso ocorrer, não se preocupe. Consertaremos mais tarde.

Agora, vamos fazer uma pesquisa! Para continuar no meu tema, eu pesquisarei “universo”. Clique em Images no Google para pesquisar somente imagens.

Eu gostei da primeira imagem da segunda linha. Ao clicar nela, aparecem algumas opções. Escolha uma imagem da sua busca e clique nela. Em seguida, clique em “View Image” (ou “Ver Imagem”).

A imagem deve ter aberto em uma nova guia. Eu dei sorte e já consegui uma com extensão .jpg no final. Talvez você não consiga, nesse caso, volte à pesquisa e escolha outra imagem.

Oba, .jpg!

ATENÇÃO: normalmente você não pode simplesmente pegar uma imagem no Google e usá-la. Direitos autorais podem se aplicar. Não estou esquentando a cabeça com isso porque estamos somente praticando, mas lembre-se disso para o futuro ;)

Já que nosso propósito é usar uma imagem online, você não irá salvá-la em seu computador. Apenas copie e cole o link que aparece na barra do navegador dentro das aspas de src.

Vamos fazer algo só um pouquinho diferente? Em vez de inserir a nova imagem abaixo da imagem anterior, vamos inserí-la acima. Dessa forma, mesmo que a imagem anterior seja bem grande, ainda vamos conseguir ver a nova assim que abrirmos nossa página.

DIV(<div></div>) — Divisões (seções/containers)

Divs são seções (também chamados de containers) que unem ou separam conteúdos relacionados.

Pense em um site de notícias. Na primeira página, você vê múltiplos artigos sobre política, esportes ou a última fofoca; cada um deles é uma imagem com um título. É provável que cada um deles seja também uma <div>.

Vamos fazer mais algumas modificações no nosso código? Eu decidi que o título sobre o universo deveria estar na mesma div que a imagem do universo e a minha foto deveria estar no parágrafo introdutório.

Dizemos, nesse caso, que a <div> é o elemento pai e <p> e <img> são seus elementos filhos. Também podemos dizer que <body> é pai de ambas as <div>’s. Em resumo: elementos que contém outros elementos são pais dos elementos internos.

Isso deixa meu código assim:

Adapte o seu para utilizar divs também, de acordo com o seu conteúdo.

O universo acha que eu sou um pássaro.

Pode parecer que não houve diferença já que a div por si só não tem conteúdo. No entanto, é muito importante saber usar divs. Mais tarde você perceberá que agrupar conteúdo relacionado facilita em muito a manutenção do código. Além disso, quem disse que divs não trazem nenhuma diferença de aparência? Basta aplicarmos CSS que resolvemos isso!

CSS, estilo

Crie uma nova pasta em “Projetos Front End”. Chame-a de “css”.

Com o Sublime aberto, aperte as teclas Control e N ao mesmo tempo ou acesse a opção File -> New File. Copie e cole ou digite o código a seguir neste novo arquivo:

Agora, salve o arquivo como estilo.css, dentro da recém-criada pasta “css”. Lembre-se de conferir cada um desses detalhes ao salvar o arquivo pela primeira vez: nome, tipo de extensão e local (pasta). Caso o arquivo seja salvo sem extensão ou na extensão incorreta, ele não irá funcionar.

Você pode digitar estilo.css caso o tipo não esteja sendo identificado automaticamente.

Volte ao seu html. Ele precisa saber que existe um CSS esperando por ele. Fazemos isso através da tag <link>, com dois atributos: href (o caminho — isso mesmo, é diferente do src da imagem, apesar de servir o mesmo propósito) e rel (relação — ou seja, o html está perguntando: o que esse link tem a ver comigo? a resposta no caso é stylesheet — folha de estilo).

Esse elemento é de informação e por isso deve ser inserido na tag <head> do seu documento, que agora deve estar assim:

Recarregue sua página.

A cor de fundo deve ter mudado para este tom de lilás. Caso não tenha mudado, confira se há algum erro de digitação no html ou css. Confira se o nome da pasta e do arquivo css confere com o caminho dentro do href<link>, se você incluiu o atributo rel com valor stylesheet, e se estilo.css foi realmente salvo como CSS (se a cor do código no Sublime for completamente branca, a resposta é negativa).

O código à esquerda não foi reconhecido (está sem extensão). O código à direita é apropriadamente reconhecido como CSS.

O nosso CSS está dizendo: Ei, HTML! Sabe o <body>? Então, aplica um background-color (cor de fundo) nele. A cor que eu quero é #e4e3ff.

#e4… o quê? — Cores em CSS
Existem várias formas de chamarmos cores no CSS.
Podemos usar nomenclatura direta em inglês (cores básicas como white, pink e black ou algumas menos conhecidas como emerald e aquamarine).
Podemos usar o sistema rgb, que divide a cor em três esferas (r, red; g, green; b, blue: rgb sendo uma mistura dessas que produz todas as outras cores).
Ou podemos usar o sistema hexadecimal, que é esse que começa com um # e tem três ou seis dígitos após o #. Não se preocupe: a maioria dos desenvolvedores não tira uma cor da cabeça para aplicar no código. Encontramos as cores desejadas em programas gráficos (como o Photoshop) ou em ferramentas online como esta, esta ou esta. O próprio Google oferece uma, basta pesquisar “css colour picker”.
Eu costumo dar preferência ao sistema hexadecimal ou ao rgb. Nomes são bem mais limitados (por exemplo, a cor que eu escolhi, #e4e3ff, não possui nome correspondente). Treine os sistemas usando opções abaixo ou, melhor ainda, use uma das ferramentas online citadas para escolher suas próprias cores e deixar a página com a sua cara.
Exemplo RGB
Exemplo nome — não é exatamente a mesma cor, mas é bem parecida

Posso fazer comentários em CSS?

Sim! Lembre-se que comentários são linhas de código ignoradas pelo navegador, o que significa que você pode escrever neles qualquer coisa que lhe seja útil para seu aprendizado.

Em CSS escrevemos comentários entre um /* (barra, asterisco) e um */ (asterisco, barra).

Como escrever regras em CSS

O que acabamos de escrever é uma regra. Ela é composta por três partes: seletor (body) — onde a regra será aplicada, propriedade (background-color) — o que iremos modificar e valor (#e4e3ff) — o que a propriedade recebe. Procure se lembrar dessas palavras e seus significados.

Seletores

Existem três formas principais de seleção em CSS: por tag, por classe ou por ID. Vejamos cada uma delas.

Tag

Essa nós já usamos. <body> é uma tag html, reconhecida no CSS simplesmente como “body”. Você pode também escrever estilos para suas divs, parágrafos e títulos apenas usando o nome da tag como seletor.

Classe

Esse tipo exige uma pequena mudança no HTML. Vamos entender a razão primeiro.

Digamos que eu quero que a primeira div, com a imagem e o texto do universo, tenha uma borda branca. Eu quero que a segunda div tenha, no entanto, uma borda azul. Se eu aplicar esses estilos diretamente na tag div, uma coisa chata acontecerá: eles irão se sobreescrever.

Note que há duas propriedades border em div, mas ambas foram aplicadas em azul no resultado final.

CSS significa “Folhas de Estilo em Cascata”. A parte do “Cascata” quer dizer que ele lê os estilos de cima pra baixo e o que estiver mais em baixo vence. Se você tiver dez mil linhas de código, com a linha número 2 dizendo que a div deve ser branca e a linha número 9976 dizendo que a div deve ser azul, a div será azul. Veremos mais algumas particularidades sobre isso nos próximos artigos. A princípio, podemos resolver isso de forma simples com classes!

Faça uma mudança no html. Insira o atributo classe em cada uma de suas divs: na primeira, o atributo deve receber o valor “white-border” e na segunda, o valor “blue-border”.

Classes podem ser quase qualquer nome que você quiser, na verdade, mas não use caracteres especiais (como acentos ou símbolos) ou espaços (se você disser “white border”, você estará criando duas classes: a classe white e a classe border). Procure manter um padrão para a criação de classes com nomes que façam sentido (nada de citar personagens de Dragon Ball Z, mesmo que você seja fã!). Caso a classe seja composta de mais de uma palavra como em nosso exemplo, use hífen (-) ou underline (_) para separá-las. Evite ainda letras maiúsculas.

Agora, voltemos nossa atenção para o CSS. Vamos apagar a regra da div e escrever regras para as nossas classes.

Note que há um ponto antes do nome de cada classe. É exatamente ele que diz ao CSS: o que vem por aí se trata de uma classe. Você pode criar suas próprias classes agora!

E esse border complicado aí?
Border, a propriedade que determina a borda dos elementos, pode parecer estranha com suas múltiplas informações. Isso ocorre porque, na verdade, border nada mais é do que uma forma mais rápida de se escrever três outras propriedades: border-style, border-width e border-color.
Se escrevermos assim também funciona, mas fica desnecessariamente longo.
Algumas outras propriedades também oferecem esse recurso, como é o caso do próprio background. Em vez de background-color, podemos dizer apenas background e aplicar e mudar outras coisas no fundo da página, como imagens, posição de imagem, tamanho, etc. Veremos tudo isso em breve. Por enquanto, vamos ver outros tipos de seletores.

ID

ID’s, assim como Classes, requerem um atributo no HTML. Elementos podem ter id’s e classes ao mesmo tempo.

A diferença é que ID’s devem ser únicos. Se eu decidir que quero borda branca em meu(s) texto(s) ou imagem(ns) ou qualquer outra coisa, posso replicar a classe white-border sem problema algum. O mesmo é válido para blue-border e outras classes.

Mas, no momento em que eu defino um ID, independente do fato de ele ter uma regra de CSS ou não, ele não deve ser repetido na página. Repetí-lo pode até funcionar, mas é péssima prática, assim como escrever texto fora de um elemento de texto.

Uma coisa que irrita vários desenvolvedores no que diz respeito ao front-end é justamente isso: mesmo com erros, muita coisa funciona. Outras linguagens de programação costumam bloquear seu programa totalmente se há um erro. Mas não deixe de levar erros a sério por causa disso: quando nossos sites e aplicativos tornam-se maiores, eles causam cada vez mais dor de cabeça e fica incrivelmente mais difícil consertá-los.

Para escrever uma regra CSS para um ID, use # + nome do ID. Procure seguir as mesmas regras de nomenclatura de classes (nada de espaços ou caracteres especiais).

Essas são as regras que eu acrescentei. Vamos analisar as propriedades a seguir.

Mais Algumas Propriedades CSS

height

A altura de um elemento. A unidade que escolhi nesse caso, pixels, é a unidade mais comum utilizada na web. Você já deve ter ouvido falar dela (dizemos, por exemplo, que resolução full HD é 1920x1080 pixels). Se eu uso pixels, o valor é fixo: ou seja, uma altura de 100px significa 100px não importando o tamanho da tela do usuário, se ele redimensiona o navegador, etc.

width

A largura de um elemento. A unidade que escolhi nesse caso, porcentagem, é relativa. Isso significa que a largura real do elemento dependerá de alguns fatores: nesse caso, a largura do elemento pai (body), que consequentemente depende da largura da tela na qual a página está aparecendo. Com 50% queremos que a largura seja sempre a metade do total. Altere a largura de seu navegador para ver a diferença.

overflow

Essa propriedade significa “transbordamento”. Como nossa div tem altura e largura limitadas, conteúdo pode estar “vazando”, ou seja: temos conteúdo demais para um container muito limitado. Isso não necessariamente vai acontecer, mas porque nossa altura (100px) é bastante pequena para um texto com imagem, é muito provável que aconteça sim. Podemos decidir, então, se queremos esconder esse conteúdo (valor: hidden) ou se queremos aplicar scroll no conteúdo (valor: scroll). Se você apagar essa propriedade, o navegador assume que você quer ver o conteúdo (valor: visible) mesmo que ele não caiba na seção.

background-color

Essa você já conhece.

color

Determina a cor dos textos dentro do container.

padding

Determina margem interna. Se você apagar essa propriedade, notará que o texto e a imagem ficam muito colados à borda (você pode notar isso também na div#person, que não tem padding). O objetivo do padding é proporcionar limites internos para o seu conteúdo. Quando eu determino que padding é igual a 20px, estou dizendo de uma forma resumida que o padding do topo (padding-top), o padding da direita (padding-right), o padding de baixo (padding-bottom) e o padding da esquerda (padding-left) são 20px.

margin

Determina margem externa. Nossas divs estão muito grudadas uma na outra, então apliquei margin-bottom de 20px para separá-las. A propriedade margin é similar à propriedade padding nisso: podemos especificar somente um dos lados ou todos eles.

Experimente! Não faça igual ao meu código. Veja quais outras possibilidades você consegue alterando, incluindo e excluindo propriedades.

Resultado final. Tente identificar cada propriedade CSS modificada e cada elemento HTML usado.

Quando o CSS não funciona como eu esperava…

Muitas vezes você escreverá uma regra CSS mas obterá um resultado diferente do que esperava. Quer um exemplo? Remova a propriedade overflow do código que acabei de te mostrar.

Removi pra você. Compare com a imagem acima.

Se eu não lhe tivesse contado sobre o overflow e você tivesse aprendido somente altura (height), é provável que você tenha achado que a altura não funcionou. De que adianta determinar uma altura que não vai ser respeitada?

Mas assim como o overflow é a propriedade chave para solucionar esse engano, o CSS tem várias propriedades que precisam ser usadas em conjunto para que o código funcione como queremos. As propriedades que vimos hoje são uma parcela pequena mas importante das existentes, que veremos melhor no próximo artigo.

Por enquanto, crie uma pasta dentro de “Projetos Front End” com o nome que melhor descreve a página que você construiu hoje. No meu caso, vou chamar de “projeto-universo”. Agora transfira todos os arquivos e pastas que criamos (com a exceção, claro, da própria “Projetos Front End”) para essa nova pasta. Vamos criar novas pastas dentro de “Projetos Front End” para cada projeto e organização é muito importante!

Veja o quanto você aprendeu hoje: há apenas alguns minutos, não sabia nem como começar uma página web, não é mesmo? Agora você sabe como inserir texto, imagem e variados tipos de títulos; como juntá-los e separá-los em seções e como mudar várias coisas de sua aparência: cores de fundo, cores de texto, bordas, margens, alturas e larguras…

Se alguma coisa não funcionou, não desanime: Pergunte nos comentários que responderei o mais breve possível. Você pode também buscar no Google ou perguntar em fóruns relacionados. É importante procurar desenvolver suas perguntas com a nomenclatura que tenho introduzido: coisas como tags, elementos, seletores, containers, propriedades, valores, atributos… Pode parecer muita coisa, mas leve seu tempo absorvendo esses conceitos e não tenha medo de exercer sua criatividade. Você já pode criar páginas simples!

Brinque você mesmo!

Abra um site que você achar legal, qualquer site. Pode ser esse artigo mesmo ou a página que você acabou de criar. Clique com o botão direito do mouse. Procure uma opção que diga algo como “Inspecionar elemento” e clique nela.

Inspecionando elemento no Google Chrome. Note que foi assim que eu removi a propriedade overflow para mostrar pra vocês.

Você deverá ver a estrutura HTML ao lado esquerdo e as regras CSS ao lado direito. Você pode mexer neles! Desligar e ligar propriedades, alterar valores ou mesmo editar conteúdo do HTML. As alterações não serão salvas e você as perderá se recarregar a página; mas é uma boa prática e você poderá conhecer e entender melhor como HTML e CSS funcionam. Desenvolvedores estão sempre inspecionando o próprio código, tanto para buscar erros quanto para fazer experimentos.

Agora, use suas novas ferramentas e seus novos conhecimentos. Pratique bastante até nosso próximo encontro. E não se esqueça de comentar se tiver qualquer dúvida.

A partir de agora, espere por cada artigo sempre às quintas-feiras, até a meia-noite. Clique aqui quando estiver pronto para colocar em prática a próxima parte. Não se apresse, lembre-se que descanso também é importante para nosso cérebro!

Até lá!

* Para efeitos de simplicidade estou considerando que Windows é seu sistema operacional.

** A série #VemComigoSerDesenvolvedor tem como objetivo ensinar da forma mais amigável possível. Isso significa que alguns detalhes (importantes, mas que podem ser maçantes e até assustadores) não serão explicados de imediato. Estou considerando que é mais importante motivar o novo desenvolvedor, com mais prática e menos falação.

Like what you read? Give Andrea Santana a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.