Artesanato de um site de estilo de 8 bits

1. Intuição: Olá e bem-vindo a projetar uma página da Web de oito bits comigo. O Caleb. Colleen, vou mostrar-te na próxima hora. Como criar um site de oito bits como este com um sistema de grade personalizado usando uma biblioteca de oito bits. Então tudo parece muito legal. Retro. Desta forma. Eu vou criar um site tipo currículo, mas você pode querer criar um site baseado em hobby ou um site baseado em portfólio. De qualquer forma, você pode adotar tudo neste curso de acordo com suas necessidades. Então, se esta página parece muito excitante para você, venha participar. Eu adoraria mostrar exatamente como eu fiz isso, e vamos começar no próximo vídeo. 2. Instalando 8 bits: Tudo bem. Ei, obrigado por se juntar a mim aqui. Vamos começar a criar esta página a partir do zero. Então a primeira coisa que temos a ver com qualquer projeto baseado em desenvolvimento Web é que precisamos abrir nosso editor. Então eu estou usando um editor chamado V S Code. É completamente grátis. Mas se você estiver usando um editor diferente, você também pode usar algo como Adam ou texto sublime. Ou, você sabe, se o seu pouco mais velho escola sem almofada mais mesmo Dreamweaver é legal novamente, isso realmente não importa. Brackets é outro popular para isso. Vou usar o código V agora. Primeiramente, precisamos do nosso modelo HTML, mas precisamos salvar esse arquivo primeiro. Então eu vou apenas criar um novo arquivo e salvar isso como um pit dot verdadeiro Nazi SS start HTML. Queremos um arquivo HTML, e eu estou simplesmente indo para criar um novo código HTML cinco Template V s vem com um pequeno atalho agradável . Ele me permite digitar html Colin cinco guia hit, e ele sente todas essas coisas para mim. Vou chamar esse currículo do Caleb de algo assim. Não importa o que lhe chamamos. Ele vem com algum conteúdo móvel automático primeiro, então basicamente, isso funcionará em seu dispositivo móvel. Isso é muito bom. Então vamos em frente e abrir este arquivo em nosso navegador. Só estou usando o Firefox. Você pode usar o Chrome é um ardente Qualquer coisa que você gosta, e vemos uma página básica chata. Não há nada digno de nota aqui, então precisamos instalar o CSS de ponto ninho. Então vamos em frente e Google ninho CSS e isso vai nos trazer aqui. Esta é a página que queremos. Queremos clicar no Leia-me para que possamos ver como o instalamos. Exactamente. Google arrefecer todas as coisas. Aqui está o que queremos. Queremos o mais recente. Então é uma cópia que Coloque isso dentro de nossa cabeça e apenas como um exemplo, vamos em frente e vamos em frente e, ah, vamos apenas copiar um pouco desse código para que possamos ver que ele está realmente funcionando. O que faz algo realmente perceptível aqui? Botões, botões ou perceptíveis? Então vamos em frente. Copiei tudo isso, e eu ia colar isto no meu corpo aqui. Refresque minha página e ha ha! Olhe para isso. Temos alguns oito bits styling já, Então, dentro de apenas alguns minutos, nosso site já está começando a olhar muito oito bits. Isso é muito legal, mas não é exatamente o que procurávamos. Então vá em frente e certifique-se de que você tem ninho dot CSS instalado. Eu só estou usando a versão masculina das últimas versões que nós temos as últimas atualizações assim que você tiver instalado cabeça sobre sobre o próximo vídeo e nós vamos criar na barra de navegação. 3. Barra de navegação: Tudo bem, bem-vindo de volta. Na última lição, adicionamos um monte de botões para garantir que nosso estilo estava funcionando a partir de ninho CSS ponto. Agora precisamos criar uma nova navegação. Então, esse é o tipo. Agora vamos dar um pouco de estilo básico aqui, então isso é apenas na linha. CSS. Isso é meio feio, mas também podemos mudar isso para algo um pouco mais manejável um pouco mais tarde. Vamos fazer uma borda inferior três pixels. Sólido C C C e vamos fazer uma margem inferior de eu não sei, 60 picaretas ou algo assim. Vamos salvar isso e atualizar nossa página, e temos uma NAFO chata. Mas olhe para isso. Nós também temos um pequeno cursor agradável lá que parece muito legal. Vamos em frente e adicionar o nome do site aqui, então ele está criando H dois elementos. E vamos chamar isso de Caleb Holley, e você chamaria de qualquer que seja o seu nome ou seja lá o que for, você realmente quer chamá-lo de meu. Só vai ser um pouco de um currículo procurando site, e então isso não parece que ele está realmente fazendo alguma coisa, e nós realmente queremos aquela fonte ninho. Então, como vamos conseguir aquela fonte do ninho? Bem, se entrarmos no “Leia-me “de novo, diz-nos exactamente o que precisamos para diligir. Vamos em frente e agarrar esta linha aqui. E isso simplesmente vai instalar o desejado formado a partir do Google Funds. Então, aperte Save head para a nossa página do currículo. Olhe para isso. Está tudo bem agora, não está? Agora, se entrarmos aqui, também temos alguns ícones. Procurei ícones e encontrei o que procurava. Mas digamos que eu queria a moeda. Eu inspecionaria elemento. E este é o HTML que eu quero com essa classe. Talvez não as grandes classes, mas este é o que eu quero. Então vamos em frente e adicionar isso no cabeçalho aqui. Classe DIV. Vamos às aulas lá dentro e isso não é suposto ser um mergulho que deveria estar dentro. Coloquei isso em linhas separadas. Isso se torna um pouco mais legível. Salve e atualize. Vamos dar uma olhada em como uma página se parece agora. Certo, temos uma moeda enorme. É muito grande. Ah, nós também temos é médio. Ainda é muito grande. Nós temos é pequeno muito pequeno, e então nós apenas temos Coin padrão. Esse é o que queremos. Bem ali. Agora, neste momento, nós meio que queremos centralizar isso, mas nós realmente não temos uma maneira de centralizar isso. Então, no próximo vídeo, vamos adicionar um sistema de grade. 4. Como adicionar uma grade: Certo, precisamos instalar um sistema de grade. Então vamos em frente e pule na máquina do Google e digite a grade de caixa flexível e isso vai nos dar. Basicamente, você pode ver se você está familiarizado com Bootstrap. Ele nos dá bootstrap como colunas, e tudo o que temos a fazer é adicionar um pouco de CSS. Desejamos fazer o download? Não. Vamos buscar o Hub. Vamos ver o que a leitura de mim tem para nós aqui. Temos um CDN, umarede de distribuição de conteúdo. Temos um CDN, uma Este é o que queremos. Vamos em frente e copiar tudo isso. Vamos jogar isso na cabeça da nossa página também. Vamos fazer isso um pouco menor e eu mexo isso um pouco mais. E então agora temos ninho fora CSS. Temos os nossos forints lá dentro e temos um sistema de grelha simples. Agora. O que este sistema de grade nos permite fazer é que se eu apenas clicar de volta aqui, podemos criar pequenas colunas como esta. Podemos criar até 12 colunas e podemos dizer-lhes que ordem eles precisam estar em quão largo eles precisam estar lá automaticamente responsivo, que é muito bom. Então, se você está interessado em uma queda na grade caixa flexível substituição grade é incrível. Por que o modo como você pode aninhar também? Essa é uma grande. Vamos trabalhar um pouco conosco, então se não estiver familiarizado com isso,tudo bem. então se não estiver familiarizado com isso, Você sempre pode ir para caixa flexível grid dot com. Vamos atualizar sua página. Vemos que nada aconteceu. Então, se abrirmos o código visual do estúdio e apenas dentro do nosso valete aqui nós adicionamos um contêiner elementos. Então isso é apenas uma div, e isso simplesmente vai adicionar algum preenchimento para nós ou realmente apenas enviar-lhe um conteúdo da maneira que queremos. Então é refrescante. E lá vamos nós. Nosso conteúdo está centrado. Então isso é adicionar grade de caixa flexível 5. Balão de boas-vindas de 8 bits: Tudo bem, vamos em frente e adicionar um pouco introdutório. Uma pequena foto minha com uma bolha dizendo oi. Meu nome é Caleb alguma coisa, alguma coisa. Alguma coisa. Então vamos criar a primeira audição que vimos originalmente. E, de fato, é assim que o site final vai se parecer. Então nós queremos criar esta seção aqui com os rostinhos dizendo oi, eu sou Caleb. Isto é tudo sobre mim com o coraçãozinho. Emoji, vamos em frente e criar isso agora. Então, se abrirmos nosso código e abaixo do nosso agora vamos querer criar um novo contêiner, Isso vai manter todo o nosso conteúdo contido na formatação central. Então, se olharmos como tudo está alinhado à esquerda e tudo está alinhado à direita , esse será o nosso contêiner. Então agora precisamos adicionar uma nova linha. Isto é da nossa grelha de caixa flexível. Esta é a queda na substituição da grade. Vamos adicionar uma coluna aqui. Vamos adicionar mais um. Chame ele aqui. Digamos que este vai chamá-lo de “O Escalão”. Um pequeno espaço de nove. Ah, e talvez uma coluna com uma extensão extra pequena de 12. E vamos dar uma olhada no que isso parece esquerda direita, e vamos fazer uma prévia aqui, esquerda e direita. Então, você sabe, não é grande coisa aqui. Podemos ver que temos um bom Funt acontecendo, mas não está fazendo nada que precisamos. Então agora precisamos encontrar um ícone aqui. Não é realmente um ícone. Acho que isso aconteceu, esse cara aqui, vamos inspecioná-lo, e nós podemos realmente olhar para o código-fonte aqui, e nós podemos apenas pegar isso. Isso é o que precisamos bem ali. Vamos em frente e apenas adicionar isso lá e atualizar nossa página oficial um em que estamos trabalhando e temos um cara pequeno, então isso é muito legal. E então precisamos de um balão aqui e queremos basicamente isso. Então vamos em frente e copiar essas linhas vestidas. Coloque isso na seção certa, e isso vai dizer olá, Nesta no CSS. Isso é muito legal. Olhe para isso. Estamos chegando a algum lugar, mas na verdade queríamos dizer oi, estou morto. Isto é tudo sobre mim. Então vamos em frente e adicionar isso. Digamos que sou o Caleb. Isto é tudo sobre mim. Mas precisamos do ícone do coração. Onde está o ícone do coração? Então eu sei que está aqui em algum lugar. Nós podemos apenas clicar com o botão direito, inspecionar ou , você sabe, nós apenas entrar aqui, pegar este ícone do coração Pace Esse ícone duro lá dentro, este não é grande, eu acho, na verdade querer é pequeno. Isto vai ter que ser muito pequeno olhando para corresponder ao seu tamanho de fonte aqui. Então ha! Lá está ele exatamente assim. Torna-nos um passo maior também. E é assim que pegamos esse cara de topo aqui, essa bolha. E não se esqueça, você pode atualizar seu projeto de compartilhamento de habilidades com seu progresso atual. Mostre-me como está indo. Eu adoraria ver o seu progresso e ajudá-lo se você ficar preso em qualquer lugar 6. Layout de duas colunas: Tudo bem. Em seguida, precisamos criar um sistema de duas colunas. Temos nossas colunas da esquerda aqui e então temos nossa coluna da direita aqui. Então, na coluna da esquerda, temos coisas a fazer. Saiba onde estes meus sociais e coluna direita Temos frente e conhecimento de volta e conhecimento, construir ferramentas e experiência anterior. Vamos em frente e configurar nosso layout primeiro. Então, para isso, só queremos abrir nosso arquivo. Vamos em frente e criar um novo contêiner novamente, porque não? E aqui precisamos criar uma nova linha. Porque se olharmos para tudo isto aqui, esta é uma linha a atravessar, e acontece. Tem duas colunas. Então vamos criar uma linha com duas colunas no ano. Isso é Ah, vamos fazer desta primeira coluna um meio de quatro e talvez um tamanho de coluna quando é pequeno, é 12 e coluna extra. Pequeno também vai ser 12. E só para você saber, tudo que eu fiz foi digitar o seletor CSS e o código invejoso. Eu poderia apenas apertar Tab dentro e automaticamente preenchê-lo para mim com um diff, então isso é muito legal é um atalho lá, e então aqui nós precisamos fazer basicamente o oposto. Precisamos da coluna média oito. Então queremos fazer um intervalo de oito para um total de 12. Então são quatro aqui, oito anos para um total de 12. Esse é o tamanho do nosso sistema de rede. Há 12 colunas em nosso sistema de grade e aqui também queremos fazer legal como eles 12 Carvão excesso 12. Traço 12. Isso é uma direita, e isso vai dizer esquerda. Vamos ver nossa página. Lá vamos nós. Temos esquerda e direita. 7. Seção de 8 bits: Tudo bem, queremos adicionar uma pequena seção aqui que diz coisas que eu faço. E para você, isso pode ser diferente. Então, para mim, eu sou um desenvolvedor web, web designer e um professor para você. Você pode ser estritamente, ah, web designer. Ou talvez você seja um maquinista manual, e você apenas gosta de oito bits de estilo. Seja o que for, você pode colocar o conteúdo do jeito que quiser. Vou fazer o meu próprio currículo. Mas, você sabe, Taylor, seu dedo do pé para você, do jeito que você queria aparecer. Então você faz você Vamos em frente e adicionar que não. Então, em sua seção esquerda aqui, eu vou me livrar da palavra esquerda, e eu quero adicionar um recipiente ness com o título. Isto é muito foram principalmente nome. Então este é realmente bom h três. Vamos também dizer que é um título e dizer coisas que eu dio eu só gosto de ver tipo de onde eu conheci. Então eu faço esses pequenos incrementos e atualizo minha página. Então diz coisas que eu faço. Vamos trabalhar no espaçamento e tudo isso um pouco mais tarde. Agora vai parecer um pouco apertado, mas vamos espaçar no final. Então temos um título aqui. Coisas que eu faço. Vamos em frente e criar um novo Devyn aqui, apenas como um contêiner, eu suponho, e está criando uma nova lista. E então nós vamos dizer que isso é, uh, listas. E então vamos dar-lhe uma lista de ninhos e o tipo de círculo é, e de onde eu estou obtendo isso é, se eu apenas voltar para a documentação aqui, nós temos uma lista em algum lugar aqui. Onde estão as listas? Aí estão as listas, e assim as aulas. Listas sobre A UL aqui lista ninho é disco e, em seguida, apenas aliados regulares, e você pode realmente ver que eu cometi um erro aqui. Que esses são supostamente UL não é dibs. E vamos em frente e criar um aliado regular. Então, vou dizer o meu primeiro ponto, sou um desenvolvedor da Web. Outro item da lista de Aliados. Também sou um Web designer. Vamos criar outro aliado. Eu também sou um professor. Volte para nossa página e atualize isso. Não saiu do jeito que esperávamos. Algo está errado aqui. E isso só significa que eu tenho um tipo de algum lugar é círculo. Essa é a única mesinha ali. Bater. Refresque. Lá vamos nós. Temos pequenos círculos. 8. Seção de 8 bits escuros e ícones: Tudo bem, Next, vamos em frente e criar. Digno de nota está aqui. Este vai ser escuro e tem um pouco mais de coisas aqui. Então vamos em frente e mudar o estilo. Então, em vez de usar um bloco branco, vamos usar um bloco negro, e nós só queremos que isso fique bem sob as coisas que eu faço. Então ainda estamos na coluna da esquerda aqui. O que vou fazer é desmoronar isto aqui e vou criar outro contentor de ninho com títulos. Este é apenas CSS é escuro hit Tab Auto sente por mim. Isso é muito legal. Vamos em frente e nos dê um título. Então H três pontos título e dizer No Worthy Hey, olha para isso. Então nós temos uma seção negra novamente. O espaçamento e aqui realmente não parece muito bom, mas nós vamos corrigir isso no final, ir em frente e criar outro contêiner apenas por causa das coisas que estão subindo contêiner. Agora eu quero criar ah pequeno ícone aqui, então é o ícone do eu ness. Dot é pequeno porque eu quero um pequeno e eu queria ser um coração, e eu sou uma maneira dizer membro do núcleo do CMS Wait tell é o sistema de gerenciamento de conteúdo mais popular e usado do Python , e eu estou realmente na equipe do tribunal, Então isso é muito legal. Um pouco digno de nota, eu acho. Ah, e se eu quisesse outro aqui, eu poderia fazer outro div. Eu recebo, digamos, dê-me um elemento I. Também vai ser um ícone de ninho. Vai ser, vai ser pequeno e eu quero que isso seja uma estrela e vamos apenas dizer 250 mil estudantes em todo o mundo algo assim. Então estes são pouco dignos de nota é sobre mim, na verdade não quero que dentro do olho que eu elemento é por si só. Atualização da página Boom. 250.000 alunos foram toe membro CMS com bons ícones pouco oito bits 9. Ícones sociais de 8 bits: Tudo bem. A próxima seção é o meu social. Vamos em frente e criar pequenos ícones sociais. E a propósito, se eu for um pouco rápido para você, não se esqueça. Você sempre pode referenciar caixa flexível ponto com ou nostálgico Dashti avaliar ponto obter hub dot io barra ninho ponto CSS. Eu honestamente só Google este ano porque esse é um pouco difícil de lembrar, e está tudo disponível para nós aqui. Então vamos criar uma pequena seção de links sociais onde as pessoas podem ir e eu acho, procurar-me. Então o que vou fazer é fechar isso. Isso é OK. Recipiente Div Ness. Ele também tem um título. Vamos dar a este título um título três pontos guia hit, e ele apenas cria o elemento inteiro para mim. Chame isso de meus socials. Então aqui eu vou criar outro contêiner apenas para criar esse contêiner. Não faz mal ter aquela camada extra lá dentro, e eu vou apenas criar um link. Não vai dar em nenhum lugar em particular agora. Eu só quero que isso demonstre seu desejo que este seja um link que irá demonstrar que eu tenho uma Nikon aqui. Então ícone Ness Twitter, Tweeter. Lá vamos nós. Refresque um bam! Há o Twitter e podemos fazer isto uma e outra vez e outra vez. Então eu copiei e colei isso quatro vezes. E se eu quiser um Facebook aqui, então vamos mudar isso para Facebook. Este vai ser o meu hub, e este vai ser o YouTube. Vamos em frente e atualizar os ícones deles. Agora, se você está procurando outros ícones, há uma tonelada de ícones aqui. Onde você está? Mas a colisão de, uh, aqui estão os ícones do site de redes sociais. Então nós temos Twitter, Facebook, insta obter hub Google Gmail, Lincoln médio, todos os tipos de outros lá dentro. Então você pode usar todos estes e novamente se você não tem certeza do que eles são chamados você basta abrir esse código-fonte clicando neste botão e apenas visualizando o que você deseja uma cópia e colar contorno e ele vai funcionar exatamente para você. E agora temos sociais 10. A coluna direita: Certo, agora precisamos trabalhar na coluna da direita. Então primeiro 1 que temos aqui é frente e conhecimento, volta e conhecimento construir ferramentas do que experiência anterior. Vamos em frente e criar um de cada vez. Então seu criador, frente e conhecimento para você, isso poderia ser totalmente diferente também. Isto pode não estar à frente do conhecimento. Este pode ser apenas o seu jogo de tabuleiro favorito, uma lista de membros da família ou qualquer coisa que você gosta. Mas o que eu criei aqui é que eu tenho uma habilidade particular e como eu sou bom nessa habilidade. Então html cinco, eu sou como 95% bom em html cinco. Acho que CSS três. Acho que sou 90% bom. Um CSS três JavaScript. Talvez eu não seja um JavaScript muito bom. Então nós temos essas barras de saúde aqui para nos dizer o quão bom eu sou em uma habilidade particular. Vamos apenas ir em frente e criar a primeira seção de frente e conhecimento. E novamente, isso é totalmente com você. Vou desmoronar esta secção. Isso é totalmente com você. Como você deseja projetar isso com um conteúdo que você gosta. Então, as primeiras coisas primeiro precisamos de um recipiente ness com título, poderíamos ir em frente dada idade três de frente título e conhecimento. Apenas coisas que eu sou, você sabe , ok, e aqui nós precisamos usar mais do nosso sistema de grade. Vamos em frente e criar uma nova linha. E nesta linha precisamos de duas colunas que precisamos. Chame pequenos quatro, apenas quatro colunas para a esquerda e digamos que quando ele está em extra pequeno gasto todo o caminho através da coluna de sopa, extra pequeno 12 ia ocupar toda a largura. E sabes que mais? Vamos colocar isso em uma linha, porque eu acho que nós podemos escapar com esse html e então apenas cinco chamadas sm, então nós temos que fazer o oposto. 12 menos quatro é oito excesso legal 12. E aqui queremos criar uma barra de progresso, então o ponto de progresso do ninho do progresso do ponto é o sucesso. Vou te mostrar onde estou pegando isso em apenas um segundo e aqui vamos colocar isso em linhas separadas, bem como para que possamos ler isso. Estamos autorizados a ter todo este espaço em branco poderia muito bem usá-lo. O valor é igual a 95 e o máximo será 100. Vamos em frente e ver como isso se parece. Põe isso em mais uma linha. Justiça que parece feia. Lindo. Atualizar minha página HTML cinco não barras. Um pouco grande. Vamos mudar isso um pouco mais tarde. E agora tudo o que vou fazer é pegar esta fila inteira e vou copiá-la mais duas vezes . Então, há um. E há também. E eu quero que o 1º 1 não seja html. Eu quero que este seja CSS três. O progresso vai ser 90. É sucesso. Sim, acho que sou muito bom nisso. Digamos que este vai ser JavaScript, e este vai ser um aviso. Vou te mostrar onde consigo esse estilo em um segundo. Isso é que eu sou apenas 60% obter um JavaScript. Na verdade, isso é muito errado. Eu sou muito bom em JavaScript. Mas, você sabe, para fins de demonstração, é bom ter um pouco de barra amarela. E lá vamos nós. Simplesmente assim. Agora, onde estou tirando esses estilos é o progresso. Progresso, progresso. Onde está o progresso? Progresso da barra, progresso, progresso. Temos alguns deles que podemos escolher a partir daqui. Vamos apenas alternar que eso temos progresso ninho. Esse é o preto é primário é azul é sucessos. Verde está avisando que seu amarelo é erro. Esse é o nosso vermelho e é padrão porque às vezes você só quer um Mario kart como padrão . Então essa é a nossa frente e conhecimento. Eu vou consertar esse tipo de lá e depois vamos para a próxima lição. 11. Grande seção de 8 bits escuros: Tudo bem, vamos em frente e criar de volta no conhecimento. Temos uma seção preta aqui, então isso tem que estar escuro. Caleb, onde está ficando escuro? Sim, é uma ótima pergunta. Em qualquer lugar que você veja uma seção escura aqui, podemos apenas habilitar que estava escuro aqui. Há uma seção escura aqui para que pudéssemos ver o código-fonte. Ah, nós também podemos dar uma olhada nos contêineres que temos. O contêiner está centralizado. Se quisermos enviar o título dela, não vamos fazer isso é escuro. Apenas faz um fundo escuro com uma borda branca. Podemos sempre olhar para o código-fonte para, e este é o que queremos aqui. Então, vou copiar essa cabeça para o código visual do estúdio, e vou entrar em colapso este segundo inteiro. Estou trabalhando só para fazer meu código parecer um pouco mais legal. Vamos criar um novo Devyn aqui. Este também vai ter um título. Este título vai ser conhecimento de back-end. E lá vamos nós. Temos conhecimento de back-end. E novamente, isso é Basin vai consertar perto do final deste curso eso próximo. Precisamos criar basicamente essas três seções novamente. Mas desta vez queremos colocar Python PHP e nenhum Js. Então o que eu vou fazer aqui é ir em frente e novamente, apenas criar uma nova linha. Isto é da nossa queda na substituição de grade chamada grade de caixa flexível. Que legal sm quatro. Este é exatamente o mesmo que fizemos na frente e um acesso legal 12. Este vai ser Python 3. E em vez de escrever isto uma e outra vez, o que vou fazer é simplesmente copiar um pequeno aviso. Quando se trata de copiar e colar, Não se esqueça quando você copiar e colar coisas, você tem que mudar todos os valores e suas Às vezes esquecemos de fazer isso acontece com todos nós. Só não se esqueça de mudar seus valores. Este, eu acho, é bom, no entanto, então vamos em frente e refrescar são demonstração de trabalho real aqui. E olha para isso. Temos Python três agora. Vou pôr isto numa linha só mais uma vez. Agora eu só coloco todos em uma linha porque eu quero ir em frente e criar outra linha tentando criar mais duas linhas Então cole mais um lá dentro, passeado mais um lá dentro. Corrigir a terrível invenção do código V s. Não faço ideia por que faz isso. Vamos em frente e digite enorme p sete e eu sou muito bom com PHP. Então é um 90 o outro vai ser nó Js node.js. Honestamente, não sou muito bom sem jazz e não quero que isso diga sucesso. Quero que isto seja um erro. Isso mostra que eu não sou bom nisso. E então nós temos um pequeno bar vermelho aqui que diz que eu não sou bom com jazz. A saúde de nenhum Js é muito baixa. 12. Parte grande de luz 8 bits: Tudo bem. Por fim, temos nossas ferramentas de construção. Este vai ser super fácil e basicamente vai copiar sobre a frente e conhecimento e mudar alguns dos valores. Então vamos para o código V S, e eu tenho está atualmente colapsado. Alguns vão selecionar tudo isso. Copie-o, cole lá dentro. E agora podemos ver que temos uma seção de seção escura, e esta vai ser ferramentas de construção, ferramentas construção. Vamos em frente e adicionar embalagem Web aqui. Em que está o meu Web pack? Vou dizer que o Web Pack não tem 50. Está a 60%. Ah, e é amarelo. Vamos em frente e adicionar o ponto do pacote Js. Este também vai ser amarelo, então vamos fazer disso um aviso. Este vai ser aos 50 e depois temos gole, que não usei há muito tempo. Então este vai ser um erro, e isso só significa que a barra vai ser lida e digamos que está em 30%. Vamos atualizar nossa página de trabalho. Lá vamos nós. Temos ferramentas aqui, ferramentas de construção de pacotes da Web. Holandês. Sim, e gole. E lembre-se, você pode simplesmente ir para a documentação e em qualquer momento, eu sinto que eu enquanto eu não quero usar é erro para o vermelho. Eu queria ser modelado. Você pode usar o padrão dele ou você poderia apenas usar nenhum deles. Então, basta aninhar o progresso para predefinição para preto, o que funciona para você. Lembra-se de você, não é? 13. Seção de perfil de 8 bits: Tudo bem. Por último, temos experiência anterior. Esta é uma seção maior, então vamos em frente e começar a rolar sobre isso. Não tenho nomes de negócios aqui. Você pode querer usar seus nomes de negócios reais. Se você estiver criando um currículo ou se estiver criando um portfólio, isso pode ser links para projetos que você tem no hub Get ou seus sites ou qualquer coisa assim. Então eu vou rolar até aqui e derrubar isso também, porque nós não precisamos disso. E vamos em frente e criar Ah, novo título de tópico. Então, título do tópico. E então aqui queremos i dot ness ícone dot estrela e vamos chamar essa experiência anterior quando atualizarmos nossa página Ha. Experiência anterior irá corrigir o espaçamento em apenas um momento. Estamos chegando muito perto disso. E onde consegui esse título foi um pouco mais complicado de descobrir. O que eu tinha que fazer era descer aqui e eu apenas clique direito inspecionar elemento, e quando eu passar o mouse sobre isso, você pode ver que eu tenho toda a equipe principal e eu tenho um título de tópico aqui. E então tudo o que eu realmente fiz foi apenas levar aquela classe aquele título de H três tópicos. Você tem um ícone aqui e um texto normal, então eu fiz a mesma coisa. Em seguida, precisamos de um novo contêineres. Vamos criar um contêiner de ninho DIV que é escuro. Queremos uma das trevas. Não queremos que isto tenha um título. Todos estes outros têm com título. Não este. Este já tem um título fora dele chamado Topic Title. Agora precisamos adicionar em nosso sistema de fileiras novamente. Alguns vão adicionar uma div chamada Roe. Precisamos adicionar uma coluna em anos. Um acesso de carvão para eu nunca quero que isso desmorone. É por isso que estou especificando excesso extra pequeno e fresco 10 120. Teria sido muito grande se tivesse ido tão alto. Então, duas abaixo de 12 colunas à esquerda, 10 de 12 colunas à direita, e poderíamos colocar uma imagem aqui e também poderíamos colocar texto aqui. Vamos apenas visualizar isso, no entanto, e ele vai olhar algo ao longo dessas linhas. Imagem aqui texto aqui. Ok, eu estava chegando bem perto do fundo que está ficando um pouco difícil de ler. Então, por que não adicionamos um pouco de estilo à nossa página aqui? Vamos em frente e adicionar um pouco de estilo ao nosso corpo. E vamos apenas dizer que o fundo do preenchimento será de 50 pixels. Lá vamos nós. Temos um pequeno estofamento no fundo. Pode ser maior do que isso. Vamos em frente. Faça 90 pixels, quase o dobro do que tínhamos originalmente. Lá vamos nós. Temos algum espaçamento lá em baixo. Espero que consigas ver isso. Ok, rolando de volta para baixo na página e eu tenho uma imagem que eu quero colocar aqui. Então o que eu vou fazer é criar uma nova tag de imagem e já tenho isso na minha área de transferência. Então este é um você estranho, Earl. Você pode ir para Vamos em frente e realmente abrir isso em nosso navegador. Vamos em frente e abri-lo em nosso navegador. Olhe para aquela imagem minúscula. E se quiséssemos Teoh, você pode ver onde diz tamanho é igual a 20. Poderíamos fazer esse tamanho é igual a 200 se quiséssemos, mas queremos um efeito pixelado especial e então vamos especificar uma imagem muito pequena. E então aqui estamos dizendo tamanho de 20 pixels. E quando eu atualizar isso, isso vai parecer super pequeno. Sim, mal dá para ver isso. Precisamos adicionar algum estilo especial a isso para que este dedo do pé funcione corretamente. Então vamos em frente e colocar isso em uma nova linha também. Porque podemos estilizar com a altura de 100% é igual a 100%. Vai ser auto. Isso só nos torna uma imagem responsiva. É página de atualização, e você pode ver que parece um pouco embaçada. Mas se clicarmos com o botão direito e inspecionarmos, podemos adicionar essa coisinha legal chamada renderização de imagem. E nós queríamos ser pixelizados, e nós também vamos adicionar outro aqui apenas para Mozilla chamado de bordas mais nítidas. Então, se eu desactivar essa, esta é melhor para o Chrome e para o Firefox. Se eu só falar sobre isso ou não, se você pode realmente ver que a imagem aqui em cima está ficando pixelada, o que é muito legal. Então, em vez de desfocá-lo para tentar dar sentido a ele, ele vai apenas ficar com os pixels que estão atualmente lá. Então vamos em frente e copiar os dois e colocá-los aqui também. E podemos retocar esse espaçamento porque não precisamos dele. É uma página de atualização e lá vamos nós. Temos um efeito pixelado. Isso é muito legal. E então aqui, precisamos ir em frente e adicionar alguns nomes de empresas. Temos nome antigo da empresa. Tem sido um parágrafo aqui. Então, qual era o meu papel? Talvez eu fosse Ah, desenvolvedor Super front-end criou se recipiente apenas para ter separação, uh, para colocar em um Lincoln aqui. E isto vai ser, não sei, talvez o ícone dos ninhos. Esqueça o hub. Então, talvez eu tenha um projeto ou algo que eu queira compartilhar em sua Vamos em frente e copiá-lo novamente. Está bem ali. E em vez de obter hub, talvez vamos colocar página de atualização do Twitter. Boom. Olhe para isso. Então nós temos um hub e nós temos Twitter lá dentro. Isso é muito legal. Isso está indo muito bem agora. Precisamos copiar isso algumas vezes porque queremos três linhas. Então o que eu vou fazer é pegar aquela fila inteira, colá-la e colá-la mais uma vez. E olha para isso. Nós temos três lá, então vamos em frente e retocar um pouco desse conteúdo lá dentro. Digamos que esta é uma espécie de empresa antiga e eu não sei, talvez eu fosse um gerente de projeto, e talvez esta tenha um link no Facebook. Nome da empresa muito antigo. E talvez eu fosse um super desenvolvedor de back-end. E talvez não haja como voltar para casa. Talvez este seja apenas Twitter e Instagram, suponho. Vamos em frente, Refresh. Isso parece muito bom, mas nosso espaçamento está ficando meio nojento. Vamos em frente e adicionar algum espaçamento no próximo vídeo. 14. Espaços de 8 bits: Muito bem, temos uma boa parte da nossa página praticamente feita. Só precisamos adicionar um pouco de espaçamento na sua causa. Nossa página não se parece com isso. Nossa página parece um pouco apertada. As coisas são basicamente como seções ou se tocando, e simplesmente não parece muito oito bits. Parece apertado para ser um pouco. Então só precisamos adicionar um pouco de margem e preenchimento para alguns lugares específicos. Vamos começar pelo topo. Temos isto aqui em cima. Não parece centrado. Se simplesmente clicar com o botão direito e inspecionar. Temos um H dois aqui e podemos realmente ver que há um ma ah, margem inferior de 0,5 quartos. Queremos nos livrar completamente disso. Então vamos abrir o código S. Vamos para a nossa navegação aqui. Eu vou trapacear. Eu vou escrever isso na margem de linha inferior zero, e isso só vai sobrescrever isso. Então vamos em frente e nos atualizar e ver esse tipo de olhar como se estivesse um pouco mais centrado. Vai aumentar esta linha, por isso é um pouco difícil de notar, porque essa margem. fundo era de 0,5 gramas. Mas parece um pouco mais centrado agora, não é? Em seguida, precisamos adicionar um pouco de espaçamento aqui porque esse cara, o cara que diz que eu sou Kayla, ele está muito perto. Então vamos realmente derrubar tudo desse ícone. Então nós temos o recipiente aqui com ninho BC rico, e eu acredito que é um dos criadores de ninho fora CSS, na verdade. Margem inferior 50 p x. Tudo bem, então temos algum espaçamento lá dentro que está vindo junto. Ah, se nós também olharmos aqui, nós temos um pouco de compensação também. Nós realmente não gostamos disso. E você pode ver aqui que isso tem uma margem inferior de um Ram. Não queremos nada disso. Então vamos em frente, encontrar nossas listas e nos livrar de tudo isso. Temos uma lista de ninhos aqui. fundo da margem de estilo é igual a zero. Vamos encontrar outra lista. Parece que não temos nenhum. Certo, aí está. Isso parece um pouco melhor. Agora precisamos de algum espaçamento no meio. Digno de nota é e as coisas que eu dio também precisamos de um pouco de espaçamento entre as minhas sociais e no Worthy de. Então vamos em frente e descer para saber onde isso é esta seção aqui diz a margem de estilo Não Worthy . Margem superior de 50 pixels. Inferior 50 pixels e vamos fazer a parte de baixo também, minhas sociais. Vamos ser um pouco preventivos com a ação deste. Isso é apenas copiar isso. Por quê? Por que digitar se podemos copiá-lo e lá vamos nós. Isso está começando a parecer um pouco mais espaçado. Então temos que adicionar um pouco de espaçamento entre aqui, pouco de espaçamento entre aqui e um pouco de espaçamento entre aqui. Então isso vai ser muito fácil. Vamos para a coluna da direita, então chame-o de Medium Oito. Essa é uma seção maior aqui. Essa é a coluna da direita. Vamos clicar aqui e aqui e aqui. E vamos fazer margem de estilo top 40 pixels e vamos atualizar. Oh, isso parece melhor. Isso está parecendo melhor. Ok, este bar ainda é um alvo muito grande todos juntos, eu acho. Mas antes de fazermos isso, vamos descer o resto da página e temos alguns problemas de espaçamento aqui com a experiência anterior . Por isso, se abrirmos o código V, vou recolher esta secção outra vez. , colapso Colapso, colapso, colapso. E então temos uma primeira seção ou seção escura, segunda seção um título e então a que acabamos de entrar em colapso. Vamos desmoronar isso. E aqui queremos que cada linha individual seja alvo. Vamos fazer apenas uma segunda e terceira filas. Portanto, a margem de estilo é igual ou a margem superior é igual a 30 pixels adicionados. Só um pouco de espaçamento, eu acho. Só para que isso não pareça tão esmagado. Isso parece muito bom. Na verdade, isso acabou melhor do que eu esperava. Normalmente não acho bom espaçamento no primeiro convidado. Mas isso acabou muito bem. E, finalmente, só precisamos retocar isso aqui porque isso é muito grande este progresso barras dois grandes. Vamos dar uma olhada no atributo altura. Qual é a altura desta coisa? 48 pixels. O que acontece se fizermos 25 ou 36? Isso parece OK. Isso parece um pouco melhor e não parece bem no centro. Vamos em frente e dizer que 25 picaretas é que parece muito bom. Então o que estamos fazendo aqui é que estamos editando o CSS direito em nosso navegador e eu quero pegar este seletor e modificá-lo. Então vamos rolar de volta para a página dela e onde temos nosso estilo, onde vai adicionar dot ness? Progresso traço Essa é a nossa barra de progresso. E vamos dizer que ele vai ter uma altura de 25 pixels, e isso vai selecionar cada um deles e dar-lhe uma altura máxima. 25 pixels. Vamos em frente e atualizar sua página. Parece que nada aconteceu com o seletor CSS. Dissemos selecionável de novo. Altere a altura de 25 pixels. 15. O rodapé: Muito bem, temos mais uma secção que temos de acrescentar. Esta é apenas a pequena seção de conteúdo na parte inferior. É muito difícil de ver, e está tudo bem. Isso é apenas um direito autoral ou o que quer que você queira colocar em seus olhos. Coloque algo engraçado, diz ironicamente, Eu realmente não me importo com os próximos jogos em 2019 então vamos em frente e criar isso. Abra o código S e na parte inferior. Na verdade, não é bem o fundo. Eu ia colapsar contêiner e criar um novo contêiner, e isso é basicamente apenas um rodapé. Eu quero dar a isso um estilo, digamos margem Top 50 pixels tamanho da fonte. Vamos torná-lo menor do que o tamanho médio da fonte. Talvez 60% ish. 60%. Há o sinal de porcentagem deu uma coluna de linha extra pequena 12. Então, vai ter 12 colunas de diâmetro, não importa o que aconteça, mas vamos em frente e centralizar a tecnologia. Então estilo texto. Uma linha é igual ao centro, e a cor será C C. C , que é uma cor cinza claro. E, em seguida, aqui, vamos apenas colocar Ironicamente, Eu não me importo com jogos sim em 2019. E vamos mudar isso. Veja um copyright que você fez para fazer e copiar? Vamos voltar para o nosso arquivo de trabalho aqui e vamos apenas rolar para a atualização inferior e vamos nos livrar disso e diz, ironicamente, Eu não me importo com ele s jogos em 2019. 16. Projeto completo: Tudo bem. É assim que criamos um site de oito bits com uma pequena estrutura CSS ou biblioteca chamada ninho ponto CSS, que é de código aberto. Você pode encontrá-lo aqui. Se você gosta, você sempre pode contribuir para isso. Eu gostaria de agradecer aos criadores de Nest Out CSS e contribuidores de Nest on CSS porque esta é uma pequena biblioteca incrível. Isto é simplesmente fantástico. Você não pode todo tipo de botões e outras coisas. Não vem com muito para você vai ter que usar algumas coisas extras aqui, como diálogos. Você vai ter que adicionar seu próprio JavaScript para isso. Mas tudo bem, vem com o estilo, e essa é a parte principal aqui. E então usamos caixa flex grid flex box grid dot com, e isso é apenas uma gota em substituição do sistema de grade bootstraps. Então, se você está usando seu próprio site e ele não está usando bootstrap ou fundação ou qualquer coisa com uma grade e você precisa de uma grade, você pode apenas vir aqui e usar uma gota na substituição de grade. É muito, muito bom. E assim, em menos de uma hora, fomos capazes de criar meu currículo de desenvolvimento Web ou para você, pode ser um portfólio. Pode ser um currículo. Pode ser apenas um site de passatempos ou algo assim. Isso parece muito legal. Obrigado por se juntar a mim nesta jornada. Isto foi muito divertido. Na verdade, gostei muito deste. E espero vê-lo em outra classe minha. Mas antes de ires, não te esqueças que podes partilhar o teu progresso. Compartilhe seu site, compartilhe todo esse projeto que você fez com compartilhamento de habilidades. Basta clicar no botão novo projeto. Ou se você já começou o projeto, você vai ter que editar esse projeto e apenas compartilhar o que você tem. Compartilhe como é o seu. 17. Resumo: Obrigado por se juntar a mim na partilha de habilidades. Não te esqueças, podes seguir-me. Então meu nome está neste curso. Podes clicar no transporte do Caleb e seguir-me na partilha de habilidades. E isso lhe daria notificações sempre que eu lançar um novo curso. Outro curso incrível como este ou eu tenho algum material livre para dar. Claro, isso é opcional. E se você precisar de um grande grupo de suporte para desenvolvedores, eu tenho um grupo no Facebook com, como 25.000 pessoas em um 25.000 desenvolvedores. Estamos aprendendo a codificar juntos. Chama-se Aprendendo a Codificar no Facebook. Venha, diga oi, faça uma pergunta, obtenha apoio, ajude outras pessoas. É uma comunidade onde nos ajudamos um ao outro e é totalmente grátis.