Olá! 😊

Sou iniciante no mundo da programação e este é o meu primeiro projeto em Html e CSS. 🤩 Bora para mais uma aventura! 🚀 🌟

Veja o resultado deste projeto pelo QR Code abaixo, ou pelo LINK

Maratona Explorer 3.0 - Rocketseat

Este projeto visa realizar um menu digital com QR Code, utilizaremos da tecnologia de Front-End com Html e CSS.

Aula 01 - Iniciando nosso código

O que é HTMl?
Conhecendo sobre tag, sintaxes, atributos
Iniciando o código

Aula 02 - Vamos estilizar o programa

O que é CSS?
Conhecendo sobre declarações, comentários
Colorir o projeto
Adicionar e editando o box model

Aula 03 - Fontes e textos

Novas metas!

Nesta etapa, vou incluir os próximos passos deste projeto.

Adicionando imagem
Adicionando favicon
Alinhar texto do produto e valor

Instrutor

Mayk Brito

Aula 01 - Iniciando nosso código 😁

O que é HTML?

Hypertext Markup Language (Linguagem de Marcação de Texto)

Não é uma linguagem de programação, ela serve para estruturar textos, criar links, vídeos, imagens, etc;

Para compreender melhor, Comandos em HTML

Iniciando o código...

Optei utilizar o editor VSCode, vamos abrir um novo_arquivo.html e ! + enter, o próprio editor incluirá a estrutura básica de um html

Dentro do código estão alguns comentários
Vamos indentar para ter uma melhor visualização do código: selecionar de <head> até </body> e dar um TAB
Na parte head podemos incluir informações que não aparecerão na página

<!DOCTYPE html>
<html lang="pt-br"> <!-- alterar para pt-br (portugês brasileiro) 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> DELETAR-->
<head>
    <meta charset="UTF-8"> <!-- Serve para não ter erro em acentuações e caracteres especiais -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Viewport serve para melhorar a visualização em aparelhos móveis e no navegador  -->
    <title>Document</title> <!-- Nome do que aparecerá no Browser -->
</head>
<body>
    
</body>
</html>

Agora que entendemos alguns itens, vamos alterar os nomes:

title para "Menu Digital"
O título para "Cafeteria Sensações"

Vamos incluir novas tags entre o <body> e </body>

<header> abrir cabeçalho
<h1>Título</h1> título
<p>Aberto todos os dias. 8h-21h</p> parágrafo
</header> Fechar cabeçalho

<body>
    <header>
        <h1>Cafeteria Sensações</h1>
        <p>Aberto todos os dias. 8h-21h</p>
    </header>
</body>

No VSCode para visualizar no navegador:

Clique com o botão direito no nome do arquivo
Clique em "Show in Browser"
Em seguida, o arquivo será aberto diretamente no navegador

Abaixo de </header> vamos incluir:

<section> abrir seção
<h2>Brunch</h2> subtítulo
<ul> abrir lista não ordenada (com pontinhos)
<li> abrir item da lista
<div> abrir caixa genérica
<h3>Waffle Doce</h3> subtítulo do subtítulo
<p>Lorem</p> aqui, você deve escrever "lorem e apertar enter"

É um texto apenas para referência, criará um texto qualquer. Podemos apagar parte deste texto

</div> fechar caixa genérica
<strong> Abrir para incluir o valor R$00.00
</strong> Fechar
</li> fechar item da lista
</ul>fechar lista não ordenada
</section> fechar seção

Incluir classes, para usarmos no CSS:

Após div <div class="details">
Após p <p class="description">
Após strong <strong class="price">

<section>
    <h2>Brunch</h2>

    <ul>
        <li>
            <div class="details">
                <h3>Waffle Doce</h3>
                <p class="description">Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
            </div>

            <strong class="price">
            R$37.70
            </strong>
        </li>
    </ul>
</section>

Para incluir mais itens na lista

Copie de <li> até </li>
Altere: o subtítulo do subtítulo, o parágrafo e o valor.

Para incluir mais seções

Copie de <section> até </section>
Altere o subtítulo e também os dados da lista

Nossa aula acaba por aqui, até a próxima! :)

Aula 02 - Vamos estilizar o programa

