OK, então vamos em frente e crie este blog a partir do zero.
Então, sinta-se livre para seguir aqui.
Eu irei de criar um novo arquivo até o final deste blog aqui.
Então, a primeira coisa que queremos fazer.
Eu vou manter a solução aberta apenas para que eu possa fazer referência e ter certeza de que temos cores
corretas e tamanhos de fonte.
fazer é que nossos arquivos sejam configurados, então eu tenho dois arquivos de um blog que o HMO e
não tem nada até agora, exceto o título do blog e está vinculado a uma folha de estilo chamada Blog Dotsie SS. Isso está vazio .
Mas a primeira coisa que realmente queremos
Então, isso é só você conhece os dois arquivos que precisaremos.
E agora vamos continuar e preenchê-los.
Então, temos que decidir quando estão fazendo algo assim.
Por onde começamos.
E eu acho que a melhor solução é começar com algumas dessas marcas em nosso G-mail de idade e desenhar algumas delas,
mas não precisamos obter tudo o que são palavras-chave perfeitas antes de nós realmente gostar de coisas.
Então, eu começaria por colocar um parágrafo ou dois e um desses cabeçalhos em nosso corpo.
E para fazer isso, este é o texto de Lorem Ipsum, exceto que é bacon ipsum, que é apenas adicionar bacon ipsum dot com.
Clique em me dar bacon e simplesmente copie um dos parágrafos.
Eu só vou usar o que eu tenho aqui, mas as palavras não são tão importantes, desde que sejam palavras lá.
Então, se você quiser usar bacon ipsum, vá em frente.
Mas se você não fizer caso de bacon você pode escolher qualquer outro ipsum ou simplesmente fazer suas próprias palavras ou
realmente colocar sua própria postagem no blog lá.
Isso seria ideal.
títulos aqui e uma nota que pode fazer sentido fazer com que estes um H1 os dois.
E então, eu também vou colocar um dos
Mas geralmente a regra é que você quer ter um H-1 na página que deveria ser a maior coisa
em sua página.
Então, porque temos múltiplos de cada um são vários títulos aqui vários títulos de artigos.
Eu vou com a H-2, mas no final do dia, não importa, porque vamos desenhar tudo sobre
isso, vamos mudar o tamanho da fonte, vamos mudar o cor e todas as
coisas que seriam definidas tornando-se um H1 contra a natureza dessas diferenças serão eliminadas de qualquer maneira.
só vou dizer que este é o meu primeiro artigo, não o título mais criativo, mas que o salve.
Então eu vou com H-2 e
E vamos apenas visualizar isso para começar.
Então abra isso.
ESTÁ BEM.
Então, há nosso blog até agora.
Então, temos um monte de decisões a tomar.
O primeiro lugar que eu posso começar é fazer com que este corpo tenha essa fronteira.
Então eu forneci as cores no último vídeo.
Eu apenas vou copiar esta cor aqui e vou dar o corpo de água, então
vou selecionar o corpo e então tudo o que temos a fazer é dizer borda e é 20 pixels sólidos dessa cor cinza.
E vamos verificar isso.
ESTÁ BEM.
Então, não parece bem que queremos que olhe, mas está chegando, nós temos a fronteira.
Vamos fazer o tamanho completo para que possamos realmente comparar.
Então, outra coisa que você notará é que nossa fronteira existe um problema que é todo
o caminho todo o corpo ocupa toda a página.
Até aqui, o corpo só ocupa parte da página.
E então há espaçamento em ambos os lados.
Então também há o espaçamento no interior que não temos porque nossas palavras em nosso texto são
direto contra a fronteira.
Então, vamos começar por solucionar esse problema e consertar isso.
Claro que você precisa de estofamento.
Então, este é um preenchimento de 20 pixels em todos os lados.
Você pode ver que há preenchimento na parte inferior e esquerda e direita também.
Então, no corpo, vamos apenas atribuir 20 pixels de preenchimento nos quatro lados e nós conseguimos isso.
Então está um pouco mais perto.
A próxima coisa em que devemos trabalhar é obter a largura correta e não é
apenas uma questão de obter a largura para ser o tamanho certo quando é tela cheia, mas também, à medida que encolhe, você verá que
ele permanece, isso é 700 pixels. permanece em 700 pixels por um tempo e depois encolhe e encolhe e escala.
Então queremos garantir que possamos conseguir que isso aconteça.
Então vamos usar um pouco de truque.
E então, a outra coisa que você quer fazer é certificar-se de que está centrado agora.
Bem, nós realmente não podemos dizer.
Mas não está centrado, será no lado esquerdo.
Então, vamos em frente e adicione o primeiro.
Então, digamos, com 700 pixels e salve e isso é o que eu estava falando sobre o lado esquerdo e queremos nos concentrar no meio e
para fazer isso, podemos usar o auto ou o truque automático de margem que eu havia
falado na caixa modelo de vídeo.
Então, vamos definir uma margem e vamos apenas usar o atalho.
Então, vamos fazer zero pixels de cima e de baixo e, em seguida, Otto à esquerda e a direita.
Lembre-se quando apenas fazemos dois aqui em vez de quatro.
Isto é superior e inferior e isso é esquerdo e direito.
Então, isso os concentra automaticamente para nós, mas você notará, dando-lhe um zero de cima e de baixo, agora
está em frente ao topo.
E este aqui não é.
Temos algum espaço.
Há 20 pixels ali mesmo.
Então, essa é uma solução simples.
Apenas a mesma linha muda de volta para 20 P x.
Nós precisamos do x.
Nós não fizemos antes, porque quando é zero, você pode simplesmente deixá-lo em zero.
Mas quando há um número, precisamos do próximo.
OK, então está parecendo muito perto.
A única coisa é que, à medida que diminuímos, queremos que isso permaneça 700 pixels até não poder dizer mais 700 pixels.
E queremos diminuir e é muito fácil fazer isso, na verdade, tudo o que
queremos fazer é mudar isso para ser a largura máxima e então vamos atribuir uma porcentagem.
E o que isso diz é torná-lo 80 por cento quando você precisa.
Mas no máximo, faça 700 pixels.
Então, vou mostrar o que isso parece quando você atualiza.
Nada muda porque é adicionado ao máximo setecentos pixels, portanto verifica se 80 por cento seriam mais de
700 pixels, o que seria nesse caso.
Então fica em 700 ainda fica em 700 até aqui onde começa a encolher.
É aí que 80% agora tem menos de 700 pixels.
ESTÁ BEM.
Então, agora temos o nosso corpo básico configurado.
A próxima coisa que eu gostaria de fazer aqui é começar o nosso Funt.
Então, novamente, se vamos às notas que eu tenho do último vídeo, a fonte é chamada Source sense pro.
Então, vamos em frente e dirija-nos ao Google phos e procure por fontes que enviam o Pro.
Então eu tenho isso aberto aqui, mas novamente é apenas o Google dot com slash fontes e
apenas fazer uma busca por uma fonte envia pro aqui adicionado ao uso da coleção.
E agora temos uma escolha de pesos de fontes que queremos.
no vídeo original, mas esse é apenas o rosto de fonte normal do peso da fonte 400.
E na verdade não contei isso
E este é um peso mais pesado.
Está dobrado.
Então vamos querer esses dois.
Tão normal em negrito 400 700 e é isso.
Nós vamos aqui e copiem este link.
Nós podemos nos livrar das fontes do Google agora e vamos para o nosso HMO e apenas colar esse link.
E agora temos a capacidade de usar o sentido da fonte.
Então, vamos atribuir isso a dois parágrafos e idade dois e também queremos que seja nessas datas.
Então, o que nós poderíamos fazer é selecionar o parágrafo e dizer fonte fonte da fonte pro pro e nós poderíamos
fazer o mesmo para H-1.
Mas esse não é um bom uso do nosso sucesso.
Nosso código será um pouco repetitivo em cada elemento em que queremos usá-lo.
Teríamos que ir e adicionar isso.
Então o que fazemos é simplesmente aplicá-lo ao corpo.
E, jogando no corpo, tudo dentro dele o herdará.
Então fonte de fonte de fonte e pro e economizar atualizar e lá vamos nós sempre H-1 usá-lo ou H-2 e nós
temos um parágrafo.
Então, isso parece muito bom até agora.