Please enable JavaScript.
Coggle requires JavaScript to display documents.
Criando um projeto a partir do zero com HTML e CSS - Coggle Diagram
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
(geralmente nomeado como index.html) e abrir no VScode
Fontes
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
Imagens
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
<link rel="shortcut icon" href="imagens/favicon.ico" type="image/x-icon">
Criar o CSS (style.css)
<link rel="stylesheet" href="style.css">
No <body>
<header> (cabeçalho)
Criar <h1> + <p> (Título principal + alguma informação extra, se tiver)
<main> (conteúdo principal)
Adicionar o conteúdo
envelopar nas tags semânticas (atalho: ctrl + shift + p)
<h1>, <h2>, <h3>, <h4>, <h5, <h6> e <p>
Adicionar Imagens (envelopar ambos em <picture>)
<img scr "1" alt "2">
1: arquivo/local da imagem
atalho: ctrl + espaço
2: nome/identificação da imagem
source media="(
1
)" srcset="2">
1: max-width (largura máxima da imagem)
2: arquivo/local da imagem
atalho: ctrl + espaço
Adicionar vídeos de forma responsiva
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>
Adicionar listas (se tiver)
Formatar as palavras em destaque, como em negrito <strong> ou links externos <a>
<nav> (menu de navegação)
adicionar os links do menu
ex:
<a href="http://">Home</a>
<a href="http://">Notícias</a>
<a href="http://">Curiosidades</a>
<a href="http://">Fale Conosco</a>
<footer> (rodapé)
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
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;
background-color: var(--cor5);
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
Configurar o Aside e o Footer do site