Neste momento, vamos melhorar o visual do nosso menu digital, dando cor e detalhes ao nosso programa. Iremos adicionar e ajustar espaçamentos, incluir o box model e muito mais...

Bora ver como esse projeto ficará!

O que é CSS?

Cascading Style Sheets (Folha de Estilo em Cascata)

Tecnologia que serve para apresentar o visual para o cliente, dando estilos para o Html

Princípios que nos ajudarão a codar em CSS!

Declaration - Declaração

Quais são as propriedades e valores que serão aplicadas no elemento:

body {
    background: red;
}

Comentários

Em CSS para inserir um comentário: /*texto*/

Cascata

Tendo 2 declarações, a última será o de maior relevância.

body {
    background: red;
}

body {
    background: blue;
}

Neste exemplo, o body será de cor blue

Porém, a cascata perde essa prioridade devido à especificidade, cada seletor terá um peso e sua soma trará a relevância de prioridade.

#id {
    /* peso 100*/
}

.class {
    /* peso 10*/
}

element {
    /* peso 1*/
}

Não inciar com numeral ou caracteres especiais os nomes de id, class e element ( _ é aceito)

Bora colorir esse projeto! 🎨

Abra um novo arquivo em seu editor nome_arquivo.css

Utilizo o VSC, para ter o preview: Extensão Live Preview

No arquivo principal em html inclua <link rel="stylesheet" href="arquivo_em_css.css" />, após, terá o preview no próprio VSC.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estética</title>
    <link rel="stylesheet" href="conteudo_estilo.css" />

</head>

Resultado:

Edições

Editar o Body

Será a cor do projeto, o que vai aparecer aos fundos:

body {
    background-color:lightpink;
}

Para escolher a cor certa! 1. Homehost - Tabela de Cores 2. Erika Sarti - Tabela de Cores

Remover estilos

Podemos remover ou alterar os estilos, basta mudar none para outro formato:

ul {

    list-style: none;
}

Remover espaços e preenchimentos

margin = espaços;
padding = preenchimento.

* {
    margin: 0;
    padding: 0;
}

Box Model EMOJI CAIXA

Os elementos em Html serão em caixas

Item	Descrição
margin	margem
border	borda
px	pixel (unidade de medida)
height	altura
padding	preenchimento da caixa
max-width	largura máxima da caixa
margin-bottom	espaço abaixo

Vamos estilizar por caixas. Em nosso código em html, minimizando as demais informações, temos.

body
header
section

Além disso, dentro de section temos:

Vamos iniciar nossa estilização em header - html

<header>
        <h1>Cafeteria</h1>
        <p>Aberto todos os dias. 8h-21h</p>
    </header>

No arquivo em CSS adicionar:

max-widht largura máxima da caixa
border borda, neste caso, apenas para visualizarmos onde estamos editando (vamos deletar)
margin-left: autoe margin-right: auto vai centralizar a caixa
- Ou podemos utilizar margin: 0 auto
padding 32px cima/baixo e 0px laterais
text-align: center texto alinhado ao centro

header {
    max-width: 300px;
    border: 1px solid red;
    margin-left: auto;
    margin-right: auto;

    /* margin: 0 auto*/

    text-align: center;
    padding: 32px 0;
}

Vamos deletar o border

No próximo item temos section. Podemos fazê-lo das seguintes formas:

Estilo 1.

header {
    max-width: 300px;
    margin: 0 auto

    text-align: center;
    padding: 32px 0;
}

section
    max-width: 300px;
    border: 1px solid red;
    margin: 0 auto

Estilo 2.

Incluímos header,
As informações que se repetem em ambos passamos para abaixo de section (max-width,margin)

header {
    padding: 32px 0;
    text-align: center;
}

header,
section {
    max-width: 300px;
    margin: 0 auto; 
  
}

Editar Brunch / Bebidas

Este item está dentro de section e h2 e o nome do subítulo de cada seção.

No arquivo em CSS adicionar:

background-color - altera o body deste item
padding 8px cima/baixo 16px laterais
text-align: central
margin-bottom espaço abaixo

section h2 {
   background-color: #FED7AA;
   padding: 8px 16px;
   text-align: center;

    margin-bottom: 24px;
}

Editar espaço entre ul / li

Este item entre a palavra Brunch e Waffle:

