├── 03 ├── img │ ├── logo.png │ ├── rafa.jpg │ └── img_mulheres.png ├── index.html └── css │ └── style.css ├── 02 ├── img │ └── img01.jpg ├── css │ └── style.css └── index.html ├── 01 ├── exercicio-1 │ ├── img │ │ └── iphone.png │ ├── css │ │ └── style.css │ └── index.html └── exercicio-2 │ ├── img │ ├── beyonce.png │ ├── twitter.png │ ├── facebook.png │ ├── instagram.png │ ├── linkedin.png │ └── retangulo.png │ ├── css │ └── style.css │ └── index.html ├── 05 ├── css │ └── style.css └── index.html ├── 04 ├── css │ └── style.css └── index.html └── README.md /03/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reprograma/html-css-basico/HEAD/03/img/logo.png -------------------------------------------------------------------------------- /03/img/rafa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reprograma/html-css-basico/HEAD/03/img/rafa.jpg -------------------------------------------------------------------------------- /02/img/img01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reprograma/html-css-basico/HEAD/02/img/img01.jpg -------------------------------------------------------------------------------- /03/img/img_mulheres.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reprograma/html-css-basico/HEAD/03/img/img_mulheres.png -------------------------------------------------------------------------------- /01/exercicio-1/img/iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reprograma/html-css-basico/HEAD/01/exercicio-1/img/iphone.png -------------------------------------------------------------------------------- /01/exercicio-2/img/beyonce.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reprograma/html-css-basico/HEAD/01/exercicio-2/img/beyonce.png -------------------------------------------------------------------------------- /01/exercicio-2/img/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reprograma/html-css-basico/HEAD/01/exercicio-2/img/twitter.png -------------------------------------------------------------------------------- /01/exercicio-2/img/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reprograma/html-css-basico/HEAD/01/exercicio-2/img/facebook.png -------------------------------------------------------------------------------- /01/exercicio-2/img/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reprograma/html-css-basico/HEAD/01/exercicio-2/img/instagram.png -------------------------------------------------------------------------------- /01/exercicio-2/img/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reprograma/html-css-basico/HEAD/01/exercicio-2/img/linkedin.png -------------------------------------------------------------------------------- /01/exercicio-2/img/retangulo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/reprograma/html-css-basico/HEAD/01/exercicio-2/img/retangulo.png -------------------------------------------------------------------------------- /01/exercicio-2/css/style.css: -------------------------------------------------------------------------------- 1 | /* GERAL */ 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | background-image: url('../img/retangulo.png'); 8 | font-family: 'Lato', Arial, Helvetica, sans-serif; 9 | } 10 | 11 | a { 12 | text-decoration: none; 13 | } 14 | 15 | /* FONTS */ 16 | h1 { 17 | color: #5D1277; 18 | font-size: 35px; 19 | } 20 | 21 | h2 { 22 | color: #4F4F4F; 23 | font-size: 25px; 24 | } 25 | 26 | /* SEÇÃO SOBRE */ 27 | .secao-sobre { 28 | background-color: white; 29 | width: 50%; 30 | margin: 0 auto; 31 | } 32 | 33 | .sobre-conteudo__img { 34 | margin-top: 80px; 35 | } 36 | 37 | .sobre-conteudo { 38 | font-family: 'Lato', sans-serif; 39 | text-align: center; 40 | } 41 | 42 | .sobre-conteudo__redes-sociais { 43 | text-align: center; 44 | margin-top: 100px; 45 | padding-bottom: 90px; 46 | } 47 | 48 | .sobre-conteudo__redes-sociais img { 49 | width: 87px; 50 | height: 86px; 51 | margin-left: 40px; 52 | } 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /02/css/style.css: -------------------------------------------------------------------------------- 1 | /* GERAL */ 2 | * { 3 | box-sizing: border-box; 4 | color: purple; 5 | } 6 | 7 | body { 8 | font-family: 'Lato', Arial, Helvetica, sans-serif; 9 | } 10 | 11 | a { 12 | text-decoration: none; 13 | } 14 | 15 | img { 16 | width: 100%; 17 | } 18 | 19 | ul li, ol li { 20 | margin: 5px; 21 | } 22 | 23 | /* UTILITIES */ 24 | .u-margin-left-medium { 25 | margin-left: 80px; 26 | } 27 | 28 | /* DESIGN THINKING SECTION */ 29 | 30 | .header { 31 | margin: 15px; 32 | text-align: center; 33 | } 34 | 35 | .secao-design { 36 | width: 75%; 37 | margin: 50px auto; 38 | } 39 | 40 | .secao-design__img, .secao-design__lista { 41 | width: 45%; 42 | display: inline-block; 43 | } 44 | 45 | .secao-design__lista { 46 | vertical-align: top; 47 | } 48 | 49 | /* BUTTONS */ 50 | .btn { 51 | display: block; 52 | margin: 10px auto; 53 | width: 300px; 54 | text-align: center; 55 | border-radius: 5px; 56 | padding: 10px; 57 | } 58 | 59 | .btn-roxo { 60 | background-color:purple; 61 | color: white; 62 | } 63 | 64 | .btn-transp { 65 | border: 1px solid purple; 66 | } 67 | -------------------------------------------------------------------------------- /01/exercicio-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercício 2 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Foto de rosto da cantora Beyoncé 17 |

Beyoncé Giselle Knowles- Carter

18 |

Service Designer

19 |
20 |
21 | 22 | 23 | Ícone do Instagram 24 | 25 | 26 | Ícone do Facebook 27 | 28 | 29 | Ícone do Twitter 30 | 31 | 32 | Ícone do Linkedin 33 | 34 |
35 |
36 | 37 | -------------------------------------------------------------------------------- /02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Exercicío 3 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Design Thinking

13 |

Uma abordagem colaborativa para resolver problemas

14 |
15 | 16 |
17 |
18 | 19 |
20 | Vários postits coloridos colados em uma parede 21 | 22 |
23 | Faça download do e-book 24 | O que estão falando sobre o e-book 25 |
26 |
27 | 28 |
29 |

Fases do Design Thinking (Double Diamont)

30 |
    31 |
  1. Descobrir
    2. 32 |
  2. Definir
    3. 33 |
  3. Desenvolver
    4. 34 |
  4. Entregar
    5. 35 |
36 |

Conteúdo do e-book

37 |
    38 |
  • Definição
    • 39 |
  • Fases do Design Thinking
    • 40 |
  • Cases de Sucesso
    • 41 |
42 |
43 | 44 |
45 |
46 | 47 | -------------------------------------------------------------------------------- /05/css/style.css: -------------------------------------------------------------------------------- 1 | /* GERAL */ 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | font-family: 'Open Sans', Arial, Helvetica, sans-serif; 8 | font-size: 14px; 9 | } 10 | 11 | /* FORM */ 12 | .form { 13 | width: 500px; 14 | margin: 0 auto; 15 | margin-top: 50px; 16 | } 17 | 18 | .form > div { 19 | margin-top: 25px; 20 | } 21 | 22 | label { 23 | display: inline-block; 24 | width: 45%; 25 | text-align: right; 26 | margin-right: 15px; 27 | vertical-align: top; 28 | } 29 | 30 | input[type="text"], select, input[type="number"] { 31 | font-family: 'Open Sans', Arial, Helvetica, sans-serif; 32 | border-radius: 2px; 33 | border: 1px solid #ccc; 34 | height: 30px; 35 | padding: 5px; 36 | } 37 | 38 | textarea { 39 | font-family: 'Open Sans', Arial, Helvetica, sans-serif; 40 | border-radius: 2px; 41 | border: 1px solid #ccc; 42 | padding: 5px; 43 | } 44 | 45 | /* LAYOUT */ 46 | .half-col { 47 | display: inline-block; 48 | width: 45%; 49 | } 50 | 51 | /* BUTTON */ 52 | .btn { 53 | font-family: 'Open Sans', Arial, Helvetica, sans-serif; 54 | border: 1px solid #ccc; 55 | padding: 10px 30px; 56 | font-weight: bold; 57 | border-radius: 5px; 58 | transition: all .5s; 59 | margin-left: 15px; 60 | } 61 | 62 | .btn_grey { 63 | background-color: #ccc; 64 | color: #4a4a4a; 65 | } 66 | 67 | .btn_purple { 68 | background-color: #9013FE; 69 | color: white; 70 | } 71 | 72 | .btn_grey:hover { 73 | background-color: #999; 74 | color: white; 75 | } 76 | 77 | .btn_purple:hover { 78 | background-color: #3a006d; 79 | } 80 | -------------------------------------------------------------------------------- /03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 | 13 | 23 | 24 |
25 |
26 | 27 |

blog posts

28 | 29 | 35 | 36 |
37 |

Mulheres incríveis estão se superando no mercado Tech

38 |

Ao todo, somos apresentados a 30 mulheres, que tornaram a sua luta peça fundamental na construção do mundo. O projeto conseguiu aqui reunir variadas faixas etárias e diferentes áreas de atuação.

39 | foto das alunas da turma 5 do reprograma 40 |
41 | 42 |
43 |
44 | 45 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /04/css/style.css: -------------------------------------------------------------------------------- 1 | /* GERAL */ 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | font-size: 13px; 8 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 9 | } 10 | 11 | /* TABLE */ 12 | .pricing { 13 | max-width: 940px; 14 | margin: 0 auto; 15 | text-align: center; 16 | padding: 10px; 17 | width: 100%; 18 | border-collapse: collapse; 19 | border-spacing: 0; 20 | border-bottom: 1px solid #CCC; 21 | } 22 | 23 | .pricing td, .pricing th { 24 | border-right: 1px solid #CCC; 25 | padding: 10px; 26 | } 27 | 28 | /* TABLE HEADERS */ 29 | .pricing__heading { 30 | font-size: 18px; 31 | font-weight: bold; 32 | border-bottom: 0; 33 | padding-top: 10px; 34 | } 35 | 36 | .pricing__freelance, .pricing__small-business, .pricing__blank { 37 | color:#FFF; 38 | padding:10px; 39 | font-size:13px; 40 | border-right:1px solid #CCC; 41 | border-bottom:0; 42 | } 43 | 44 | .pricing__blank { 45 | border-right:0; 46 | } 47 | 48 | .pricing__small-business { 49 | background:#0078C1; 50 | border-top-left-radius: 3px; 51 | border-left:0px; 52 | } 53 | 54 | .pricing__freelance { 55 | background:#009E2C; 56 | border-top-right-radius: 3px; 57 | border-right:0px; 58 | } 59 | 60 | /* TABLE BODY */ 61 | .pricing__compare > tr:nth-child(odd) { 62 | background:#F5F5F5; 63 | } 64 | 65 | .tickblue { 66 | color:#0078C1; 67 | } 68 | 69 | .tickgreen { 70 | color:#009E2C; 71 | } 72 | 73 | .pricing__compare tr td:first-child { 74 | text-align: left; 75 | } 76 | 77 | /* BUTTON */ 78 | .btn__buy { 79 | background:#ff5406; 80 | padding:10px 20px; 81 | font-size:12px; 82 | display:inline-block; 83 | color:#FFF; 84 | text-decoration:none; 85 | border-radius:3px; 86 | text-transform:uppercase; 87 | margin:5px 0 10px 0; 88 | } -------------------------------------------------------------------------------- /01/exercicio-1/css/style.css: -------------------------------------------------------------------------------- 1 | /* GERAL */ 2 | * { 3 | box-sizing: border-box; /* tamanho leva em consideração o padding */ 4 | } 5 | 6 | body { 7 | background-color: #e4d2e6; /* determina a cor de fundo de um elemento */ 8 | font-family: 'Lato', Arial, Helvetica, sans-serif; /* determina o tipo de fonte */ 9 | } 10 | 11 | a { 12 | text-decoration: none; /* define algum tipo de decoração no texto. Valores: overline, line-through, underline, underline overline */ 13 | } 14 | 15 | img { 16 | width: 85%; /* define o comprimento */ 17 | } 18 | 19 | /* FONTS */ 20 | h1 { 21 | text-align: right; /* define o alinhamento do texto */ 22 | font-size: 35px; /* define o tamanho da fonte. Unidades possíveis são px, em, rem, entre outros */ 23 | text-transform: uppercase; /*define alguma mudança na própria fonte. Valores possíveis: lowercase, uppercase, capitalize */ 24 | } 25 | 26 | h2 { 27 | text-align: right; 28 | } 29 | 30 | p { 31 | width: 430px; 32 | margin-bottom: 110px; 33 | text-align: right; 34 | } 35 | 36 | /* UTILITIES */ 37 | .u-margin-small { 38 | margin: 5px; 39 | } 40 | 41 | .sobre-conteudo { 42 | width: 45%; 43 | display: inline-block; 44 | } 45 | 46 | .sobre-imagem { 47 | width: 45%; 48 | display: inline-block; 49 | } 50 | 51 | .section-sobre { 52 | width: 960px; 53 | margin: 0 auto; /* macete para deixar elementos block centralizados */ 54 | margin-top: 100px; 55 | } 56 | 57 | .sobre-conteudo__botoes { 58 | text-align: right; /* esse tipo de alinhamento para botões não funciona se for colocado diretamente no elemento . Deve-se colocar essa propriedade no elemento mãe */ 59 | } 60 | 61 | .btn { 62 | padding: 10px 12px; 63 | font-size: 16px; 64 | } 65 | 66 | .btn_roxo { 67 | background-color: #5d1277; 68 | color: white; /* define a cor do conteúdo do elemento */ 69 | } 70 | 71 | .btn_transp { 72 | color: #5d1277; 73 | border: 1px solid #5d1277; /* cria uma borda no elemento. Ordem de valores: grossura-da-borda tipo-da-borda cor-da-borda. */ 74 | } 75 | 76 | -------------------------------------------------------------------------------- /03/css/style.css: -------------------------------------------------------------------------------- 1 | /* GERAL */ 2 | * { 3 | color: #4A4A4A; 4 | } 5 | 6 | body { 7 | margin: 0; 8 | font-family: 'Open Sans', Arial, Helvetica, sans-serif; 9 | } 10 | 11 | main { 12 | min-height: calc(100vh - 40px); 13 | } 14 | 15 | /* NAVBAR */ 16 | .navbar { 17 | position: fixed; 18 | width: 100%; 19 | padding: 10px 0; 20 | box-shadow: 0px 3px 4px -2px rgba(0, 0, 0, 0.15); 21 | } 22 | 23 | .navbar__box { 24 | width: 1000px; 25 | margin: 0 auto; 26 | } 27 | 28 | .navbar__logo { 29 | display: inline-block; 30 | width: 140px; 31 | height: 20px; 32 | margin-left: 71px; 33 | } 34 | 35 | .navbar__nav { 36 | display: inline-block; 37 | margin-left: 420px; 38 | padding: 0; 39 | } 40 | 41 | .navbar__nav li { 42 | list-style: none; 43 | display: inline-block; 44 | margin-right: 50px; 45 | } 46 | 47 | .navbar__nav li a { 48 | text-decoration: none; 49 | font-size: 14px; 50 | text-transform: uppercase; 51 | } 52 | 53 | /* BLOG POSTS */ 54 | .posts__title { 55 | color: #9013FE; 56 | text-transform: uppercase; 57 | font-size: 16px; 58 | font-weight: lighter; 59 | text-align: center; 60 | padding-top: 100px; 61 | margin-top: 0; 62 | } 63 | 64 | /* SECTION */ 65 | .posts { 66 | width: 825px; 67 | margin: 0 auto; 68 | } 69 | 70 | .half-column { 71 | display: inline-block; 72 | height: 480px; 73 | vertical-align: top; 74 | } 75 | /* AUTHOR AREA */ 76 | .posts__author-area { 77 | border: 1px solid #CCCCCC; 78 | box-sizing: border-box; 79 | width: 200px; 80 | } 81 | 82 | .posts__author-area img { 83 | width: 90px; 84 | height: 90px; 85 | border-radius: 45px; 86 | margin: 0 auto; 87 | display: block; 88 | } 89 | 90 | .posts__author-area p { 91 | font-size: 14px; 92 | text-align: center; 93 | } 94 | 95 | .posts__author-area span { 96 | font-weight: bold; 97 | } 98 | 99 | 100 | /* MAIN AREA */ 101 | .posts__main-area { 102 | width: 600px; 103 | margin-left: 20px; 104 | } 105 | 106 | .posts__main-area h1 { 107 | font-weight: bold; 108 | font-size: 36px; 109 | margin-top: 0; 110 | } 111 | 112 | .posts__main-area p { 113 | font-size: 24px; 114 | } 115 | 116 | .posts__main-area img { 117 | width: 600px; 118 | height: 183px; 119 | } 120 | 121 | /* FOOTER */ 122 | footer { 123 | text-align: center; 124 | background-color: #333; 125 | color: white; 126 | padding: 10px; 127 | /* height: 50px; */ 128 | } 129 | 130 | -------------------------------------------------------------------------------- /05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercício 6 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 |
19 | 20 |
21 | 22 | 23 |
24 | 25 |
26 | 27 |
28 | Mulher
29 | Poderosa 30 |
31 | Linda 32 |
33 | Maravilhosa 34 |
35 |
36 | 37 |
38 | 39 |
40 | Super força
41 | Ser invisível 42 |
43 | Ler mentes 44 |
45 | Super velocidade 46 |
47 |
48 | 49 |
50 | 51 | 56 |
57 | 58 |
59 | 60 | 61 |
62 | 63 |
64 | 65 | 66 |
67 | 68 |
69 |
70 | 71 | 72 |
73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /01/exercicio-1/index.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Exercício 1 17 | 18 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |
33 | 34 |

Título

35 |

Isso é um subtítulo

36 | 40 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 41 | consequat. 42 |

43 |
44 | 45 | Download 46 | Read more 47 |
48 |
49 |
50 | 51 | Imagem de um iphone, com uma tela preta 52 |
53 |
54 | 55 | -------------------------------------------------------------------------------- /04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercício 5 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 22 | 23 | 24 | 25 | 28 | 31 | 34 | 37 | 38 | 39 | 40 | 43 | 46 | 49 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 |
17 | Self-Employed & Freelance 18 | 20 | Small businesses that need accounting, invoicing or payroll 21 |
26 | Self-Employed 27 | 29 | Simple Start 30 | 32 | Essentials 33 | 35 | Plus 36 |
41 | Buy Now 42 | 44 | Buy Now 45 | 47 | Buy Now 48 | 50 | Buy Now 51 |
Seperate business/personal✔
Estimate tax payments✔
Track deductible mileage✔
Download online banking✔✔✔✔
Multi-device✔✔✔✔
Create invoices & estimates✔✔✔
Manage VAT✔✔✔
Run payroll✔✔✔
114 | 115 | 116 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Plano de Aulas 2 | 3 | > Plano de aulas para a semana do dia 13/08/2018 - 17/08/2018, sobre HTML e CSS básico. 4 | > Este repositório será populado conforme o andamento das aulas. 5 | 6 | --- 7 | 8 | 9 | ## Obrigada às nossas contribuidoras!! 10 | Esse material foi criado colaborativamente pela equipe Reprograma e com a ajuda de voluntárias. 11 | Nos ajudaram com o layout dos exercícios e implementação no Figma: 12 | - [Rafaella Volkmann](http://ralfa.me/) 13 | - [Sandy Zambeli](https://www.behance.net/sandyzambe950b) 14 | 15 | Nos ajudaram com a resolução dos exercícios: 16 | - [Luciana Primante](https://github.com/lprimante) 17 | - [Monique Rodrigues](https://github.com/MoniqueRodrigues) 18 | - [Natalia Izui](https://github.com/natizui) 19 | - [Pamella Azevedo](https://github.com/pamellaazevedo) 20 | 21 | 22 | **Muito obrigada!!** 23 | 24 | 25 | --- 26 | 27 | ## Issues - como utilizar nesse repositório 28 | As issues neste repositório podem ser usadas como formas de enviar perguntas acerca do assunto da semana de fundamentos de HTML e CSS. 29 | Para fazer a sua pergunta, basta escrever um resumo dela na área do título e uma descrição sobre problema ou dúvida. 30 | 31 | Na descrição, é recomendável ser o mais específica possível. Se possível, colocar **partes do seu código** em HTML e CSS ou **link para o seu repositório** para referência. Especificar também o **navegador** utilizado e o tamanho de tela. 32 | Veja o exemplo na aba Issues. Para documentação de formatação de textos do Github, acesse esse [link](https://guides.github.com/features/mastering-markdown/). 33 | 34 | --- 35 | 36 | ### Aula 01 - Introdução à HTML e CSS 37 | 38 | Iniciaremos com assuntos básicos de estrutura, nomenclatura e anatomia de HTML e CSS. 39 | - [Editores de texto e organização de pastas](#editores-de-texto); 40 | - [HTML: anatomia e introdução de tags](#html); 41 | - [CSS: anatomia e introdução de propriedades](#css); 42 | - [Classes, id](#classes-e-id); 43 | - [Github Desktop](#github-desktop). 44 | 45 | #### Editores de texto 46 | Para se modificar um arquivo `.html` e `.css`, precisamos de editor de texto. Apesar de que um simples bloco de notas pode ser a ferramenta para criação desses arquivos, vários softwares foram lançados no mercado para gostos dos programadores, oferecendo funcionalidades e plugins para facilitar o desenvolvimento. Alguns notáveis são: 47 | - [Sublime Text](https://www.sublimetext.com/); 48 | - [Notepad++](https://notepad-plus-plus.org/); 49 | - [Atom](https://atom.io/); 50 | - O que vamos usar durante as aulas é o [Visual Studio Code](https://code.visualstudio.com/); 51 | 52 | A estrutura de pastas básicas é: 53 | ``` 54 | index.html 55 | /css 56 | style.css 57 | /img 58 | imagem.jpg 59 | ``` 60 | Ou seja, uma pasta com um arquivo `index.html` na raiz e duas pastas: uma `/css` para inserção de nossos estilos `.css` e outra `/img`, para inserção de nossas imagens. 61 | 62 | 63 | #### HTML 64 | HTML é a abreviação de **Hyper Text Markup Language** (linguagem de marcação em hipertexto). Ou seja, não se trata de uma linguagem de programação, pois não tem lógica (algoritmos, processos etc). Ele cria a **estrutura** de uma página ou aplicação web, determinando a separação de layout e seu conteúdo. 65 | 66 | Documentos `.html` possuem tags de estruturação básica: 67 | ```html 68 | 69 | 70 | 71 | 72 | 73 | ``` 74 | 75 | Internamente, as tags html possuem uma anatomia básica também: 76 | ```html 77 | 78 | conteúdo 79 | 80 | ``` 81 | 82 | Comentários em HTML: 83 | ```html 84 | 85 | ``` 86 | 87 | #### CSS 88 | CSS é abreviação de **Cascading Style Sheet** (folha de estilos em cascata). É a linguagem que define **estilos** para o HTML, portanto, não se trata de linguagem de programação. CSS tem "cascata" no nome, devido a sua forma de determinar a propriedade de um elemento - levando em consideração *hierarquia de seletores* e de chamadas de estilo (_inline, internal e external_). 89 | 90 | Para fazer o link de um arquivo `.css` em um documento `.html`, devemos inserir a tag `` no `` do documento, com o `href` do caminho do arquivo. 91 | ```html 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | ``` 100 | 101 | Dentro do arquivo `.css`, a anatomia é: 102 | ```css 103 | seletor { 104 | propriedade: valor; 105 | } 106 | ``` 107 | 108 | Exemplo: 109 | ```css 110 | p { 111 | color: red; 112 | } 113 | ``` 114 | 115 | Comentários em CSS: 116 | ```css 117 | /* Sou um comentário CSS */ 118 | ``` 119 | 120 | 121 | > **ATENÇÃO!** 122 | > Não esqueçam de **indentar** o código! Isso ajuda na sua legibilidade, manutenção e colaboração com outros desenvolvedores. 123 | > 124 | > Para indentar, selecione a linha do código e aperte *tab*. 125 | 126 | #### Classes e id 127 | Classes e ids são atributos que podem ser inseridos em qualquer tag dentro da ``. Eles são **atributos de nomeação**, sendo `class` usada majoritariamente para referência em CSS e `id` para Javascript. 128 | Uma diferença entre os dois é que podem haver várias classes com o mesmo valor, ao passo que ids devem ser **únicos**. 129 | 130 | 131 | #### Propriedades e tags 132 | Verificar os arquivos de exercícios para vê-los em prática. 133 | 134 | HTML | CSS 135 | ------------ | ------------- 136 | Tags de **estrutura**: !doctype, html, head, body | Propriedades de **background**: background-imagem, background-color 137 | Tags no **head**: meta (charset), title, link | Propriedades de **texto**: text-align, font-family, font-size, text-decoration, font-size, text-transform 138 | Tags de **divisão**: div | Propriedades de **layout**: width, margin, padding, display (inline-block) 139 | Tags de **texto**: h1 ao h6, p | Propriedade de **cor**: color 140 | Tag de **link**: a | Propriedade de **decoração**: box-shadow, border 141 | Tag de **imagem**: img | 142 | 143 | **Macete de centralização**: apenas para elementos block. 144 | 1. Definir um tamanho para seu elemento através da propriedade `width`; 145 | 2. Definir `margin: 0 auto;` 146 | 147 | 148 | #### Github Desktop 149 | Github é uma rede de repositórios de códigos abertos, muito utilizada por desenvolvedores. 150 | 151 | Para a primeira semana, vamos utilizar a versão software do [Github](https://desktop.github.com/). 152 | 153 | ##### Meu primeiro repositório sem afobação 154 | 155 | **NO GITHUB.COM** 156 | 1. Crie uma conta em https://github.com 157 | 2. No seu perfil, crie um repositório. Defina o nome do seu repositório, uma descrição e crie em *Create repository*. 158 | 159 | **NO GITHUB DESKTOP** 160 | 1. Na interface do *Github Desktop*, efetue o log in na sua conta. 161 | 2. Vá em File > Clone Repository (ou ctrl + shift + O). 162 | 3. Na lista de repositórios, selecione aquela que você acabou de criar. Veja onde está o endereço do *Local path*. Lá é para onde você vai copiar seus arquivos para subir para o Github.com. 163 | 4. Apertando ok, vá para a pasta do *local path*, copie seus documentos que quer subir para ela. 164 | 5. Na interface do *Github Desktop*, você deve ver a listagens de arquivos modificados ou adicionados à esquerda. 165 | 6. Na esquerda abaixo, escreva uma mensagem no campo *Summary* e clique em Commit to master. Depois isso NÃO SE DESESPERE: seus arquivos vão sumir de vista. **ISTO ESTÁ CORRETÃO** 166 | 7. Depois disso, acima, clique em Push ou Publish. Veja a página do seu repositório do github.com para ver seus arquivos lindos na nuvem. 167 | 168 | --- 169 | 170 | ### Aula 02 - Listas e Display 171 | 172 | Na parte da manhã, teremos contato com a versão desktop do Github, onde vamos subir todos os nossos exercícios a partir desse momento. 173 | Na parte da tarde, veremos display e listas. 174 | - [CSS: cascata em external, internal e inline](#css-external-internal-e-inline); 175 | - [Metodologia BEM](#método-bem). 176 | - [Documentação HTML e CSS](#documentação-html-e-css); 177 | - [Conceito de display inline, block e inline-block](#display-inline-block-e-inline-block); 178 | - [Listas ordenadas e não ordenadas](#listas-ordenadas-e-não-ordenadas); 179 | - [Pseudo-classes: hover, active, focus e visited](#pseudo-classes); 180 | 181 | #### CSS: external, internal e inline 182 | A chamada de marcação de estilo pode ser feita de três formas: 183 | - External: fazendo um `` por uma tag na ``, para conectar a um estilo externo. 184 | ```html 185 | 186 | 187 | 188 | 189 | ``` 190 | - Internal: ainda no ``, abrir uma tag ` 198 | 199 | ``` 200 | - Inline: estilo de css que é inserido como atributo em uma tag. 201 | ```html 202 |

203 | ``` 204 | Sobre as prioridades, o inline tem a máxima prioridade, enquanto o external tem a menor. 205 | ``` 206 | inline > internal > external 207 | ``` 208 | 209 | Por esse motivo, por questões de responsividade e de escalabilidade do código, não vamos trabalhar com estilos inline nem internal. 210 | Para trabalharmos questões de hierarquia, vamos tentar ser mais específicas em nossos seletores no CSS externo. 211 | 212 | 213 | #### Método BEM 214 | O [método BEM](https://en.bem.info/methodology/quick-start/) é um sistema de nomenclatura de aplicações e documentos web, criado pela Yandex. O método, que define um sistema lógico e coerente de nomenclatura de arquivos e códigos de linguagens como HTML, CSS e Javascript, divide as partes em: 215 | 216 | *BEM : block | element | modifier* 217 | 218 | **block**: propósito. O que é isso? Ele é semanticamente independente de outros elementos. Exemplos são: section, menu, error, button, header, logo, search-form, form. 219 | - O bloco não deve influenciar seu ambiente, ou seja, não deve haver margin, padding ou position nesse objeto; 220 | - Eles podem estar um dentro do outro (nesting); 221 | 222 | **element**: uma parte do *block* que não pode ser usado separadamente dele. 223 | Nome: block-name__element-name, search-form__input, search-form__button. 224 | - Elementos podem estar dentro de um outro elemento; 225 | - Elementos são *sempre* parte de um block, não de um outro elemento. Ou seja, não pode haver uma classe do tipo block__elem1__elem2 (sugestão: block__elem1-elem2 ou block__elem2); 226 | 227 | São opcionais, nem todos os blocks tem elementos. 228 | 229 | > Block ou element? 230 | > 231 | > Block: se a seção de código tem a chance de ser re-utilizada e não depende de outros elementos da página para ser implementado. 232 | > 233 | > Element: se a seção de código não pode ser usada separadamente de um parent (block). 234 | 235 | **modifier**: define *aparência*, *estado* ou *comportamento* de um block ou element. Seu nome define sua aparência. Qual o seu tamanho? Qual o seu tema? Exemplos: size_s, theme_islands. Ele é separado do nome do block ou element por um _. Exemplos: block-name_modifier-name e block-name__element-name_modifier-name. 236 | Usos: 237 | - Estados: true, false, enabled e disabled. Estados true não precisam de modifier. search-form__button_disabled. 238 | - Valores: tamanhos, design. search-form__button_size_s, search-form_theme_islands. 239 | - Modifiers não podem ser usados sozinhos. 240 | 241 | **mix**: técnica de usar diferentes entidades de BEM. Combine o comportamento e estilo de múltiplas entidades sem duplicar o código e crie componentes de UI semanticamente, baseado nos já existentes. 242 | Por exemplo: btn btn_purple. O mix btn é uma classe independente do btn_purple, e pode ser usada em outros lugares do documento. 243 | 244 | 245 | #### Documentação HTML e CSS 246 | É importante saber onde consultar quando houver dúvida sobre tags de HTML, seletores e propriedades de CSS. Existem várias fontes de documentação. 247 | - [Tags de HTML - W3Schools](https://www.w3schools.com/tags/default.asp); 248 | - [Propriedades de CSS - W3Schools](https://www.w3schools.com/cssref/default.asp); 249 | - [Seletores de CSS - W3Schools](https://www.w3schools.com/cssref/css_selectors.asp); 250 | - [Documentação HTML - MDN](https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5); 251 | - [Documentação CSS - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS); 252 | - [Várias documentações](https://devdocs.io/). 253 | 254 | As documentações da MDN estão parcialmente na língua portuguesa. Quem tem conhecimento de inglês pode contribuir traduzindo seus artigos para o português e deixar a documentação mais acessível. 255 | 256 | 257 | #### Display inline, block e inline-block 258 | Toda tag em HTML tem por padrão algum valor de display. Os três mais básicos são inline, block e inline-block, cujo entendimento é de extrema importância para manipulação eficiente de elementos na sua página web. 259 | 260 | **Block**: são elementos que "ocupam" toda a largura do elemento pai, fazendo com que não deixe outros elementos do lado dele. Mesmo que seja forçado a ter uma medida menor (a partir de propriedade `width`), ele não deixa outro elemento na mesma linha horizontal. 261 | - Podem conter outros tipos de elementos (inline, block e inline-block); 262 | - Pode estar dentro somente de outros elementos block; 263 | 264 | **Inline**: são elementos que ocupam somente o espaço do conteúdo. 265 | - Não podem conter elementos block; 266 | - Podem estar dentro de qualquer tipo de elemento (block, inline, inline-block); 267 | - Não cria linhas novas; 268 | - Não se consegue definir propriedades de `width` e `height` para ele. 269 | 270 | ![Imagem explicativa dos vários tipos de display](https://i.stack.imgur.com/mGTYI.png) 271 | 272 | **Inline-block**: são elemento híbridos, que permitem que outros elementos fiquem um ao lado do outro (em linha), mas que também possam receber valores de width e height. 273 | > Fonte da imagem: https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block 274 | 275 | #### Listas ordenadas e não ordenadas 276 | Listas são usadas para enumeração de items. No HTML, eles também são utilizados para marcação de outros elementos, como itens de menu de navegação. 277 | Para criar uma lista *ordenada*, devemos fazer: 278 | ```html 279 |

    280 |
  1. Item 1
    2. 281 |
  2. Item 2
    3. 282 |
  3. Item 3
    4. 283 |
284 | ``` 285 | 286 | Para criar uma lista *não ordenada*, devemos fazer: 287 | ```html 288 | 293 | ``` 294 | 295 | 296 | #### Pseudo-classes 297 | Pseudo-class são palavras que são adicionadas aos seletores, para especificar um estado especial. 298 | Para tags de link (a), são comuns as pseudo-classes de: 299 | - `a:hover` (é ativada quando o mouse fica sobre o elemento); 300 | - `a:active` (quando o link é clicado); 301 | - `a:focus` (quando o link é focado, através de navegação por tab ou por clique. É importante para acessibilidade. Por padrão aparece um contorno azul no elemento focado); 302 | - `a:visited` (quando o link já foi visitado, de acordo com o histórico do navegador do usuário). 303 | 304 | 305 | HTML | CSS 306 | ------------ | ------------- 307 | Tags de **lista**: ul, ol, li | Propriedades de **layout**: box-sizing, display (inline, block, inline-block) 308 | Tag de **layout**: span | Propriedades de **animação**: transition 309 | | Propriedades de **alinhamento**: vertical-align 310 | 311 | 312 | --- 313 | 314 | ### Aula 03 - HTML5 e Navegação 315 | 316 | - [Playground para front-end: Codepen](https://codepen.io/); 317 | - O que é HTML5? HTML semântico e suas tags; 318 | - [Coding Dojo, Saiba mais - Link](https://www.devmedia.com.br/o-que-e-o-coding-dojo/30517). 319 | 320 | #### HTML5 e tags semânticas 321 | HTML5 foi uma grande atualização da linguagem de markup, feita em 2014, que definiu e criou novas maneiras de se mostrar conteúdo multimídia (vídeo, áudio etc) e deixar o documento mais semântico. 322 | 323 | O que significa deixar nosso documento mais semântico? Significa deixá-lo mais legível para algoritmos de sites de busca e para outros desenvolvedores. 324 | Ao invés de criar tags `div` com classes de "nav", "header", "footer", "section", foram criadas novas tags com os mesmos nomes. 325 | 326 | Exemplo de um documento sem tags semânticas: 327 | ```html 328 |
329 | 332 |
333 |
334 |

Título

335 |
336 |
337 |
338 |

Lorem

339 |
340 |
341 |
342 | Copyright 343 |
344 | ``` 345 | 346 | Exemplo com tags semânticas: 347 | ```html 348 | 353 |
354 |

Título

355 |
356 |
357 |
358 |

Lorem

359 |
360 |
361 | 364 | ``` 365 | Nota-se que nem todas as classes foram transformadas em tags semânticas, como o menu. 366 | 367 | Tags semânticas mais usadas são: `header`, `nav`, `section`, `article`, `main` e `footer`. 368 | 369 | ![Esquema exemplo de HTML semântico](https://www.w3schools.com/html/img_sem_elements.gif) 370 | 371 | [Lista completa de tags semânticas](https://www.w3schools.com/html/html5_semantic_elements.asp) 372 | 373 | 374 | HTML | 375 | ------------ | 376 | Tags **semântico**: nav, header, main, section, article, aside, footer | 377 | 378 | --- 379 | 380 | ### Aula 04 - Tabelas 381 | 382 | - Nevegação superior. 383 | - Tabelas: tags e anatomia; 384 | 385 | #### Navegação 386 | Para definir barras de navegação, não precisamos saber de mais nenhuma tag nova. Existe, porém uma maneira específica de criá-las. A mais simples barra superior de navegação se faz com uma tag `` e `