Codificando à mão seu primeiro site: noções de HTML e CSS (original)

1. Uma introdução: Ei! Olá. Meu nome é Rich Armstrong e eu tenho projetado e construindo sites nos últimos 10 anos ou mais. Esta aula é sobre como aprender a criar seu próprio site do zero. Eu vou te ensinar como escrever seu próprio HTML e como escrever seu próprio css. A capacidade de escrever seu próprio HTML e CSS abre um mundo de possibilidades. É divertido, é empoderador, e você começa a praticamente, fazer o seu próprio pedaço da Internet. Então, no final da aula, você terá feito seus primeiros sites de uma página, você terá uma compreensão básica de HTML e CSS, seus amigos vão ficar com ciúmes, sua mãe vai ficar orgulhosa de você, e você será capaz de compartilhar sua criação na Internet, o que é muito legal e você será capaz de entender isso, que pode ser ainda mais legal. Espero que esteja animada porque estou animada para te ensinar. 2. Esse curso foi atualizado!: Estou super entusiasmada por teres decidido fazer esta aula. Uma tonelada de estudantes aceitaram e eles têm ótimas críticas, criaram projetos incríveis e fizeram um monte de perguntas. Mas eu fiz essa aula em 2015, o que significa que um monte de coisas mudou, funciona de forma diferente do que acontece nesta aula. Criei uma nova versão da classe, que é mais atualizada e tem melhor qualidade de áudio e vídeo. Você pode assistir esta aula de mão. Esse conteúdo ainda é super incrível. Mas, eu recomendo vivamente verificar o novo. Aprender a codificar seu próprio site abrirá portas, guiará você por novos caminhos de carreira e capacitará você a compartilhar o que deseja com o mundo. Visite este link para conferir a nova turma. 3. O que vamos fazer, aprender, fazer?: O que vamos fazer? O que vamos fazer? Vamos fazer um site de uma página para o seu herói favorito de animação ou desenho animado. Então o meu é Wreck-It Ralph, e aqui estão três sites de estilo diferente que eu te levei através e eu mostro como eu faço. Eu ensino-te a usar o Texto Sublime. Eu ensino-te a usar o Google Chrome. Eu ensino-lhe como usar o GitHub e como compartilhar seus sites e suas criações na web. Começamos muito pequenos e fáceis, e nós puxamos para cima e eu ensino-vos como usar HTML ou como escrever HTML, sobre como escrever CSS e como conectá-los juntos. Tudo é narrado visualmente e eu forneço metáforas simples de como as coisas funcionam. Junte-se a mim e aprenderá a construir os sites dos seus personagens. 4. Faça o download desses 3 aplicativos gratuitos: Para tornar a construção de sites divertida e fácil, precisamos de três coisas. Abra seu navegador e procure algo chamado Sublime Text 3. Sublime Text 3 é um editor de código. Baixe o para o seu sistema operacional. Vai fazer escrever HTML e CSS uma brisa. A próxima coisa que precisamos é do Google Chrome, então procure por isso. O Google Chrome é, como, o Internet Explorer ou o Safari, mas tem algumas ferramentas realmente excelentes para as pessoas que criam sites. Vou te mostrar exatamente como usá-la. Faça o download e você estará bem no caminho para entender como seus sites funcionam e se parecem. A próxima coisa que precisamos é GitHub Desktop. O que o GitHub Desktop nos permite fazer ou o que o GitHub nos permite fazer, é que ele nos permite armazenar código e rastrear nossas alterações nesse código. Vamos usá-lo para carregar, armazenar e hospedar nossos sites e como uma ferramenta para compartilhá-los com outras pessoas. Vamos baixar esse. Com esses três aplicativos, podemos conquistar o mundo, não o mundo inteiro, mas o mundo HTML e CSS. Eles vão ser muito úteis e vai ser divertido e você vai aprender muito. Vou avançar para quando todos os aplicativos forem baixados e mostrar-lhe como configurá-los. Veja isso agora. 5. Instale os aplicativos: Meus aplicativos foram finalmente baixados. Agora, tudo o que fazemos é abrir a pasta Downloads e começar a instalar esses caras maus. A primeira coisa é o Texto Sublime. Vamos abrir o DMG se você estiver em um Mac, no Windows, vocês fazem suas coisas. Se você ficar realmente preso, me dê uma chance. Nós apenas pop na pasta Aplicativos. Se você já tem uma cópia, substitua-a como eu. Fantástico. O próximo é o Google Chrome. Vamos clicar duas vezes sobre isso, o mesmo tipo de coisa. Arraste-os para a pasta Aplicativos, este é um pouco maior, pode demorar um pouco mais. Novamente, se você já tem uma cópia, substitua-a como eu faço. O próximo é o GitHub Desktop. Nós só vamos arrastar isso diretamente para a nossa pasta Aplicativos. Há três coisas que você precisa instalar. 6. Crie e compartilhe sua primeira página da Web: Nós baixamos esses três aplicativos. Agora, vamos fazer um site. Nós vamos para a nossa pasta Aplicativos e vamos procurar por nosso aplicativo GitHub. Eu só vou digitar G-I, que vai me levar para o aplicativo GitHub Desktop. Vamos abrir isso e ser-lhe-á pedida palavras-passe ou autenticação. Você será levado através de um monte de telas de interesse, e eventualmente você vai chegar a algo assim, que irá pedir-lhe o seu login e senha, que você provavelmente não terá, então nós vamos obter um de github.com Abra este link. Você precisará escolher um nome de usuário, inserir seu e-mail e criar uma senha e, em seguida, inscrever-se. Se já tiver uma conta como eu, pode iniciar sessão. Meu nome de usuário é mrra-screencast, e minha senha é um segredo. Depois de entrar ou se inscrever, você chegará a uma tela que se parece com esta. Muito importante, porém, é verificar sua conta do GitHub em seu Gmail ou em seu aplicativo de e-mail, onde quer que seja. Sem verificá-lo, você não pode realmente hospedar páginas corretamente. Isso cria um novo repositório, que é como criar um novo projeto. Vamos chamá-lo de herói de desenho animado ou gero. Eu preferiria herói. A descrição, o meu primeiro site ou digamos um site sobre o meu herói de desenho animado. Vamos mantê-lo público para que as pessoas possam vê-lo, que as pessoas possam copiar o código se quiserem. Vamos inicializá-lo com um README, lá, mas pegajoso sobre isso, então eu prefiro incluí-lo, e criar seu repositório. O que precisamos fazer antes de tudo, eu sei que é realmente esmagador ver todas essas informações, todos esses links, é apenas clicar neste menu suspenso e digitar gh-pages e criar um novo ramo chamado gh-pages. Pressione “Enter” ou pressione esse link lá. Isso cria uma nova página, e esta é uma filial especial onde podemos realmente hospedar nosso site. Esse é o Passo 1. etapa 2 vai para o aplicativo GitHub Desktop e fazer login novamente. Lembre-se do seu nome de usuário. Ele vem a calhar agora. sessão e, a partir de agora, estará logado como esse utilizador até terminar sessão. Vamos fechar esta janela. O que precisamos fazer agora é que precisamos basicamente obter esse projeto do GitHub. Lá está ele. Vou cloná-lo para o meu computador local. Vou selecionar a área de trabalho como meu diretório de projeto, e voila. Em seguida, selecione Cartoon-hero e certifique-se de que você está trabalhando em uma ramificação gh-pages. Isto é muito importante. Vamos criar um site, então queremos que seja uma página do GitHub. Essa é a primeira parte da história do GitHub feita. O que precisamos fazer a seguir é procurar por Texto Sublime. Na sua pasta Aplicativos, vou apenas procurar ou digitar S-U para abrir o Sublime. Vamos abrir isto, e depois seguimos por enquanto. Digite h1 Meu primeiro site, e h1 novamente. Você vai notar que eu estou embrulhando um h1 com um sinal menor que e um maior que, e eu estou fechando com um menor que, uma barra, e um sinal maior que. Não parece muito notável. Mas você verá que assim que eu salvá-lo na minha pasta como um arquivo HTML, eu vou apenas salvá-lo como test.html. Você verá essa cor. Começa a codificar a cor do meu ficheiro. O que ele também faz é começar a me dar sugestões sobre o que escrever, e também completa um monte de código para mim. Se eu pressionar “Enter” agora, você vai ver que ele faz um pouco de trabalho para mim, e eu não tenho que me lembrar de todos esses personagens engraçados. Aqui, vou dizer que a minha cor favorita é vermelha. Fantástico. Vamos salvar isso. A próxima coisa que podemos fazer é procurar o Google Chrome. Vou digitar G-O na minha pasta Aplicativos e abrir o Google Chrome. Ele vai me perguntar se eu quero configurá-lo como meu navegador padrão. Vou dizer que sim, por favor. Mac vai ser um pouco cauteloso, e eu vou dizer sim, usar o Google Chrome. Então temos o Google Chrome, Sublime Text e o GitHub Desktop instalados e estamos usando-os. Eu só vou arrastá-los ligeiramente para a esquerda para mantê-los no meu bar na parte inferior, mesmo quando eles estão fechados. Na minha janela do Finder, vou para a área de trabalho, abrir minha pasta Cartoon-Hero e arrastar meu arquivo test.html para o Google Chrome, e lá está meu primeiro site. Agora quero compartilhar com o resto do mundo. Eu vou para o GitHub Desktop. Vejo que há uma alteração não confirmada, test.html. Isso significa que ele percebe que há uma mudança. Agora eu quero dizer sim, cometer essa mudança, porque eu realmente terminei de trabalhar neste pouco, e eu vou dizer, criei meu primeiro arquivo de teste. Você pode dar uma descrição se quiser. Seu resumo e descrição são realmente úteis quando você está trabalhando em um monte de mudanças e você está trabalhando com equipes para que você possa dizer, isso é exatamente o que eu mudei e é por isso que eu mudei. Em seguida, você se compromete com gh-pages, que o compromete com seus projetos locais em seu computador. Agora, para colocá-lo on-line, você realmente quer sincronizá-lo. Agora, isso é realmente útil. Isso significa que você pode manter um monte de alterações no seu computador e, em seguida, quando terminar, você pode enviar tudo para o GitHub online. Lá vamos nós. A próxima coisa que precisamos ir para o Chrome, criar uma nova guia e agora lembre-se, seu nome de usuário do GitHub. O meu foi mrra-screencast, e agora, você precisa ir. github.io/ nome do seu projeto, então cartoon-hero/test.html. Aperte “Enter”. Há um erro. Vamos ter uma leitura. Ele não contém o arquivo selecionado. Isso é porque eu soletrei errado. Vamos realmente soletrar direito, test.html. Lá vamos nós. Você pode compartilhar esse URL com qualquer pessoa. Mas agora, eu realmente quero que meu vermelho seja vermelho. Agora, é aqui que ele fica realmente poderoso. Volte para Sublime Text, e nós vamos digitar span, não spam, e você verá como ele também foi concluído lá novamente. Fantástico. Vamos dar a esses elementos e atributos. Lá vamos nós. Eu vou salvá-lo. Agora, no Chrome, você verá isso. Eu vou voltar para o nosso local, que você verá que há um arquivo, e você verá que o online é o nosso nome de usuário. Eu vou refrescar este, e você vai ver que minha cor favorita é vermelho acabou de aparecer. Agora, como colocamos isso on-line de novo? Vá para GitHub Desktop e você verá que ele captou algumas alterações. Você verá que há um monte de textura vermelha e um monte de verde. Está dizendo que o vermelho está indo e o verde está chegando. Fantástico. Certifique-se de que você está se comprometendo com gh-pages, e então nós vamos dizer, colocar um espaço dentro. Meu vermelho agora é vermelho. Você é bem-vindo para alterar seu arquivo de teste como quiser. Experimente, divirta-se. Coloque o que quiser. Então eu digo para se comprometer com gh-pages. Eu faço uma sincronização rápida para ter certeza de que ele está indo para github.com. Assim que isso terminar de sincronizar, vou esperar um pouco mais antes do GitHub para obter seu ato junto. Em seguida, vou para a segunda guia e atualizar. Se nada aparecer, pode demorar um pouco mais para que as coisas realmente aconteçam. Eu faço outra atualização, e outra. Talvez não aconteça muito rápido, mas eventualmente vai ficar vermelho. Se nada realmente acontecer, vá para o Safari e vá para a sua página de commit, que você verá que algo aconteceu, coloque um espaço dentro. Na verdade, aconteceu. Volte para o Google Chrome e agora atualize, e você verá que ele diz, minha cor favorita é vermelho. Às vezes as coisas levam um tempo. Às vezes você precisa esperar um pouco. Lá vamos nós. Seu primeiro site. 7. Teoria de caixa HTML (é fácil, prometo!): Ok, o que é HTML? Bem, basicamente, HTML é uma linguagem que os humanos escrevem e navegadores podem entender, é a linguagem para exibir informações. Mas o que é isso? Eu não entendo. Sim, uma pergunta muito boa. HTML é na verdade um monte de caixas, caixas dentro de caixas, dentro de caixas, dentro de caixas. A caixa principal é, na verdade, o seu navegador. Dentro de qualquer caixa, você pode ter outra caixa HTML ou você pode ter texto, ou você pode não ter nada. Então há realmente três opções para cada caixa. Algumas caixas são invisíveis e cada caixa tem um propósito diferente, e cada caixa é exibida de forma diferente por padrão, pelo navegador, é bastante poderoso. Assim, por padrão, a maioria das caixas são tão altas quanto seu conteúdo, outras caixas são tão altas e tão amplas quanto seu conteúdo. A maioria das caixas gosta de se sentar o mais longe possível para a esquerda e o mais longe possível para o topo. Então, o que é uma caixa HTML? Analogia legal, metáfora legal, mas não entendemos. Deixe-me explicar para você. Cada caixa HTML única ou a maioria deles, tem uma tag de abertura e tem uma tag de fechamento e tem conteúdo. Lembre-se, o conteúdo pode ser texto, em branco ou nada, ou pode ter outros elementos HTML dentro dele. Uma tag de abertura tem menor ou menor que símbolo. Ele tem o nome da tag, e então ele tem um símbolo maior que, que é a sua tag de abertura. A tag de fechamento tem um símbolo menor que e tem uma barra, o nome da tag e, em seguida, um símbolo maior que, que é a tag de fechamento. Agora todo o elemento HTML tem uma tag de abertura, o conteúdo e a tag de fechamento. O que é realmente legal sobre elementos HTML é que eles podem ter esses pequenos pedaços secretos chamados atributos que o navegador pode entender. Assim, como por exemplo, uma tag de link ou uma tag de âncora, que é um nome de tag de um, ela tem atributos diferentes. Um pode ser um href, o URL para o qual você deseja que o link vá. Você também pode ter como devo abrir o link como alvos. Você também pode ter um atributo de título, que diz ao navegador quando o usuário passa o mouse sobre isso por um pequeno período de tempo, o que devemos exibir? Então, esses são alguns atributos básicos que você pode adicionar à tag link. Essa é a teoria HTML para você. 8. Comece a escrever seu próprio HTML: Chega de teoria. Vamos fazer algumas coisas. Arraste os desenhos animados aqui para Sublime Text e vamos começar a escrever algum HTML. Outra teoria, vou segui-la. Até que o salvamos como um arquivo HTML, você não vai obter nenhum auto-completar código legal. Salve-o em sua pasta de herói dos desenhos animados como elements.html. Lá vamos nós. Agora você diz que há algum código de coloração. Há também código de auto-completar h2. Rubrica 2. Vamos fazer um parágrafo. Este é o meu primeiro parágrafo. Temos alguns elementos, há um padrão pronto e básico chamado tag div. Esta é a sua caixa básica e é a mais comum para colocar mais caixas dentro dela. Podemos continuar colocando caixas dentro de caixas dentro de caixas. Eventualmente você precisa colocar algo dentro de algo. Vou colocar uma etiqueta aqui. Agora uma tag é um link ou uma âncora. Ele vem com um atributo especial chamado href, e dentro desse href, você especifica url. Diga ao navegador, se o usuário clicar nisso, para onde devemos ir? Você colocou algo lá dentro. Vamos colocar http.skillshare.com. O conteúdo do mesmo deve ser, visite o site de compartilhamento de habilidades. Fantástico. Vamos salvar. Agora, clique com o botão direito do mouse em elementos de HTML revelar e localizador e, em seguida, arraste-o para o Google Chrome. Então temos algo, você vê como o h1 é diferente do h2. Rubrica 1, rubrica 2. É muito diferente do seu parágrafo e é muito diferente do seu link que é sublinhado e é roxo porque nós o visitamos antes. Se eu clicar neste, vai me levar a algum lugar. Para o website skillshare. Isso é fixe. Voltando ao sublime, agora posso alterar ou dar a tag a ou a elementos um atributo extra chamado target, que me permitiria definir seu valor para sublinhar em branco. Salve isso. O que isso vai fazer, é que ele vai realmente abrir em uma nova aba, o que é muito legal. Isso significa que você pode simplesmente continuar abrindo novas guias e novas guias e novas guias e eventualmente chegar a tantas que você nem sabe o que cada uma delas é. Eu discordo. Vamos voltar para Sublime Text, e eu vou mostrar-lhe mais alguns outros elementos e seus atributos. Se criarmos uma nova tag de parágrafo, podemos dizer, “Hey There”. Mas se eu quiser dizer “Ei, meu nome é:” Agora eu quero realmente colocar isso em uma nova linha. Eu posso usar uma tag br, que é uma pausa. Agora você pode pressionar “Enter”. Nós não precisamos. Mas eu não vou. Meu nome é Richard. Vamos salvar isso. Arquivo, salve. Daqui, você pode ver. Na verdade, há uma quebra de linha. Essa é uma das etiquetas especiais. Não tem uma etiqueta de encerramento. O próximo que eu gostaria de mostrar a vocês são os elementos da imagem. A tag de imagem também não tem uma tag de fechamento. Outro especial, outro quebrador de regras. Se digitarmos test.jpg e salvarmos, volte para o Chrome e atualize. Você verá que ele aparece com um link de imagem quebrado. Agora o que eu quero fazer é encontrar uma imagem. Sr. R.A. Vou procurar isto. Sr. R.A., Richard Armstrong. Vou procurar por algumas imagens. Há uma boa. Agora, vou clicar com o botão direito do mouse e vou salvar a imagem como test.jpg. Fantástico. Agora, quando eu atualizar, minha imagem aparecerá. Agora, com uma imagem, é muito legal porque isso significa que você também pode especificar uma diferente. Se eu clicar neste e clicar com o botão direito do mouse e especificar, bem, copie o URL da imagem. Significa que eu não tenho que baixar isso. Significa que posso copiar e colar isso dentro da minha fonte. Quando test.jpg é um URL relativo, ele está dizendo onde posso encontrá-lo localmente? Você também pode colar em um URL absoluto, que começa com HTTP ou HTTPS://. Agora vou salvar isso e voltar ao meu navegador, voltar ao elements.html e atualizar. Verá que agora tenho uma nova imagem. A última coisa que precisamos fazer para todas as páginas HTML é que precisamos envolvê-lo em um elemento HTML. Você vê tudo isso? Isso foi bem intenso. Eu só vou editar, desfazer, e vou fazer isso sozinho. Vamos HTML. Vamos escrever a tag HTML de fechamento e, em seguida, cortá-la e colocá-la na parte inferior. O que precisamos então é que precisamos de uma etiqueta de cabeça e precisamos de uma etiqueta de corpo. Você vê o que acontece quando você fecha as coisas automaticamente. Etiqueta corporal. Eu vou cortar essa etiqueta corporal e eu vou colocá-la bem abaixo do último elemento. O que HTML recomenda é que você coloque todos os seus elementos invisíveis dentro de sua tag head. Vou mostrar-te um exemplo de caixas invisíveis e todas as tuas coisas visuais ou visíveis dentro da tua etiqueta corporal. Esta é apenas a formalidade. Você realmente não tem que ter tudo isso, mas para todos os navegadores e para fazer as coisas funcionarem super sem problemas o tempo todo, eu recomendo muito. Faremos isso de agora em diante. Dentro de sua cabeça, podemos fazer algo como título e podemos realmente mudar o título da página web. No momento, o título da página da Web é elements.html. Quero mudar para outra coisa. Em Sublime Text, vou dizer elementos com alguns pontos de exclamação. Guarde isso, atualize. Você vê que diz elemento e os poucos pontos de exclamação. Isso é sobre isso em termos de como agitar HTML. Agora o que é realmente legal é que todos os elementos visíveis podem ter atributos de estilo e dentro do atributo de estilo, você pode começar a brincar com alguns CSS. Podemos dizer que a cor é azul. Podemos também dizer sublinhado decoração de texto. Parece bem legal. Arquivo, salve. Parece um link, mesmo que não consigamos clicar nele. Você pode ver como você pode começar a mexer com alguns CSS aqui. 9. Teoria do CSS (resumida): Aprendemos como fazer caixas e colocar caixas dentro de outras caixas, mas como fazer essas caixas parecerem bonitas? Bem, é aqui que o CSS entra. O que diabos é CSS? É um monte de estilos que podem ser fixados com tags HTML específicas através de vários meios e maneiras, mas basicamente uma regra CSS contém uma lista de pares de chaves e valores. Isso significa que você pode dizer: cor é isso, cor de fundo é isso, tamanho da fonte é isso, margem é isso, preenchimento é isso, é um monte deles, eu não vou passar por todos eles agora, então isso é o Teoria. Vamos entrar nisso. 10. Três maneiras de usar esse CSS: Vamos fazer alguns CSS agora. Arraste sua pasta Cartoon Hero para Sublime Text e vamos criar um novo arquivo. Vamos salvá-lo como stylish.html. Vamos salvá-lo e eu vou apenas escrever uma tag HTML e deixar Sublime completá-lo para mim. Você verá um pouco de informação extra no topo aqui. Isso está tudo bem. Vamos chamar este documento elegante. Dentro do corpo, vou criar algumas etiquetas H1, rumo 1-1. Vou copiar isto, e depois vou colá-lo algumas vezes. Então eu vou criar um novo, que é um h2. Vou chamá-lo de Cabeçalho 2-1, e vou copiar isso e colá-lo algumas vezes. Eu só vou fazer a diferença que você sabe exatamente o que está acontecendo. Está bem. Vamos salvar isso. Então, para dar um pouco de estilo, podemos dizer cor, dois pontos, e depois dar-lhe uma cor, e depois ponto-e-vírgula. Então, se você quiser alterar o tamanho da fonte, você pode ter 90 pixels porque é um h1 tão grande. Está bem. Nós salvamo-lo. Em seguida, clique com o botão direito do mouse no arquivo HTML elegante, Revelar no Finder e arrastá-lo para o Google Chrome. Você verá que, em seguida, há um monte de elementos lá. Um deles é vermelho. Mas o tamanho da fonte não parece muito diferente, e nós o chamamos de tamanho fon, então vamos mudar para T. Salve-o. Volte para o Google Chrome. Isso é grande. Isso é exatamente o que queremos. Está bem. Mas agora quero que todos os outros títulos sejam exatamente os mesmos. O que fazemos é copiar isto e colá-lo. Eu só vou Control C ou Apple C e colar. Está bem. Uau, isso leva muito tempo. Arquivo, Salvar, e você vai ver agora que, uau. Cabeçalhos 1s e cabeçalhos 2s parecem exatamente iguais, o que deveria ter derrotado o ponto, não é? Agora, na verdade, eu quero que todos os H2s sejam verdes, então eles vão parecer diferentes. Agora, novamente, você tem que mudar um. Mude todos eles. Fica um pouco confuso, e consome muito tempo, mas faz o trabalho. Está bem. Mas há uma maneira melhor. Em vez de usar um atributo de estilo no elemento HTML dentro de seus elementos head, vamos criar uma tag style. Sublime terminará para você e dentro de sua tag estilo pressione “Tab” duas vezes, e depois digite h1. Dentro do seu h1, eu só vou pressionar “Shift” e “Tab” apenas para desligá-lo. Seu h1, podemos dizer, cor deve ser vermelho. Está bem. Agora eu quero tirar todas essas cores devem ser vermelhos. Fantástico. Arquivo, Salvar. Refresque. Lá vamos nós. Agora, você pode não notar o quão legal isso é, mas se eu quisesse mudar todos eles para laranja, soletrado corretamente, é claro, eu poderia apenas digitar uma linha e, em seguida, Salvar, Atualizar e, em seguida, todos os três dos meus elementos são alterados. Agora este é o poder do CSS, especialmente quando você retirá-lo dos elementos HTML reais, você pode começar a mudar a aparência do seu site de um arquivo diferente e ele muda todo o seu site, todo o seu site, não apenas todos e cada elemento. Isso torna o seu site diferente, mais elegante e atualizá-lo realmente, muito simples e fácil. Está bem. Vamos tirar o tamanho da fonte também. Vamos cortá-lo, e vamos colá-lo. Está bem. Vou tirar os atributos de estilo de todos esses H1s. Você verá que eu mantive os atributos de estilo de h2s por enquanto. Está bem. Não quero comprá-lo ainda. Muito obrigado. Ainda estou tentando. Nem sei se gosto de HTML e CSS ainda. Está bem. Sua cor é laranja, tamanho da fonte é 90 pixels. Talvez queira fazer outra coisa. Digamos, decoração de texto. Vamos dar um sublinhado. Lá vamos nós. Arquivo, Salvar, Atualizar e voila. Incrível. Assim, você pode começar a ver que ter uma linha de código pode começar a caber todo o seu site ou todos os elementos em um site. Está bem. Agora, eu quero fazer a mesma coisa com H2s. Quero o tamanho da fonte, não os pesos da fonte. Quero que o tamanho da fonte seja de cerca de 40 pixels. Então vamos salvar isso e atualizar. Não aconteceu nada. Está bem, mas digo-te porque não aconteceu nada. Porque quando você escreve estilos em um atributo de estilo, eles substituem os estilos e a marca de estilo. Está bem. Esta é a natureza do CSS. Há um monte de sobrescrever ou sobrescrever que acontece. Então, se for primeiro, o que é escrito primeiro e outra coisa depois que é escrito, se ele tem a mesma regra, então ele irá substituir. Então, se eu copiar isso e colá-lo, e alterá-lo para 60, o valor da segunda regra substituirá o valor da primeira regra. Da mesma forma, se estiver nos atributos de estilo, o tamanho da fonte substituirá os tamanhos de fonte anteriores. Ok? Então isso é algo para se lembrar. Eu só vou pegar todos esses estilos, porque na verdade, nós não os queremos. Adoraríamos que tudo estivesse dentro de uma folha de estilo, dentro da etiqueta de estilo. Está bem. Mas quero que a minha cor seja verde. Então vamos salvar isso, e vamos ver o que acontece. Está bem. Isso parece bom. Mas agora, como sabemos que isso é realmente o que queremos? Como sabemos que são 40? Como sabemos que não são 60? Como sabemos o que é o quê? Agora o Google Chrome entra. Clique com o botão direito em algo Inspecione o elemento. Uau, você vai começar a ver que ele realmente sabe HTML e CSS. Você pode inspecionar um monte de coisas diferentes. Então o que podemos fazer aqui é que nós podemos realmente ir e clicar neste h2 ou inspecionar um elemento, e ver que o tamanho da fonte é 60, e que o tamanho da fonte costumava ser 40, mas parece que está sendo substituído por este h2. Você pode ver isso na linha 15 e na linha 12, exatamente assim. É muito, muito útil. O que também é realmente útil é que você pode dizer, “Eu me pergunto que tamanho deve ser, porque 60 não é muito certo Então nós podemos realmente escrevê-lo 50 pixels, ou talvez 22 pixels é apenas o certo. Voilá. Você pode ver como parece, mas quando você atualiza, as coisas voltam ao normal. Então vamos voltar aqui. Altera para 22 e remova este h2. Fantástico. Mas agora o que acontece se eu quiser alguns dos meus h1s e alguns dos h2s sejam de uma cor diferente? É aqui que se torna realmente interessante. Então eu vou dizer classe, um novo atributo, classe. Vou dar a certos elementos uma certa classe. Vamos dizer, pequeno. Vou copiar isto, e vou colá-lo em alguns deles. Está bem. Agora, como diabos nós apenas obter h1s com uma classe de pequeno, e apenas obter h2s com uma classe de pequeno? Bem, no CSS, há uma certa maneira de fazer isso, e é aquele ponto e o nome da classe. As mesmas regras se aplicam aos nomes de classe. Então, digamos, o tamanho da fonte é de 12 pixels e Salve isso. Verá que alguns elementos são muito pequenos. Você vai começar a ver que, hey, que um é pequeno, que um é pequeno, que um é pequeno, porque todos eles têm uma classe de pequeno. Isso é muito legal. Agora a coisa é, mesmo se tivéssemos que mover a classe pequena acima do seletor h2, ele ainda iria substituí-la. Você pode ver aqui. Então você pode esperar que porque o pequeno veio primeiro e o h2 veio em segundo lugar, que esse tamanho de fonte substituiria esse tamanho de fonte. Mas o que CSS também faz é que tem pesos. Portanto, um nome de tag tem uma ponderação menor do que um nome de classe. Da mesma forma, algo com um ID de primeiro tem uma ponderação ainda maior do que um nome de classe, e uma ponderação maior do que um nome de tag. Então, se colocarmos um tamanho de fonte de 150 pixels no primeiro elemento, ou o elemento com um ID de primeiro, você teria um 150 pixels. Mas o que é uma identificação? Bem, uma identificação é quase como uma classe, exceto que só pode ser em um elemento. Portanto, um elemento só pode ter um ID de primeiro. Ok? Há o nosso grande título, com primeiro, e você pode ver que mesmo que seja mais acima na página do que as outras regras, ele tomou preferência porque é um ID. Mesmo assim, se formos colocar um atributo de estilo aqui e mudar o tamanho da fonte para eu não sei, vamos mudá-lo para 20 pixels. Arquivo, salve. Você verá que um estilo embutido em um atributo de estilo tem preferência em vez de um ID. Portanto, há vários pesos para pensar ao fazer styling. A próxima coisa que precisamos considerar é o que acontece se eu quiser atingir outra coisa dentro de um elemento? Se há uma extensão aqui, e dentro dela, eu digo: “Experimente.” Lá fora, também tenho uma extensão que diz: “Experimente.” Vamos salvar isso e ver o que acontece. O primeiro período, eu só vou inspecionar este elemento, diz tente me, mas é verde como o h2. Você vê o que um span faz, ele herda o contêiner do pai ou o estilo das caixas pai. Assim como eu vou inspecionar esse cara e inspecionar seu amigo. Desculpe. Herda do recipiente do corpo porque são os pais. Você vê, vãos são muito inteligentes por padrão. Mas agora eu quero tornar todos os vãos em itálico, então vamos tentar isso. Agora eu tenho CSS aqui, basta digitar span e digamos, o que poderia ser fontes? Lá vamos nós. Estilo de fonte, Itálico. Lá vamos nós. Vamos salvar e voilá, um itálico. Mas o que acontece se eu quiser que esse tempo faça alguma coisa? Bem, poderíamos colocar um nome de classe nele o que esperamos, ou o que poderíamos fazer é dizer h2 span, que significa que o span ou todos os vãos dentro de todos os h2s vamos fazer alguma coisa. O que devemos fazer? Podemos dar-lhe uma cor de fundo, podemos dar-lhe um “strike-through”. Vamos fazer isso. Font-style, font-family, não. Decoração de texto? Sim. Podemos ir em greve. Soletrar é terrível. Strike-through, mas não parece legal. Talvez haja um traço. Quem sabe? Vamos ver. Arquivo, salvar, atualizar. Nada realmente parece muito bom. Agora, o poder do Google é realmente útil quando se trata de CSS e HTML, porque toda a web é construída em HTML e CSS. Vamos fazer um rápido Google para CSS strike-through. Lá vamos nós. Há alguns sites que são realmente úteis. Propriedade de decoração de texto, line-through. Há um monte de informações diferentes, mas vamos copiar isso. Vamos ver se funciona. Line-through. Agora vamos voltar aqui e refrescar, lá vamos nós. Eu tenho um strikethrough ou um line-through como eles chamam e o que é mais, eu só tenho isso no H2. Há apenas mais uma coisa que eu gostaria de te mostrar. Como você pode ver, meus estilos estão crescendo mesmo que eu não tenha muito CSS e mesmo que nós não tenhamos estilizado nossa página muito. A melhor maneira de fazer o estilo das coisas é criar um arquivo de folha de estilo separado. O que vamos fazer é criar um link tag e texto sublime. Basta encomendar conjunto completo pronto. Bem, é um folhas de estilo, é um tipo CSS folhas de estilo e o HREF significa onde diabos ele está? Vamos apenas dizer que está na pasta CSS e é chamado test.css. Agora o que vou fazer é cortar todas essas coisas. Eu vou remover essas tags de estilo, e então eu vou salvar. Agora vou dizer arquivo, novo arquivo. Eu vou colá-lo e eu vou dizer arquivo, salvar como criar uma nova pasta chamada CSS, e então eu vou chamá-lo test.css e salvar. Em seguida, vai adicionar um recuo dizendo shift-tab, apenas para que ele é limpo e arrumado. Salve isso. Acesse o Google Chrome, atualize. Nada mudou, mas isso é bom. Só para ter certeza de que tudo está funcionando, vou adicionar uma nova regra e vou aplicá-la ao corpo. O corpo eu vou dizer cor de fundo. Vamos pedir cinza claro. Salve, atualize e fica cinza claro. Agora, isso é muito legal porque significa que podemos escrever um monte de CSS sem complicar nosso arquivo HTML. Nós apenas temos uma linha que se relaciona com o arquivo test.css. Fantástico. Isso é HTML e CSS para você. Aprenderemos muito mais à medida que criarmos nosso projeto, mas por enquanto, se você quiser sincronizar isso com a web e compartilhar isso com seus amigos e compartilhar seus experimentos, criar novos arquivos, novas pastas, novo HTML, novo CSS, vá em frente. Há um monte de links para CSS. Esperança guardas é um monte de links para HTML. Guardas de esperança, você pode referenciar todos os elementos HTML, todos os elementos CSS nos recursos fornecidos. O que queremos fazer aqui é ter certeza de que estamos no ramo gh-pages. Então vamos nos comprometer dizendo que fizemos um monte de coisas ou o que você quiser. Comprometer-se com páginas GH. Fantástico. Sincronizar. Uma vez sincronizado, podemos abrir o Google Chrome. Abra uma nova guia e, em seguida, o que vamos fazer é ir para o GitHub e vamos entrar. Então lembre-se do seu nome de usuário. O meu é mrra screencast. Lembre-se de sua senha, entre. Vá para o seu diretório ou repositório de heróis de desenhos animados, clique no commit. Você verá que há um commit inicial. Legal. Mas agora você precisa ir para o seu ramo gh-pages. Verá que fizemos um monte de coisas. Agora que você sabe que os commits vêm através, vamos abrir uma nova guia. Eu vou dizer, mrra-screencast.github.io/cartoon-hero/stylish.html Vamos ver. Lá vamos nós. Podemos compartilhar nosso site bonito com o resto do mundo. Divirta-se, brincar, fazer coisas malucas. Compartilhe seus links na galeria do projeto, feedback sobre os códigos de outras pessoas, responda perguntas, faça perguntas, enlouqueça, tenha um jol. 11. Primeiro, planejamento :): Tudo bem. Agora vamos começar a planejar nosso site, e o planejamento pode assumir qualquer forma que você gosta. Pode acontecer antes de um estágio, e depois de um estágio, antes de outro estágio. Não há tal coisa como planejar uma vez e, em seguida, nunca mais planejar em todo o projeto e desenvolvimento do site. Você precisa estar planejando antes de tudo o que você faz. Planejar é incrível. Uma das maneiras que eu gosto de planejar é, em primeiro lugar, fazer um esboço rápido do site se eu ainda não o projetou. Depois que eu o projetei, eu então gosto de fazer um wireframe, e isso não é um wireframe típico de como o site parece? Como é que funciona? Mas um wireframe de rótulo de caixa de como todas essas caixas vão se encaixar no site ou na página? Deixe-me levá-lo através do meu site de personagens e como eu coloquei todos os blocos. Em primeiro lugar, há a minha página, que é uma caixa grande. O que eu quero é a caixa de cabeçalho e dentro dessa caixa de cabeçalho, eu quero uma caixa de imagem de perfil. Quero que seja redondo, e coloquei uma cruz na caixa para significar que é uma imagem. O próximo elemento é um cabeçalho, ainda dentro do cabeçalho, e este será o nome do meu personagem, e talvez possa haver um subtítulo. Mas, por enquanto, há apenas um título. A próxima coisa é dentro do conteúdo, eu realmente gostaria que houvesse outro título, e talvez isso pudesse dizer sobre o meu personagem. Então vai haver uma tag de parágrafo com um monte de cópias, um monte de textos acima do meu personagem. A próxima coisa, outro título, e isso poderia ser dizer algo como as coisas favoritas do Meu personagem, ou os amigos favoritos do Meu personagem. O que eu vou fazer é colocá-lo em uma caixa de lista ordenada, e dentro dessa caixa de lista ordenada, vai haver um monte de elementos de lista. Depois disso, eu vou colocar uma imagem e novamente você vê a grande cruz que significa a imagem. Sob isso, haverá uma pequena legenda, e, em seguida, abaixo disso, outro cabeçalho com uma lista não ordenada, com um monte de elementos de lista. Esta lista pode ser coisas favoritas para fazer, ou amigos novamente, ou características, ou um monte de coisas diferentes que você pode colocar em listas. Depois disso, eu vou apenas incluir um pequeno rodapé e dentro desse rodapé eu vou dizer, este é quem fez o site, aqui é onde você pode me encontrar e qualquer outra pequena informação que meus usuários podem querer procurar. Isto é o que eu faço para todos os sites, de ir de um design para HTML e CSS. Este é um processo muito bom, uma parte muito boa do planejamento. Quando posso dizer, como é que tudo se encaixa como caixas? Você faz o mesmo para o seu site, você pode copiar o meu ou você pode vir acima com algumas idéias diferentes de seu próprio. Mas é muito bom pensar em como tudo se encaixa em caixas, e quais caixas se encaixam em quais caixas. 12. Vamos escrever o HTML do nosso site: Vamos escrever nosso HTML para este projeto. Vamos abrir a nossa pasta de heróis e arrastá-la para o Sublime Text e a primeira coisa que vamos fazer é criar um novo arquivo e vamos salvá-lo como index.html dentro da nossa pasta Cartoon-Herói. A razão pela qual chamamos de index.html é porque quando o navegador chega a um site, ele precisa saber qual arquivo não deve ser carregado primeiro e sempre procura seu arquivo de índice. A próxima coisa que vamos fazer é escrever uma tag HTML e deixar Sublime Text preencher o resto. Vamos remover este símbolo menor do que, então vamos começar a escrever o nosso HTML. Então meu personagem é Demolidor Ralph. Eu realmente gosto dele. Seja qual for o seu personagem, pode ser um personagem de desenho animado, um personagem animado, mas se você não gosta disso, escolha um personagem de filme ou escolha outra pessoa para fazê-lo, isso torna muito mais fácil e muito mais divertido. A próxima coisa que vamos fazer é inserir um elemento de link e Sublime Text sabe que é um CSS1 que é ótimo, então vamos dizer css/hero. css para que ele saiba onde encontrá-lo. Eu gostaria de salvar como eu vou apenas para o caso de o computador falhar ou algo ruim acontecer. Esse é o nosso elemento principal. Agora, vou fazer referência à minha caixa de arame aqui e ali. Vamos ver o que preciso fazer. Eu preciso de um elemento de cabeçalho em primeiro lugar, então deixe-me digitar meu elemento de cabeçalho e dentro do meu elemento de cabeçalho, eu preciso de uma imagem que é a nossa imagem de perfil e um cabeçalho. Vamos fazer minha tag imagem e minha fonte vai ser img/profile.jpg e, em seguida, abaixo disso, eu vou criar uma tag h1 e chamá-lo de Wreck-It Ralph. Fantástico. Esse é o meu cabeçalho, mas agora você vai ver meu wireframe que eu realmente tenho um recipiente externo e este não é o navegador, este é realmente um wrapper. Eu vou criar um novo chamado wrapper ou uma nova div com a classe de wrapper e ele vai embrulhar todo o meu conteúdo. A próxima coisa que vamos fazer é criar uma div com uma classe de conteúdo e aqui dentro, vou colocar todo o meu conteúdo. A próxima coisa é um rodapé e mesmo que na minha pré-visualização ou no meu wireframe não há nenhuma caixa real aqui para um rodapé e não há nenhuma caixa real para conteúdo, eu decidi que eu deveria colocá-los em. Seu wireframe não precisa ser super concreto, só ajuda você a planejar. Então os próximos elementos que vou colocar é o meu rodapé. Agora, dentro do meu conteúdo, o que eu preciso fazer é criar um h2 para este título ou este título, eu preciso criar uma tag p, outro h2, uma lista ordenada com um monte de elementos de lista dentro de uma imagem, um p com uma classe de legenda, outro título, uma lista não ordenada com alguns elementos de lista dentro e dentro do rodapé, eu preciso criar alguns elementos que eu vou usar uma lista para criar. Então vamos começar a escrever isto. A primeira coisa que eu quero fazer aqui é escrever sobre Ralph e eu estou escolhendo um h2 porque já há um h1 na página então estes não são tão importantes quanto o h1, mas eles são bastante importantes. Minha próxima é uma tag p e dentro dessa tag p, eu vou escrever um pouco sobre Ralph, então um cara mau de videogames de 8 bits que viaja o comprimento do fliperama para provar que ele é um cara legal. Ele também tem mãos maciças. Nós podemos levar que um deve contar. A próxima coisa que quero fazer é escrever sobre as características do Ralph. aqui eu vou usar um ol e dentro do ol, vamos criar alguns itens da lista. A primeira coisa, ele é super legal. O próximo item da lista, ele é tratado como durão, legal. No próximo, ele é amigável com personagens de glithy-girl. Não começou assim, mas acaba assim. Depois do nosso ol ou nossa lista ordenada, vamos ter uma imagem grande, então eu vou dar a esta imagem uma classe de imagem grande. Faz sentido, certo? A fonte da imagem também será big-image.jpg. Depois disso, vamos obter um p e eu vou dar-lhe uma classe de legenda e nesta legenda vai dizer, este é o Ralph em ação. Depois disso, vou criar outro h2 e dizer que os amigos do Ralph escreveram corretamente, é claro. Aqui, vou usar uma lista desordenada. Ele cria alguns elementos da lista. Só vou copiar e colar isto. Aqui dentro, vou encontrar alguns amigos dele. O primeiro é Jake do “Adventure Time”. O próximo é Bloo de Fosters. É o Lar de Foster para Amigos Imaginários. O próximo é Arthur dos Desastres do Rei Artur. Agora, o que eu vou fazer é encontrar rapidamente alguns links para aqueles três caras no Google Chrome. Vamos digitar Jake de Adventure Time. Vai ir um pouco, e sim, este é um que eu encontrei mais cedo. Vou copiar isto e criar uma ligação em torno do Jake. O href vai ser isso, os alvos serão sublinhados em branco, e o título vai ser a página de Visite Jake. Eu vou fazer o mesmo com Bloo. Procurar Boo Fosters Home, Chrome. Aqui está um que eu encontrei mais cedo. Vamos copiar isto outra vez. Aqui dentro, vamos criar um link em torno do Blue. O href será que acabei de copiar. O alvo será sublinhado em branco, e o título será a página de Visite Bloo. O próximo será Arthur. Vamos fazer a mesma coisa pelo Arthur, vamos criar uma ligação à volta dele. Novamente com um href, um sublinhado de destino em branco, e o título da página de Visite Arthur. Precisamos achar um link para Arthur. Eu amo o Google e [inaudível]. Lá vamos nós. Vamos copiar isso de novo. Volte para Sublime Text e cole-o no href. Esse é basicamente o nosso conteúdo. Agora, dentro do nosso rodapé, só precisamos de algumas coisinhas. Eu vou usar uma lista não ordenada novamente com alguns elementos da lista, vamos listar itens, eu vou dizer, Made by Rich. Em seguida, o próximo item da lista, eu vou dizer, Feito durante uma aula de Skillshare. Então, finalmente, eu vou dizer, este item da lista deve ser protegido por direitos autorais, mesmo que eu não tenha direito de copyright, deve ser, e ou cópia comercial, ponto e vírgula 2015. Agora, esta é uma maneira especial de escrever seu símbolo de direitos autorais. Vou colocar um link em torno do Skillshare, e então vou começar a preencher todos esses detalhes. São os meus sites. Novamente, o alvo deve estar sublinhado em branco e o título deve ser, Visite Rich site. Eu só vou copiar e colar tudo isso para tornar um pouco mais fácil para o Skillshare um. Para os sites do Skillshare, o href será skillshare.com. Esse é praticamente o nosso HTML, mas precisamos ver se ele está funcionando. Vamos ao nosso localizador, arraste index.html para o Google Chrome, e deve ser algo assim. Precisamos encontrar duas imagens. Simon procura por Ralph Demolidor. Vou entrar na aba de imagens. Tem um muito legal que eu gosto. Este é ele. Vou usar isto da nossa imagem de perfil. Vou ao Cartoon-Hero. Vou criar uma nova pasta para todas as minhas imagens. É ótimo armazenar seu CSS em sua pasta CSS e todas as suas imagens em sua pasta de imagem. Vou chamar isso de profile.jpg. Fantástico. Então a próxima coisa que vou fazer é procurar por uma imagem muito legal. Essa pode ser uma boa. Podemos ver se há mais alguma coisa? Sim, isso é bom. Vou apenas clicar em “Ver imagem”, e ele vai carregar. Enquanto ele está carregando, eu só vou colocar minha imagem de teste na pasta de imagens, e eu vou manter a caixa wireframe um só porque ele não é realmente parte do site, é mais de algo para se referir. Aqui, vou salvar a imagem como big-image.jpg. Fantástico. Vamos ver o que acontece agora. Temos nossa imagem de perfil, temos a imagem grande. É muito, muito grande, e esse é o nosso HTML. A partir daqui, podemos realmente começar a estilizar esta arte de uma maneira incrível. Podemos fazer um monte de coisas legais com ele. Se você quiser, abra o GitHub Desktop e sincronize seus arquivos, mas eu só vou fazer isso fora do vídeo CSS. Legal. Vejo você no próximo vídeo. 13. Vamos escrever o CSS do nosso site (a parte mais divertida): Vamos escrever um pouco de CSS. Abra sua pasta Cartoon-hero, arraste-a para o Sublime Text, e abra o arquivo de índice, bem como seu hero.css. O que precisamos fazer é estilizar o cabeçalho e seus elementos, precisamos estilizar o conteúdo e seus elementos, e precisamos estilizar o rodapé e seus elementos. Você pode alternar entre índice e herói, ou você pode copiar e colar, o que eu gosto de fazer. Eu gosto de dizer cópia, e eu gosto de colar, e então eu gosto de comentar. Um comentário é algo que o navegador não verá, e você escreve assim, o que é ótimo. Em HTML, você pode escrever um comentário com essa sintaxe, o que é muito legal. Se você quiser deixar algumas anotações como, “Ei, veja isso.” Você pode fazer isso também. Isso não chega ao navegador, e nem percebe. Gosto de comentar, e depois fazer referência a partir daqui. Meu cabeçalho. O que eu quero fazer com o meu cabeçalho. Eu quero que seja uma cor sólida, então eu vou dizer a cor de fundo, eu quero que ele seja um azul, mas eu quero que ele seja um azul especial. No Google Chrome, abrirei uma nova guia e procurarei um seletor de cores. Eu normalmente só cresci para a primeira opção e eu quero ficar azul. Esse azul parece muito bom. Vamos redimensionar o navegador. Este aqui parece bom. Vou copiá-lo. Vou colocar um haxixe na frente dele, e colá-lo. Fantástico, essa é a minha cor de fundo. Eu quero que ele seja um pouco de espaço em torno dos elementos dentro do cabeçalho, então eu vou dar-lhe um preenchimento. Vou dar-lhe um preenchimento de, digamos 40 pixels. Agora eu poderia escrever assim, enchendo direito eu poderia dar um valor. Eu poderia dizer padding-left e padding-top e padding-bottom e padding, que seja. Mas há um atalho. Se eu quiser que todos sejam iguais, eu só digo estofamento, e dou um valor. Se eu quiser fazer todos os valores que eu posso fazer em uma linha. Eu posso dizer o valor superior, eu posso então dizer o valor certo, o valor inferior e, em seguida, o valor esquerdo. Eles podem ser diferentes. Se eu quiser que o topo e o fundo sejam os mesmos, e a esquerda e a direita sejam os mesmos, eu posso literalmente escrever assim. Mas como eu quero que seja tudo igual, eu vou manter como 40 pixels. A próxima coisa que quero fazer é dizer o meu h1. Agora eu poderia escrevê-lo como todos os h1s no cabeçalho, mas eu sei que há apenas um h1 então eu vou apenas mantê-lo curto. Eu quero que o tamanho da fonte seja de cerca de 90 pixels, vamos ver como ele se parece agora, e eu quero que sua cor seja branca. Fantástico. Eu então tenho esta imagem dentro do meu cabeçalho, mas eu sei que há outra imagem. Este é o lugar onde eu vou dizer a imagem dentro do cabeçalho, e eu queria estar no meio. Eu quero dizer meu cabeçalho, vamos alinhar texto central, e isso vai alinhar meu cabeçalho e minha imagem. O que mais eu quero que minha imagem faça? Quero que seja redondo. Eu vou dar-lhe um raio de fronteira e eu vou fazer 150 pixels e vamos ver o que acontece. Se você é como, “Que se lixe. Como você sabe que era um raio de fronteira?” Bem, se você não sabe de algo, basta pesquisar no Google. É a maneira mais fácil de fazer algo. Se você Google algo como cantos redondos CSS, você vai encontrar um monte de informações. Clique em qualquer um dos links, eles são realmente úteis, eles vão explicar muito e, em seguida, apenas implementá-lo em seu site. Depois de salvarmos, acesse o Google Chrome e atualize. Parece muito bom. Você vai ver que os cantos torná-lo não completamente redondo, você também vai notar que eu dobrar em um monte de informações extras como sobre Ralph, suas características e seus amigos na parte inferior, com links. Se você não fez isso, faça isso. Agora, quero que isto seja redondo. Inspecione isso. Vamos aumentar a largura do inspetor. Você verá que ao passar o mouse sobre a imagem, ela diz que é 450 pixels por 450 pixels. Há duas maneiras de resolver isso. Eu poderia procurar um redimensionador de imagem, usar o Photoshop ou qualquer outro aplicativo de imagem. PicreSize é muito legal. Ou eu poderia simplesmente deixá-lo como está, e mudar a largura e a altura. Isso é o que eu vou fazer. Vou ver o que parece, e dizer largura. Vamos para 300 pixels, porque 300 pixels e 150 pixels combinam, pois 150 é metade de 300. Isso parece bom. Vou implementar isso no meu arquivo CSS, largura 300 pixels. Eu não preciso mudar a altura, simplesmente porque ele redimensiona automaticamente com a largura. Eu poderia mudar a altura e a largura, com auto-redimensionamento com altura. Posso distorcer as coisas e tornar as coisas desproporcionadas. Se eu definir uma largura diferente e uma altura diferente para uma imagem quadrada. A próxima coisa que quero fazer é colocar uma fronteira nele. Há algumas linhas que você precisa saber aqui, mas assim como há um atalho para o preenchimento, há um grande atalho para fronteira. Aqui eu quero dizer, eu quero que minha espessura de borda seja de 10 pixels, eu quero que o estilo de borda seja sólido, e eu quero que a cor seja uma cor vermelha. Eu vou encontrar isso. Precisa ser vermelho, e eu marquei isso, CC0000 parece bom. Se eu copiar isso, e então colá-lo aqui e salvar, vamos dar uma olhada em como ele se parece. Parece muito bom, e pode ser um pouco mais grosso então vamos ver o que parece se for um pouco mais grosso. Só estou pressionando a seta para cima. Isso parece muito bom. Vinte e quatro, mas então, minha largura, o raio da fronteira está errado. Então eu vou mudar meu raio de fronteira até que pareça bom novamente. Parece bom. O que é isso? 174. Eu só vou copiar tudo isso porque é exatamente o que eu quero. Fantástico. Então eu vou salvar. Refresque. Agora você verá que há uma borda que é diferente da largura real. Minha largura ainda é 300, mas minha borda na parte superior, inferior, esquerda e direita é 24. Em suma, minha altura e largura desta imagem é 348. A próxima coisa que quero fazer é mudar todo esse texto para algo um pouco mais super-herowy. Eu vou usar algum texto padrão, eu vou definir o HTML eo texto padrão do corpo ou font-family para Arial, e se eles não têm Arial eu vou dizer sans-serif. Se você não sabe o que é uma família de fontes, basta pesquisar no Google. Você vai encontrar um monte de informações. Vamos salvar. Volte aqui. Isso parece um pouco mais super-herowy. Parece bom. A próxima coisa que precisamos fazer é nos livrar dessa borda branca em torno de tudo, e também é um atributo HTML e corpo. Vamos mudar isso. Eu quero dizer estofamento. Às vezes pode ser estofamento. Vou definir isso para zero. Estes são os estilos padrão que vêm com um navegador. Não parece que seja estofamento, então vou adicionar margem. Vamos definir isso para zero, tirar o estofamento. Vamos guardar isso. Uau, eu não sei o que eu fiz lá. O que é isso. Nova exibição no arquivo. Uau. Vamos apenas salvar, certifique-se de fechar isso. Vamos voltar ao Google Chrome, e voilá, as pequenas lacunas brancas ao redor de toda a página desaparecem. Isso é basicamente o nosso cabeçalho, parece muito bom. Parece o Ralphie do Destruir. Agora a próxima coisa que quero fazer é fazer algumas coisas com o nosso conteúdo. Vamos remover o cabeçalho HTML e podemos nos referir de volta ao conteúdo como este agora, apenas para uma maneira diferente. Este conteúdo, há um monte de H2s, listas ordenadas, imagens e outras coisas. A primeira coisa que eu quero fazer é, abordar os elementos de conteúdo. Eu quero dar-lhe uma largura máxima apenas para que ele nem sempre abranja tanto, e eu também quero colocá-lo no meio. Posso dizer margem, zero para cima e para baixo, e também para esquerda e direita. Agora auto, torna realmente agradável, ele redimensioná-lo para você, mas apenas na esquerda e direita. Vamos salvar isso. Vamos ver o que acontece. Vamos fechar isto. As coisas parecem um pouco estranhas, não é? O que é realmente legal é quando isso acontece, podemos inspecionar e dizer ir para o nosso conteúdo, e digamos, largura máxima. Vamos mudar para 400 por enquanto. Vamos dar uma cor de fundo de, uau, seda de milho, que parece bom. Vamos, coral. Coral parece bom. Você pode ver que essa é a largura máxima. Se eu aumentar isso, você verá que há um espaço igual à direita e à esquerda. Mas agora esta imagem está fazendo coisas loucas. O que eu quero fazer aqui, é definir a imagem big-image, .big-image, e eu quero dizer que a largura máxima é 100%. Não vou ceder um valor absoluto. Vamos ver o que acontece aqui. Não quero comprar ainda. Obrigado. Refresque. Você vai começar a ver que, hey, ele está realmente sentado em uma porcentagem. Se você redimensionar seu navegador, ele realmente o dimensiona para você, o que é ótimo para dispositivos móveis. A próxima coisa que eu quero fazer é no conteúdo que eu quero colocar um pouco de preenchimento apenas para que ele não está sempre tocando a esquerda e a direita. Então eu quero dizer que o preenchimento é zero e 20 pixels. Quando eu salvar isso, eu posso então ver que há um pouco de espaço em branco à esquerda e espaço em branco à direita. Mas não para a minha cabeça. O cabeçalho parece perfeito. A próxima coisa a fazer é esta legenda. O que eu gostaria de fazer aqui é abordá-lo, e eu quero fazer o tamanho da fonte em torno de 16 pixels. Quero a cor da fonte. Então vamos fazer a cor ser cinzento claro. Então eu também quero que o estilo da fonte seja itálico para que realmente se pareça com uma legenda. Vamos guardar isto e ver como é. Este é o Ralph em ação. Isso é fantástico. A próxima coisa que quero fazer é deixar isto um pouco mais agradável. Então meu ul, eu não quero esses discos, então eu vou dizer estilo lista, nenhum e eu também vou dar-lhe um preenchimento de zero e uma margem de zero. Vamos ver o que acontece. Fantástico. Mas você vai ver que o ul eo rodapé também tem que mudar quando eu fiz isso. Mas está tudo bem. Então Jake de Adventure Time, Bloo de Fosters, Arthur dos desastres do Rei Arthur. Mas esses links parecem um pouco estranhos, então deixe-me mudar os links também. Todos os links, eu realmente quero que a cor seja vermelha porque essa é a cor do Ralph Wreck-it, e eu não quero que eles tenham um sublinhado. Então eu quero dizer text-decoração, nenhuma. Vamos guardar isto e ver como é. Fantástico. A próxima coisa a fazer é o nosso rodapé. Vamos mudar um pouco o rodapé. Quero que seja muito, muito cinzento claro com algum preenchimento. Digamos que o preenchimento que eu ia definir para 40 pixels e 20 pixels. Agora não parece muito um rodapé na parte inferior, mas lembre-se, é apenas um guia. Rodapé na parte inferior, digamos que eu quero uma cor de fundo. Agora, bem, qual deve ser a cor de fundo? Vamos escolher uma cor de novo. Eu realmente gostaria de um preto, mas eu vou torná-lo uma cor muito clara preto. Então vamos tentar esta cor. Vamos copiar isto e colocar um hash aqui e colá-lo. Vamos ver o que parece. Isso parece muito bom, mas ainda é bastante apertado para o resto do conteúdo. Então o que eu gostaria de fazer é que eu gostaria apenas de definir uma margem, com apenas uma margem superior de cerca de 20 pixels. Então eu também gostaria de mudar o seu ul dentro um pouco. O que eu gostaria de fazer aqui é o ul text-align, center. Então vamos tomar o centro. Mas então eu também gostaria de dizer que todos os li dentro do ul, mas dentro do rodapé apenas, Eu gostaria de exibir como inline. Agora, no momento, ele está sendo exibido como um bloco. Posso mostrar-lhe isso aqui. Se eu tiver que inspecionar este elemento, você pode ver que na verdade é um bloco inteiro. Você pode ver pela cor de destaque azul. Agora estou mudando a tela para inline. Estou dizendo que o li está dentro do ul, dentro do rodapé como inline. Vamos ver o que isso faz. Refresque. Feito por Rich Made durante uma classe Skillshare copyright 2015. Mas está um pouco cheio, então o que eu vou fazer é mudar isso para um bloco inline, que significa que eu posso aplicar a margem a ele. Então margem, topo, zero, e esquerda e direita, eu vou dizer cinco pixels. Eu vou salvar, refrescar aqui, e isso parece muito bom. Isto, por outro lado, está no meio. Eu não quero que isso seja no meio, então eu vou apenas colocar o rodapé ul e apenas torná-lo text-align, centro para o ul e o rodapé, e atualizar aqui. Esse é o nosso site. Agora, compartilhe. Seja selvagem, faça o que quiser, estilize como quiser, e depois compartilhe. Eu acho que a coisa mais poderosa sobre a web é que você pode compartilhá-la. Você pode compartilhar informações. Este caminho é praticamente gratuito. Agora o que vou fazer é mostrar-lhes algumas maneiras diferentes de estilizá-lo. Mesmo HTML, apenas CSS diferente. Podemos colocar um pouco de imagens lá, mas é basicamente isso. Depois de criar seu site, uma vez que você está feliz com ele, bem, quando você está feliz em compartilhar algo dele, vá para o seu aplicativo GitHub desktop e certifique-se de que você está na ramificação gh-pages, e então vamos comprometer nosso arquivos dizendo, First commits para a nossa página de personagem ou sites. Comprometa, sincronize. Lembre-se do que temos que fazer agora, quando terminar a sincronização, temos que ir github.com. No github.com, temos que estar em herói, temos que ir para a seção de commit, temos que ter certeza de que estamos na ramificação gh-pages. Arquivos HTML são escritos. Vamos ver o que o GitHub está fazendo. Ainda está sincronizando. Está a demorar muito tempo. Eu me pergunto se é porque nós temos algumas grandes imagens lá. Ok, lá vamos nós. Está sincronizado, vamos voltar para github.com. Vamos atualizar, e você verá First commit para nossa página de personagem. Aqui vamos nós. Agora o que queremos fazer é entrar em mrra-screencast.github.io. Obviamente, use seu nome de usuário do GitHub. Vá para o herói dos desenhos animados, pressione Enter. Você verá que não há index.HTML e isso é porque ele está pegando esse index.HTML como seu primeiro arquivo a ser obtido. Esse é o seu site. Você pode lê-lo em seu telefone celular, você pode compartilhá-lo com seus amigos. Parece muito bom. Lá vamos nós. uma dança, tome um chá, dê palmada nas costas e diga à sua mãe que acabou de fazer seu primeiro site e você pode compartilhá-lo. 14. Ah! Como o CSS é versátil!: Ok, então você pode ver que foi aqui que paramos. Tínhamos um site de personagens muito bonito. Agora o que eu fiz foi escrever mais duas folhas de estilo. Um é chamado hero-alt-1, e o outro era chamado hero-alt-2. Então, apenas mudando as folhas de estilo, vamos economizar. Você pode ver o que acontece, eu não mudei nenhum HTML. Você verá que há um fundo de azulejos. Isto é feito definindo uma imagem de fundo esta é uma sintaxe especial para subir uma pasta. Então, de tudo que eu vou aqui, eu vou um CSS, ele sobe uma pasta e, em seguida, ele vai e olha na pasta imagem para a imagem pixel 100 JPEG. Então eu vou definir um fundo repete sobre repetições. Então eu tenho algo parecido com isso. Você também notará uma sombra tecnológica. Então, se eu inspecionar isso e eu apenas tirar a imagem de fundo, você vai notar que há uma sombra no texto e uma sombra na própria imagem. Isso é feito por duas coisas diferentes. O h1 tem uma sombra tecnológica, e este é o valor x, este é o valor y, e esta é a quantidade de desfoque. Então a cor da sombra. vez, há uma sombra de caixa na imagem de cabeçalho. Seu valor x, o valor y a quantidade de desfoque e a cor. Então essa é a parte superior. Mudei algumas cores. Enviei uma mensagem, tirei números, e mudei a foto e um pouco. Então essa é uma versão. Outra versão, eu só vou mudá-lo para dois e salvá-lo. Vamos ver o que acontece agora. Uau. Então é realmente vermelho. Sim, muito vermelho. É muito plano. É uma imagem quadrada. Não há sombras. Os Aliados têm fronteiras em torno deles, e todos eles arredondaram caixas. Legendas alteradas. O que são estes? Bem, estes são links, e eles têm uma cor de fundo, e eles também têm uma configuração de focagem aplicada a eles. Então, em hero-alt-2 para, vou mostrar-lhe nas etiquetas A. Tem uma cor de fundo. Então, quando eles passam o mouse, e isso é chamado de pseudo-classe, o fundo muda a cor. É assim que fico com essa cor mais escura quando estou pairando sobre um link. Apenas mudando CSS e absolutamente nenhum HTML, eu sou capaz de criar três páginas totalmente diferentes? Então esse é o poder do CSS. Você pode mudar radicalmente a aparência e a sensação de seus sites apenas por algumas linhas de código e alterando seus arquivos CSS. 15. Valeu! Veja os próximos passos: É o fim dos projetos. Eu realmente espero que você tenha se divertido porque isso é a coisa mais importante. A próxima coisa que eu realmente espero que você tenha feito é aprender muito. Nós cobrimos HTML, cobrimos CSS, cobrimos como eles se relacionam uns com os outros. Começamos a usar o Sublime Text. Começamos a usar o GitHub. Usamos o Google Chrome e começamos a inspecionar elementos. Há muito mais em todos esses tópicos. Se você gostou, aprenda um pouco mais todos os dias, escreva HTML e CSS todos os dias, mesmo que seja apenas duas linhas. Ajudará seu cérebro a se manter fresco, mas o mais importante, compartilhar seus projetos com outras pessoas. Então, em uma galeria de projeto, poste links, responda perguntas, faça perguntas e lembre-se de que o Google é seu amigo. A web é construída por pessoas que escrevem HTML e CSS. Toda a web é levantada em HTML e CSS. Esses são seus primeiros portos de escala, caso contrário, pergunte a um humano de verdade. Legal, espero que tenha se divertido. Eu me diverti fazendo isso. Procure mais alguns vídeos.