No arquivo em CSS adicionar:

margin-bottom espaço abaixo

ul li {
    margin-bottom: 16px;
}

Editar R$ ao lado de Waffle Doce

Dentro de li temos duas caixas div e strong

displey: flex faz com que os elementos fiquem um ao lado do outro

ul li {
    margin-bottom: 16px;
    display: flex;
}

Editar espaço da caixa Waffle + R$

Na linha <div class="details">

Estamos pedindo para o programa procurar dentro de li um elemento que possui a classe chamada "details"

max-widht largura máxima da caixa

li .details {
    max-width: 240px;
}

Tendo mais de 1 (uma) seção, alterar o espaço abaixo entre elas

section {
    margin-bottom: 24px;
}

Editar Cor do título

Adicionar tag <span> entre "Sensações" no arquivo html

No arquivo CSS adicionar:

header h1 span {
    color: #995000;
}

Adicionar espaçamento abaixo entre Waffle e o texto

.details h3 {
    margin-bottom: 8px;
}

E nossa aula 02, foi finalizada com grande estilo, ou melhor, com um menu totalmente cheio de estilos...

😍😍

Aula 03 - Fontes e textos

Chegamos em nossa última aula, que projeto incrível!! 😍🥰

Vamos modificar as fontes e os textos, criar um link para acesso remoto e gerar o QRCOde

Editando as Fontes

Em Fontes Google vamos escolher nossa fonte favorita.

Clique na fonte que achar ideal
Escolha o tamanho
Adicione no +
O site vai gerar duas informações:
1. Link para ser colado no arquivo em html
2. Instruções para serem realizadas no arquivo CSS

Retonar para o arquivo em html

Colar o link 1. após <head>
E ajustar indentação

<head>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Oleo+Script+Swash+Caps&display=swap" rel="stylesheet">
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Digital</title>
    <link rel="stylesheet" href="conteudo_estilo.css" />

</head>

Retornar para o arquivo em CSS

Colar o link 2. dentro debody, abaixo da cor

body {
    background-color: #FEEDD5;
    font-family: 'Oswald', sans-serif; && font-family: 'Roboto Mono', monospace;
}

Editar elementos

Informar quais elementos vamos alterar a fonte h1, h2, h3 .price
text-transform: uppercase letra MAIÚSCULA

/*Fontes*/
h1, h2, h3, .price {
    fonte-family: Oswald, sans-serif;
    text-transform: uppercase;
}

Editar tamanho da fonte

font-size: **px incluir o tamanho da fonte em cada local que desejar

Criar header 1 e incluir o código abaixo:

  header h1 {
    margin-bottom: 4px;
    font-size: 32px;
    line-height: 33px;
}

lembrando que, a alteração do tamanho da fonte é apenas o fonte-size: 00px

section h2 incluir o tamanho da fonte

section h2 {
    background-color: #FED7AA;
    padding: 8px 16px;
    text-align: center;

    margin-bottom: 24px;
    font-size: 18px;
}

.details h3 incluir o tamanho da fonte e altura da linha

.details h3 {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 19px;
}

Editar cor da fonte - Títulos, Subtítulos e Preço

color Incluir no agrupamento das Fontes

/*Global - Fonts*/
h1, h2, h3, .price {
    fonte-family: Oswald, sans-serif;
    text-transform: uppercase;
    color: #2d2c2a;
}

Incluir e Editar o Parágrafo do header

header p adicionar grupo
color: rgba(0, 0, 0, 0.7); cor
font-size: 14px; tamanho fonte
line-height: 21px; altura da linha

header p {
    color: rgba(0, 0, 0, 0.7);
    font-size: 14px;
    line-height: 16px;
}

Incluir e Editar o Parágrafo das listas

.details p adicionar grupo
color: rgba(0, 0, 0, 0.6); cor
font-size: 14px; tamanho fonte
line-height: 21px; altura da linha

.details p {
    color: rgba(0, 0, 0, 0.6);
    font-size: 14px;
    line-height: 21px;
}

Utilizando o VSCode

Esta etapa é para quem executou o código em um editor online. Se você realizou as tarefas em um editor em sua máquina local, desconsidere esta etapa.

No VSCode da máquina ou VSCode online

Salvando o site no computador

