/MaratonaDiscover_Aula1

Aula 1 da Maratona Discover by Rocketseat

Primary LanguageHTMLMIT LicenseMIT

GIT Maratona Discover
Aula #1

Table of Contents

Introdução

Anotações e código do tutorial da maratona Discover realizado pela Rocketseat. A idéia do projeto é desenvolver um app financeiro.

Sempre há espaço para melhorar! Envie-nos comentários e sugestões!

Links de Referência

Página RocketSeat


RocketSeat

Antes de começar

Descrição Link
Link Anotação do Linkedin:         LinkedIn
Link do Notion com anotações do Mestre Mayke:         Notion

Anotações

HTML ⇒ Hypertext Markup Language

Comando "!" = Adiciona codificação HTML padrão

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Comando "div*2" = Adiciona 2 tags divs, por exemplo

CSS ⇒ Cascading Style Sheet

  • Comando " * " = Aplica os estilos em toda a página.
  • Comando "#" ⇒ Aplica estilo em um id.
  • Comando "!important" ⇒ Fala para CSS considerar este estilo acima de qualquer outro comando aplicado nas demais tags.

Conceito: "Box model" ⇒ No desenvolvimento web, o conceito de box model no CSS refere a como os elementos HTML irão se comportar nos browsers e como as dimensões destes elementos HTML são derivadas das propriedades CSS. A imagem abaixo ilustra a base do conceito:

RocketSeat

  • Comando: "box-sizing: border-box" ⇒ Esta proprietdade permite que incluamos o padding e a borda na contagem total de largura e altura do elemento.

  • Comando "margin: 0 "⇒  Determina tamanhos de Espaçamento externo.

  • Comando "padding: 0" ⇒ Determina tamanhos de Preenchimento.

  • Comando: "/**/ " ⇒ Permite inserir comentários.

  • Comando: ".container" ⇒ Chama uma classe chamada container.

  • Comando: "width: min(90vw, 800px);" ⇒ Pega a tela (Viewport") e divide em 100 pedaços. O mínimo 0que será exibido são 90 partes de 100. O vírgula é uma instrução de "ou então", ou seja, 90 viewport width ou então 800 pixels.

  • Comando: "line-height" ⇒ Determina a altura entre quebras de linhas.

  • Comando: "Font-size ⇒ Determina o tamanho da fonte.

  • Comando: "font-weight" ⇒ Determina o "peso" ou grossura da fonte.

  • Comando ":hover" ⇒ Determina o efeito que irá ter quando passar o ponteiro do Mouse em cima.

Sempre que iniciar um novo projeto, escreva os comandos abaixo para resetar todos os estilos:

* {
    margin: 0; /*Espaçamento externo*/
    padding: 0; /*Preenchimento*/
    box-sizing: border-box;
}

Results

Project

Developers

These amazing people supported on the development of this project!

Lucas Gonçalves
Owner
Developer
LinkedIn
GitHub