Criando um projeto a partir do zero com HTML e CSS

1 - Primeiros passos de configuração do projeto:Link Title

Criar uma pasta do projeto e colocar o que será utilizado:

Conteúdo escrito (Typora)

Criar arquivo HTML principal

Fontes

Imagens

(geralmente nomeado como index.html) e abrir no VScode

Podem ser pegas no Dafont ou Google Fontes

Ferramentas para utilizar:

Font Ninja: extensão do Google Chrome para saber a fonte de qualquer site

Whats font is | Font Squirrel | Myfonts: sites utilizados para identificar fontes de uma imagem

Se não suas, onde pegar imagens prontas que podem ser utilizadas no projeto:

Unsplash (pesquisa em inglês)

Pexels (pesquisa em inglês)

Google Imagens (ferramentas > direitos de uso > marcadas para reutilização)

Formatos de imagem:

Jpeg

nos dá uma imagem mais compacta (extensão .jpg)

PNG

permite transparência e uma melhor qualidade de imagem (extensão .png)

Tamanho de Imagens

Tamanho máximo de pixels: 1500px (ideal: 650px)

Tamanho máximo de resolução de imagem: 72 a 50 mil px/in

redimensionar no GIMP ou photoshop

Fazer o modelo base do layout do site no MockFlow

2 - Configurar a base HTML do site:

No <head>

Mudar a linguagem pra pt-br

Mudar title do arquivo

Adicionar o Favicon

No <body>

<header> (cabeçalho)

<main> (conteúdo principal)

Criar <h1> + <p> (Título principal + alguma informação extra, se tiver)

<nav> (menu de navegação)

adicionar os links do menu

ex:

<a href="http://">Notícias</a>

<a href="http://">Curiosidades</a>

<a href="http://">Fale Conosco</a>

Adicionar o conteúdo

<footer> (rodapé)

Criar o CSS (style.css)

envelopar nas tags semânticas (atalho: ctrl + shift + p)

Adicionar Imagens (envelopar ambos em <picture>)

Adicionar vídeos de forma responsiva

Adicionar listas (se tiver)

Formatar as palavras em destaque, como em negrito <strong> ou links externos <a>

1: arquivo/local da imagem

source media="(1)" srcset="2">

1: max-width (largura máxima da imagem)

2: arquivo/local da imagem

2: nome/identificação da imagem

atalho: ctrl + espaço

3 - Configurações CSS

Adcionar a pseudo-classe :root

:root é a raiz da árvore de todo documento. O que tiver dentro dela vai servir pro documento inteiro

Definir variáveis na pseudo-classe :root facilita na troca de configurações CSS do site, como cor, fonte, etc. (o cliente pode pedir a troca da cor da fonte, por ex, e em vez de trocar em cada linha, nos trocamos diretamente no root

ex: :root { --cor0: #c5ebd6; --cor1: #c4fdsr4; cor3: e4r3k4; }

no body fica: body { background-color: var(--cor0);

seletor com *

configuração global (vai sevir para todos os elementos CSS)

ex: * { margin = 0px; padding = 0px; }

todos os elementos não vão ter margin nem padding pré-definidos

Window Resigner: Extensão do Google Chrome que testa a responsividade das telas

adiciona o <iframe> do vídeo em uma <div>

cria uma class

ex:

no HTML: <div class="video"> <iframe width="560" height "315" ></iframe> </div>

configurar as div que são da class vídeo para deixar as midias responsivas

no CSS:

div.video {

margin: 0px -20px 30px -20px;

padding: 20px;

padding-bottom: 58%;

position: relative;

Isso é uma configuração/gambiarra pra deixar os videos incoporados centralizados e responsivos (cap 17 aula 12 do curso em video)

div.video > iframe {

}

height: 90%;

width: 90%;

left: 5%;

top: 5%;

position: absolute;

Configurar o header e o menu (nav) do site

background-color: var(--cor5);

Configurar o Aside e o Footer do site