Esta etapa é para quem executou o código em um editor online. Se você realizou as tarefas em um editor em sua máquina local, desconsidere esta etapa.

No arquivo html com o código já editado

Ctrl+A selecionar o código
Ctrl+C copiar o código
Ctrl+V colar o código no arquivo index.html
Alterar o link dentro de head, para o nome do arquivo css que temos na pasta nova

./ == está no mesmo diretório

Ctrl+S salvar o arquivo

No arquivo CSS com o código já editado

Ctrl+A selecionar o código
Ctrl+C copiar o código
Ctrl+V colar o código no arquivo style.css
Ctrl+S salvar o arquivo

Pronto, agora seus arquivos estão no seu computador

Criando link de acesso ao site

Acessar Netlify

Realizar cadastro, pode ser utilizado o GitHub
Responder o questionário do próprio site.
Import from Git e autorizar (importar o projeto do GitHub)
Autorizar acesso ao repositório

O site vai gerar um link para o projeto.

Gerar QRCode

Acessar QRCode Generator

Realizar cadastro
Copiar o link criado no site do Netlify
Solicitará o tipo de uso: "uso pessoal"
Solicitará o tipo de QR Code: "Website"
Cole o link criado no Netlify
Faça o dowload

Prontinho, etapa finalizada!

Alterções no site

Pelo GitHub, dentro do repositório aperte o . (ponto), abrirá um editor. Aqui você pode editar o seu código.

Inclua ou exclua informações
Clieque onde aparece uma bolinha azul
Inclua uma mensagem informando qual o tipo de alteração
Clique na setinha para ajustar o seu código

No Netlify será atualizado automaticamente!

Prontinho, projeto finalizado com sucesso! 😁

Novas metas

Nesta etapa, vou incluir os próximos passos deste projeto.

Adicionando imagem

Para este item, segui as dicas do Prof: Guanabara

Lembre-se dos direitos autorais de imagem, busque por imagens liberadas!

Recomendação	Sites
Pixabay	https://pixabay.com/pt/
Emojipedia	https://www.emojipedia.org/

Após analisar o seu projeto e identificar o local, tenha uma imagem salva em seu repositório do projeto, e vamos adicioná-la.

Optei por incluir uma imagem entre o nome e horário de funcionamento, localizado no header

<span> abrir tag genérica
img adicinar e apertar enter
<img src="" alt=""> aparecerá automaticamente
Dentro das aspas do src aperte Ctrl+Espaço e procure pelo nome do arquivo
Dentro das aspas do alt inclua o nome do que se parece sua imagem
</span> fechar tag genérica

  <header>
        <h1>Pizzaria <span>Sensações</span><span><img src="pizza_2.png" alt="imagem pizza"></span></h1>
        <p>Aberto de terça-feira a domingo. 18h-23h</p>
    </header>

Adicionar favicon

Favicon é o ícone que aparece na guia do navegador

Podemos criar ícones nos sites abaixo:

Recomendação	Sites
Favicon	https://www.favicon.cc/
Favicon .io	https://favicon.io/

Após escolher o ícone, salve o arquivo em seu repositório.

Em head, acima de title, vamos incluir:

link favicon e apertar enter
Em href= deletar favicon.ico
Nas aspas de href= clique Ctrl+espaço e selecione o arquivo

Prontinho!

Alinhar texto do produto e valor

Conforme editava o texto do produto, percebia que o valor estava se descolando para a esquerda, não mantendo o texto justificado. Para resolver este enigma vamos, no arquivo CSS:

justify-content: space-between; incluir

Este item fará com que os dois elementos (texto e valor) fiquem com o espaço justificado.

ul li {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
}

PamelaRondina/menu_digital

Maratona Explorer 3.0 - Rocketseat

Instrutor

Aula 01 - Iniciando nosso código 😁

O que é HTML?

Iniciando o código...

Aula 02 - Vamos estilizar o programa

O que é CSS?

Princípios que nos ajudarão a codar em CSS!

Bora colorir esse projeto! 🎨

Edições

Box Model EMOJI CAIXA

Aula 03 - Fontes e textos

Editando as Fontes

Utilizando o VSCode

Salvando o site no computador

Criando link de acesso ao site

Gerar QRCode

Alterções no site

Novas metas