{"id":208,"date":"2026-01-04T21:18:45","date_gmt":"2026-01-04T21:18:45","guid":{"rendered":"https:\/\/www.curso.familiapimentel.com.br\/curso\/?page_id=208"},"modified":"2026-01-10T12:16:11","modified_gmt":"2026-01-10T12:16:11","slug":"curso-modulos-0-e-1","status":"publish","type":"page","link":"https:\/\/www.curso.familiapimentel.com.br\/curso\/curso-modulos-0-e-1\/","title":{"rendered":"Curso &#8211; M\u00f3dulos 0 e 1"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"208\" class=\"elementor elementor-208\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4987bbf e-con-full e-flex e-con e-parent\" data-id=\"4987bbf\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-646ae265 e-con-full e-flex e-con e-child\" data-id=\"646ae265\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-670966ae elementor-widget elementor-widget-image\" data-id=\"670966ae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-150x150.jpeg\" class=\"attachment-thumbnail size-thumbnail wp-image-121\" alt=\"\" srcset=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-150x150.jpeg 150w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-300x300.jpeg 300w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-1024x1024.jpeg 1024w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-768x768.jpeg 768w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-1536x1536.jpeg 1536w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_.jpeg 2048w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-32a349ef e-con-full e-flex e-con e-child\" data-id=\"32a349ef\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-218d9f8c elementor-widget-tablet__width-initial elementor-widget elementor-widget-ekit-nav-menu\" data-id=\"218d9f8c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"ekit-nav-menu.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<nav class=\"ekit-wid-con ekit_menu_responsive_mobile\"\n\t\t\tdata-hamburger-icon=\"\"\n\t\t\tdata-hamburger-icon-type=\"icon\"\n\t\t\tdata-responsive-breakpoint=\"767\">\n\t\t\t            <button class=\"elementskit-menu-hamburger elementskit-menu-toggler\"  type=\"button\" aria-label=\"hamburger-icon\">\n                                    <span class=\"elementskit-menu-hamburger-icon\"><\/span><span class=\"elementskit-menu-hamburger-icon\"><\/span><span class=\"elementskit-menu-hamburger-icon\"><\/span>\n                            <\/button>\n            <div id=\"ekit-megamenu-principal\" class=\"elementskit-menu-container elementskit-menu-offcanvas-elements elementskit-navbar-nav-default ekit-nav-menu-one-page-no ekit-nav-dropdown-hover\"><ul id=\"menu-principal\" class=\"elementskit-navbar-nav elementskit-menu-po-left submenu-click-on-icon\"><li id=\"menu-item-236\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-236 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/\" class=\"ekit-menu-nav-link\">Home<\/a><\/li>\n<li id=\"menu-item-241\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-241 nav-item elementskit-dropdown-has relative_position elementskit-dropdown-menu-default_width elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/quem-somos\/\" class=\"ekit-menu-nav-link ekit-menu-dropdown-toggle\">Como Estudar<svg class=\"elementskit-submenu-indicator ekit-svg-icon icon-down-arrow1\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M31.582 8.495c-0.578-0.613-1.544-0.635-2.153-0.059l-13.43 12.723-13.428-12.723c-0.61-0.578-1.574-0.553-2.153 0.059-0.579 0.611-0.553 1.576 0.058 2.155l14.477 13.715c0.293 0.277 0.67 0.418 1.047 0.418s0.756-0.14 1.048-0.418l14.477-13.715c0.611-0.579 0.637-1.544 0.058-2.155z\"><\/path><\/svg><\/a>\n<ul class=\"elementskit-dropdown elementskit-submenu-panel\">\n\t<li id=\"menu-item-238\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-238 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/curiosidades\/\" class=\" dropdown-item\">Ajuda Importante<\/a><\/ul>\n<\/li>\n<li id=\"menu-item-388\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-388 nav-item elementskit-dropdown-has relative_position elementskit-dropdown-menu-default_width elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"#\" class=\"ekit-menu-nav-link ekit-menu-dropdown-toggle\">Curso Completo<svg class=\"elementskit-submenu-indicator ekit-svg-icon icon-down-arrow1\" viewBox=\"0 0 32 32\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M31.582 8.495c-0.578-0.613-1.544-0.635-2.153-0.059l-13.43 12.723-13.428-12.723c-0.61-0.578-1.574-0.553-2.153 0.059-0.579 0.611-0.553 1.576 0.058 2.155l14.477 13.715c0.293 0.277 0.67 0.418 1.047 0.418s0.756-0.14 1.048-0.418l14.477-13.715c0.611-0.579 0.637-1.544 0.058-2.155z\"><\/path><\/svg><\/a>\n<ul class=\"elementskit-dropdown elementskit-submenu-panel\">\n\t<li id=\"menu-item-239\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-239 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/curso-modulos-0-e-1\/\" class=\" dropdown-item\">M\u00f3dulos 0 e 1<\/a>\t<li id=\"menu-item-436\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-436 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/modulo-2\/\" class=\" dropdown-item\">M\u00f3dulo 2<\/a>\t<li id=\"menu-item-469\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-469 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/modulo-3\/\" class=\" dropdown-item\">M\u00f3dulo 3<\/a>\t<li id=\"menu-item-499\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-499 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/modulo-4\/\" class=\" dropdown-item\">M\u00f3dulo 4<\/a>\t<li id=\"menu-item-537\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-537 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/modulo-5\/\" class=\" dropdown-item\">M\u00f3dulo 5<\/a>\t<li id=\"menu-item-562\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-562 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/modulo-6\/\" class=\" dropdown-item\">M\u00f3dulo 6<\/a><\/ul>\n<\/li>\n<li id=\"menu-item-237\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-237 nav-item elementskit-mobile-builder-content\" data-vertical-menu=750px><a href=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/contato\/\" class=\"ekit-menu-nav-link\">Contato<\/a><\/li>\n<\/ul><div class=\"elementskit-nav-identity-panel\"><button class=\"elementskit-menu-close elementskit-menu-toggler\" type=\"button\">X<\/button><\/div><\/div>\n\t\t\t<div class=\"elementskit-menu-overlay elementskit-menu-offcanvas-elements elementskit-menu-toggler ekit-nav-menu--overlay\"><\/div>        <\/nav>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-73b7d81 e-con-full e-flex elementor-invisible e-con e-parent\" data-id=\"73b7d81\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;zoomIn&quot;,&quot;animation_delay&quot;:1000}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3dc1e4cd elementor-widget elementor-widget-text-editor\" data-id=\"3dc1e4cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><strong><img decoding=\"async\" class=\"alignnone wp-image-121 aligncenter\" src=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-300x300.jpeg\" alt=\"\" width=\"136\" height=\"136\" srcset=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-300x300.jpeg 300w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-1024x1024.jpeg 1024w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-150x150.jpeg 150w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-768x768.jpeg 768w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_-1536x1536.jpeg 1536w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Logo-_Zero-ao-Site_.jpeg 2048w\" sizes=\"(max-width: 136px) 100vw, 136px\" \/><\/strong><\/p><h5 style=\"text-align: center;\"><strong>Curso B\u00e1sico de Cria\u00e7\u00e3o de Sites<\/strong><\/h5><h5 style=\"text-align: center;\"><strong>Do Zero ao Site no Ar<\/strong><\/h5><h5 style=\"text-align: center;\"><strong>M\u00f3dulo 0 &#8211;\u00a0Apresenta\u00e7\u00e3o do instrutor e do curso<\/strong><\/h5><p><img decoding=\"async\" class=\" wp-image-145 alignleft\" src=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/luiz-pimentel-206x300.webp\" alt=\"\" width=\"103\" height=\"150\" srcset=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/luiz-pimentel-206x300.webp 206w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/luiz-pimentel.webp 386w\" sizes=\"(max-width: 103px) 100vw, 103px\" \/>Meu nome \u2013 Luiz. 79 anos. Aposentado. Ex-funcion\u00e1rio Embratel na \u00e1rea de inform\u00e1tica. N\u00e3o consegui me divorciar do computador e da internet e, estamos juntos desde sempre. Minha ideia de criar este curso b\u00e1sico formou-se em fun\u00e7\u00e3o de minhas pr\u00f3prias limita\u00e7\u00f5es, em fun\u00e7\u00e3o da disparidade que percebemos entre tentar acompanhar o progresso nesta \u00e1rea e a velocidade em que as transforma\u00e7\u00f5es acontecem. Notei, ao longo deste tempo, que muitas pessoas gostariam de ter algum conhecimento sobre inform\u00e1tica, especialmente referente \u00e0 Internet. A maioria, diante das dificuldades, desiste definitivamente, preferindo pagar algu\u00e9m (\u00e0s vezes, caro) para resolver o seu problema, muitas vezes simples. Este n\u00e3o ser\u00e1 um curso de forma\u00e7\u00e3o profissional \u2013 isto poder\u00e1 vir depois \u2013 mas, o b\u00e1sico para n\u00e3o sentir-se perdido quando houver necessidade em lidar com o assunto. Podendo at\u00e9 mesmo ser a base para um conhecimento mais profundo \u2013 dependendo do objetivo de cada um particularmente.<\/p><p><strong>Sobre o Curso<\/strong><\/p><p><strong>Curso B\u00e1sico de Cria\u00e7\u00e3o de Sites do Zero ao Site no Ar <\/strong>est\u00e1 voltado para pessoas 100% leigas (zero conhecimento t\u00e9cnico). O curso poder\u00e1 estar composto em cerca de 20\u201325 horas no total e ser dividido em 8\u201310 m\u00f3dulos, considerando poss\u00edveis atualiza\u00e7\u00f5es.<\/p><p><strong>P\u00fablico-alvo<\/strong><strong>: <\/strong>Pessoas que nunca mexeram em c\u00f3digo, donas de pequenos neg\u00f3cios, aut\u00f4nomos, professores, artistas, etc.<\/p><p><strong>&#8211; O que o aluno vai ter no final:<\/strong><br \/>\u00a0 Um site publicado e funcionando \u2013 de sua cria\u00e7\u00e3o.<\/p><p><strong>&#8211; Ferramentas que ser\u00e3o utilizadas<\/strong>:<br \/>\u00a0 Todas gratuitas ou com plano gr\u00e1tis. A ideia \u00e9 minimizar ou excluir gastos.<\/p><p><strong>&#8211; Instala\u00e7\u00f5es obrigat\u00f3rias <\/strong><strong>(necess\u00e1rios para o acompanhamento do curso)<\/strong><strong>:<\/strong><\/p><p style=\"text-align: center;\">1 &#8211; Navegador <strong>Google Chrome<\/strong> \u2013 se ainda n\u00e3o est\u00e1 instalado, baixe e instale (pode ser o <strong>Edge da Microsoft<\/strong>. Estamos definindo o <strong>Chrome<\/strong> apenas pra manter o padr\u00e3o de aplicativos usados.\u00a0<br \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-653\" src=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/google-300x106.png\" alt=\"\" width=\"300\" height=\"106\" srcset=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/google-300x106.png 300w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/google.png 485w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><br \/><br \/><\/p><p>\u00a0 2 &#8211; Conta <strong>Google (Gmail)<\/strong> \u2013 ou outro email que preferir, mas pra ficar igual elegemos o Gmail. Se voc\u00ea ainda n\u00e3o tem conta, crie uma.<br \/><br \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-652 aligncenter\" src=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/gmail.png\" alt=\"\" width=\"216\" height=\"192\" \/><\/p><p>\u00a0 3 &#8211; Conta no <strong>GitHub<\/strong> \u2013 esta \u00e9 uma plataforma gratuita onde se pode hospedar o nosso trabalho. Ao longo do curso explicaremos como utiliz\u00e1-la.<br \/><br \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-651 aligncenter\" src=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/github-300x110.png\" alt=\"\" width=\"300\" height=\"110\" srcset=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/github-300x110.png 300w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/github.png 487w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p><p>\u00a0 4 &#8211; <strong>Visual Studio Code<\/strong> (editor de texto gr\u00e1tis) \u2013 \u00e9 s\u00f3 baixar e instalar. \u00c9 um editor de texto que tamb\u00e9m executa os c\u00f3digos (que vamos digitar) e mostra o resultado no navegador (como em site verdadeiro). Como instalar e configurar basicamente ser\u00e1 tratado mais \u00e0 frente.<\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-654 aligncenter\" src=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/vscode-300x217.png\" alt=\"\" width=\"300\" height=\"217\" srcset=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/vscode-300x217.png 300w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/vscode.png 519w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p><p>5 &#8211;<strong> Extens\u00e3o Live Server no VSCode<\/strong> \u2013 j\u00e1 est\u00e1 inclu\u00edda no Visual Studio.<\/p><p><strong>Instala\u00e7\u00e3o dos Softwares (necess\u00e1rios para o acompanhamento do curso)<\/strong><strong> Passo-a-Passo.<\/strong><\/p><ol><li><strong> Navegador Google Chrome<\/strong><\/li><\/ol><ol><li>Abra o navegador que voc\u00ea j\u00e1 tem no Windows.<\/li><li>Digite na barra de endere\u00e7o: <a href=\"http:\/\/www.google.com\/chrome\">www.google.com\/chrome<\/a>\u00a0<\/li><li>Clique no bot\u00e3o azul \u201cFazer download do Chrome\u201d<\/li><li>Escolha \u201cPara uso pessoal\u201d \u2192 \u201cAceitar e instalar\u201d<\/li><li>Quando baixar, clique duas vezes no arquivo ChromeSetup.exe<\/li><li>Espere instalar (aparece uma barrinha azul)<\/li><li>Quando abrir sozinho, fixe na barra de tarefas (arraste o \u00edcone pra baixo)<\/li><li>Pronto! Agora sempre abra o Chrome pra fazer o curso.<\/li><\/ol><p><strong>Observa\u00e7\u00e3o:<\/strong><br \/>\u00a0\u201cSe aparecer \u2018<em>Quer permitir que este aplicativo fa\u00e7a altera\u00e7\u00f5es?<\/em>\u2019 \u2192 clique em SIM.\u201d<\/p><ol start=\"9\"><li>Video de demonstra\u00e7\u00e3o no Youtube. \u2013<a href=\"https:\/\/www.youtube.com\/watch?v=VCmbzzccQdA\" target=\"_blank\" rel=\"noopener\"><u><strong> Ver o V\u00eddeo\u00a0<\/strong><\/u><\/a><\/li><\/ol><p>\u00a0<\/p><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-650 aligncenter\" src=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Chrome-Barra-de-Enderecos-300x127.png\" alt=\"\" width=\"300\" height=\"127\" srcset=\"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Chrome-Barra-de-Enderecos-300x127.png 300w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Chrome-Barra-de-Enderecos-768x325.png 768w, https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-content\/uploads\/2026\/01\/Chrome-Barra-de-Enderecos.png 777w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p><p>\u00a0<\/p><p>\u00a0Figura: Mostra a barra de endere\u00e7os no navegador Chrome, onde digitamos os endere\u00e7os dos sites (URL) que desejamos acessar, ou algo que desejamos consultar.<\/p><p>O que significa URL? &#8211; URL (Uniform Resource Locator &#8211; Localizador Uniforme de Recursos) \u00e9 o\u00a0<strong>endere\u00e7o \u00fanico de um recurso na internet, como uma p\u00e1gina web, imagem ou v\u00eddeo, usado para localiz\u00e1-lo e acess\u00e1-lo atrav\u00e9s de um navegador, funcionando como um &#8220;CEP digital&#8221; que indica o caminho para encontrar o conte\u00fado online<\/strong>.<\/p><p><strong>1-A. Criar Conta de e-Mail no Chrome<\/strong><\/p><p><strong>Como CRIAR (do ZERO) sua conta de e-mail\u00a0 no Chrome<\/strong><strong>.<\/strong><\/p><p>Especial para os alunos que <strong>nunca criaram um e-mail na vida<\/strong> (ou criaram no passado e esqueceram tudo).<\/p><p><em>\u201cAntes de instalar qualquer coisa, vamos fazer uma coisa important\u00edssima: quem ainda n\u00e3o tem e-mail (ou esqueceu a senha antiga) vai criar um Gmail agora comigo.<br \/>\u00a0\u00c9 de gra\u00e7a, rapidinho e vai servir pro curso inteiro.\u201d<\/em><\/p><p><strong>Passo-a-passo:<\/strong><\/p><ol><li>Abra qualquer navegador que voc\u00ea tenha (at\u00e9 o Internet Explorer serve)<\/li><li>Digite na barra:<strong>\u00a0<\/strong><a href=\"http:\/\/www.gmail.com\/\"><strong>www.gmail.com<\/strong><\/a>\u00a0<\/li><li>Clique no bot\u00e3o azul grand\u00e3o <strong>\u201cCriar conta\u201d<\/strong>\u00a0<\/li><li>Escolha <strong>\u201cPara mim\u201d<\/strong>\u00a0<\/li><li><strong>Preencha assim: <\/strong><\/li><\/ol><ul><li><strong>Nome:<\/strong> Seu nome real (ex: Maria Silva)<\/li><li><strong>Nome de usu\u00e1rio:<\/strong> algo simples tipo<br \/>\u00a0\u2192 mariasilva1958@gmail.com<br \/>\u00a0\u2192 joaopedreiro62@gmail.com<br \/>\u00a0\u2192 luizpimentel2025@gmail.com<br \/>\u00a0(se der <strong>\u201cj\u00e1 existe<\/strong>\u201d, coloca o ano de nascimento ou a cidade no final)<\/li><li><strong>Senha<\/strong>: crie uma f\u00e1cil de lembrar mas segura<br \/>\u00a0Exemplo: Maria2025! ou Casa1234@<br \/>\u00a0<em><strong>(tem que ter letra mai\u00fascula, n\u00famero e s\u00edmbolo<\/strong><\/em>)<\/li><\/ul><ol><li>Clique em <strong>\u201cPr\u00f3xima\u201d<\/strong>\u00a0<\/li><li>Coloque o <strong>n\u00famero do celul<\/strong>ar (\u00e9 importante pra recuperar senha depois)<\/li><li><strong>Data de nascimento e sexo<\/strong> \u2192 preenche normal<\/li><li>Clique em <strong>\u201cPr\u00f3xima\u201d<\/strong> \u2192 \u201c<strong>Aceito<\/strong>\u201d<\/li><li>Pronto.! Seu e-mail foi criado.!<\/li><\/ol><p><strong>Dica carinhosa:<br \/>\u00a0<\/strong>\u201cAgora anota esse e-mail e senha num papel e guarda na carteira.<br \/>\u00a0Vai ser o mesmo e-mail que a gente vai usar no GitHub, na hospedagem e pra tudo no curso.<\/p><p><strong>Frase final desse passo (pra tranquilizar):<\/strong><\/p><p>\u201cQuem j\u00e1 tinha e-mail, \u00f3timo.! Quem n\u00e3o tinha, agora tem um e-mail moderno e bonito.<br \/>\u00a0Todo mundo est\u00e1 no mesmo barco agora, ningu\u00e9m fica pra tr\u00e1s.\u201d<\/p><p><a href=\"https:\/\/www.youtube.com\/watch?v=CCpklj5lQ4s\" target=\"_blank\" rel=\"noopener\"><u><strong>Veja no v\u00eddeo<\/strong><\/u><\/a><\/p><p><strong>GitHub<\/strong><\/p><p>O que \u00e9 GitHub?<br \/>\u00a0\u2014 <strong>O GitHub<\/strong>\u00a0\u00e9 um site e um servi\u00e7o baseado em nuvem que ajuda os desenvolvedores e estudantes a armazenar e gerenciar seu c\u00f3digo, bem como rastrear e controlar as altera\u00e7\u00f5es. \u00c9 gratuito e f\u00e1cil de usar.<\/p><p>O que significa \u201cbaseado em nuvem\u201d?<\/p><p>\u2014 O armazenamento em nuvem \u00e9 um modelo de computa\u00e7\u00e3o em nuvem que permite armazenar dados e arquivos na Internet por meio de um provedor de computa\u00e7\u00e3o em nuvem que voc\u00ea acessa usando a Internet p\u00fablica ou uma conex\u00e3o de rede privada dedicada. O provedor armazena, gerencia e mant\u00e9m com seguran\u00e7a os servidores de armazenamento, a infraestrutura e a rede para garantir que voc\u00ea tenha acesso aos dados quando precisar, em escala praticamente ilimitada e com capacidade el\u00e1stica. O armazenamento em nuvem elimina a necessidade de comprar e gerenciar sua pr\u00f3pria infraestrutura de armazenamento de dados, oferecendo agilidade, escalabilidade e durabilidade com acesso aos dados a qualquer hora e em qualquer lugar.<\/p><ol start=\"2\"><li><strong> Criar conta no GitHub &#8211; <\/strong>\u201cGitHub \u00e9 onde a gente, possivelmente, vai publicar o site de gra\u00e7a depois. Siga os passos criar sua conta.\u201d<\/li><\/ol><ol><li>Abra o Chrome<\/li><li>Digite: github.com<\/li><li>Clique em \u201cSign up\u201d (canto superior direito)<\/li><li>Coloque seu e-mail (pode ser Gmail ou qualquer um)<\/li><li>Crie uma senha forte (ex: SeuNome2025!)<\/li><li>Escolha um nome de usu\u00e1rio simples (ex: luizpimentel, mariasilva60, joaopedreiro)<\/li><li>Na pergunta \u201cHow many team members\u2026\u201d coloque 0<\/li><li>Pule as pr\u00f3ximas perguntas clicando \u201cContinue\u201d ou \u201cSkip\u201d<\/li><li>Confirme o e-mail que o GitHub vai mandar<\/li><li>Pronto! Deixe a aba aberta.<\/li><\/ol><p><strong>Observa\u00e7\u00e3o:<\/strong><br \/>\u00a0\u201cSe n\u00e3o souber o nome de usu\u00e1rio, coloca seu nome + ano de nascimento (ex: ana1958).\u201d<\/p><ol start=\"11\"><li>Video de demonstra\u00e7\u00e3o no Youtube.<\/li><\/ol><p>\u2013 1) <a href=\"https:\/\/www.youtube.com\/watch?v=_BGPayFgzQ4\" target=\"_blank\" rel=\"noopener\"><u><strong>Veja o v\u00eddeo.!<\/strong><\/u><\/a> \u2013 Para iniciante (explica\u00e7\u00e3o mais abrangente)<\/p><p>\u2013 2) <a href=\"https:\/\/www.youtube.com\/watch?v=BUGZZaChiYw&amp;t=160s\" target=\"_blank\" rel=\"noopener\"><u><strong>Veja o v\u00eddeo.!<\/strong><\/u><\/a> \u2013 Explica\u00e7\u00e3o mais complexa.\u00a0<\/p><ol start=\"3\"><li><strong> Instalar o Visual Studio Code &#8211; <\/strong>Esse \u00e9 o programa que usaremos pra escrever o c\u00f3digo. \u00c9 gratuito e leve.<\/li><\/ol><ol><li>No Chrome digite: code.visualstudio.com<\/li><li>Clique no bot\u00e3o azul grande \u201cDownload for Windows\u201d<\/li><li>Quando baixar, clique duas vezes no arquivo VSCodeUserSetup.exe<\/li><li>Clique em \u201cAvan\u00e7ar\u201d \u2192 \u201cAvan\u00e7ar\u201d \u2192 marque a caixa \u201cAdicionar ao PATH\u201d \u2192 \u201cInstalar<\/li><li>Deixe marcado \u201cAbrir o Visual Studio Code\u201d \u2192 Concluir<\/li><li>Quando abrir, fixe no desktop ou na barra de tarefas<\/li><li>Pronto! Esse vai ser nosso caderno de c\u00f3digos.<\/li><\/ol><p><strong>Observa\u00e7\u00e3o:<\/strong><br \/>\u00a0\u201cSe aparecer controle de conta \u2192 clique em SIM.\u201d<\/p><ol start=\"8\"><li>Video de demonstra\u00e7\u00e3o no Youtube.<p><strong> \u2013 <\/strong><a href=\"https:\/\/drive.google.com\/file\/d\/16gxEtIKAMvD0BFjXKrBkMcEqVvM0x8b9\/view?usp=sharing\" target=\"_blank\" rel=\"noopener\"><u><strong>Veja o v\u00eddeo.!<\/strong><\/u><\/a><\/p><\/li><\/ol><ol start=\"4\"><li><strong> Instalar a extens\u00e3o Live Server (o milagre do curso).<\/strong><\/li><\/ol><ol><li>Abra o VSCode<\/li><li>Clique no \u00edcone de 4 quadradinhos na barra lateral esquerda (Extens\u00f5es)<\/li><li>Na barra de busca digite: Live Server<\/li><li>O primeiro resultado \u00e9 do Ritwick Dey (mais de 40 milh\u00f5es de downloads)<\/li><li>Clique em Install (azul)<\/li><li>Quando terminar aparece um \u201cReload\u201d \u2192 clique nele<\/li><li>Pronto! Agora toda vez que salvarmos um arquivo, o site atualiza sozinho no navegador.<\/li><\/ol><ol start=\"5\"><li><strong> Teste final + recado carinhoso &#8211; <\/strong>\u201cAgora vamos fazer o teste dos deuses:<\/li><\/ol><ol><li>Feche tudo<\/li><li>Abra o VSCode<\/li><li>Clique em <em><strong>File \u2192 New File<\/strong><\/em>\u00a0<\/li><li>Salve como<em><strong>\u00a0<\/strong><\/em><em><strong>index.htm<\/strong><\/em><em><strong>l<\/strong><\/em> na \u00e1rea de trabalho<\/li><li>Digite s\u00f3 isso abaixo e salve (Ctrl + S): &#8211; (copie e cole)<\/li><\/ol><p>html<\/p><p>&lt;h1&gt;Hello World.! Eu consegui!&lt;\/h1&gt;<\/p><ol start=\"6\"><li>Clique com bot\u00e3o direito no nome do arquivo \u2192 \u201cOpen with Live Server\u201d<\/li><\/ol><p>Se aparecer no Chrome a frase grandona \u201c<em><strong>Hello World.! Eu consegui.!<\/strong><\/em>\u201d &#8211; parab\u00e9ns.!<br \/>\u00a0Seu computador est\u00e1 100 % pronto pro curso.Se deu algum erro, tira print e manda pra mim no WhatsApp que eu te ajudo na hora.<\/p><p><strong>**Fim do M\u00f3dulo 0**<\/strong><\/p><p><strong>M\u00f3dulo 1 &#8211;<\/strong><strong>\u00a0<\/strong><strong>Como a internet e os sites funcionam<\/strong><\/p><p><strong>Teoria:<\/strong><\/p><p><strong>1 \u2013 Sauda\u00e7\u00f5es.<\/strong><\/p><p>Sauda\u00e7\u00f5es, meus queridos alunos.! Bem-vindos ao <strong>M\u00f3dulo 1<\/strong>.<br \/>\u00a0Hoje a gente vai entender como diabos um site aparece na tela do seu celular, ou do computador, quando voc\u00ea digita <a href=\"http:\/\/www.google.com\/\"><em><strong>www.google.com<\/strong><\/em><\/a>.<br \/>\u00a0E eu prometo: sem jarg\u00e3o t\u00e9cnico chato. S\u00f3 hist\u00f3ria boa.<\/p><p><strong>2 \u2013 Met\u00e1fora da Pizzaria (Cliente \u00d7 Servidor)<\/strong><\/p><p>Imagina que o <strong>site<\/strong> \u00e9 uma<strong> pizzaria<\/strong> &#8211; (Pizzaria S\u00e3o Lu\u00eds)<\/p><ul><li><strong>Voc\u00ea<\/strong> (no celular ou computador) = o <strong>CLIENTE<\/strong> sentado na mesa. (Impaciente pra ser atendido)\u00a0<\/li><li>A <strong>pizzaria S\u00e3o Lu\u00eds inteira<\/strong> (cozinha, forno, cozinheiro) = \u00e9 o <strong>SERVIDOR<\/strong> que fica em algum lugar do planeta. (Vamos imaginar&#8230; Em Copacabana, Rio de Janeiro.)<\/li><\/ul><p><em><strong>Voc\u00ea levanta a m\u00e3o e fala por gar\u00e7on que est\u00e1 passando ao lado:<\/strong><\/em><\/p><p>\u00a0\u2014<em>\u00a0<\/em><em>Mo\u00e7o, me traz uma pizza de calabresa.!<\/em>\u00a0 Isso \u00e9 o que chamamos de <strong>PEDIDO<\/strong> (ou <em>REQUEST<\/em><em> (\u00e9 o termo t\u00e9cnico)<\/em>).<\/p><p>O gar\u00e7om leva o pedido at\u00e9 a cozinha, o pizzaiolo faz a pizza e o gar\u00e7om traz de volta pra sua mesa.<\/p><p>\u00a0Isso \u00e9 a <strong>RESPOSTA<\/strong> (ou <em>RESPONSE <\/em><em>(outro termo t\u00e9cnico)<\/em>). &#8211; Na internet funciona exatamente igual:<\/p><ol><li>Voc\u00ea digita um endere\u00e7o no <strong>navegador<\/strong> (no Google Chrome, por exemplo) \u2192<strong> faz o pedido<\/strong> (escrevendo l\u00e1 na barra de endere\u00e7os)<\/li><li>O navegador manda esse pedido pro <strong>servidor<\/strong> da pizzaria (que na verdade \u00e9 um <em>computador gigante<\/em> em algum galp\u00e3o \u2013 l\u00e1 em Copacabana)\u00a0<\/li><li>O servidor prepara a<strong>\u00a0<\/strong><strong>p\u00e1gina<\/strong> (a pizza) e manda de volta pro seu celular ou computador (ou quem pediu a pizza)<\/li><\/ol><p><strong>Pronto. Isso \u00e9 Cliente \u00d7 Servidor.<\/strong> \u2014 Cliente PEDE, servidor SERVE.<\/p><p>\u00a0Todo site do mundo funciona assim. <strong>Simples, n\u00e9?<\/strong>\u201d<\/p><p><strong>3 \u2013 Os 3 ingredientes do site (HTML, CSS e JavaScript \u2013 explica\u00e7\u00e3o de av\u00f3)<\/strong><\/p><p><strong>O que \u00e9 HTML, CSS e JAV<\/strong><strong>AS<\/strong><strong>CRIPT?<br \/>\u00a0\u2014 S\u00e3o 3 pesso\u00ednhas que trabalham juntos pra traduzir a sua linguagem (portugu\u00eas, ingl\u00eas, ou seja a l\u00edngua que for&#8230;) Para o entendimento do computador. Mas eles, juntos, tamb\u00e9m trabalham para deixar tudo bonitinho pra voc\u00ea ver e gostar do que v\u00ea&#8230;<\/strong><\/p><p><strong>Tecnicamente, s\u00e3o linguagem de computa\u00e7\u00e3o. Voc\u00ea usa os tr\u00eas pra criar um programa que vai realizar uma tarefa que voc\u00ea determinar.<\/strong><\/p><p><strong>\u00a0<\/strong><\/p><p><strong>\u00a0Vamos ver isto de uma forma mais agrad\u00e1vel&#8230;<\/strong>usando analogias.<\/p><p><strong><br \/>\u00a0<\/strong><strong>Toda p\u00e1gina da internet \u00e9 feita de 3 coisas s\u00f3<\/strong>. Tr\u00eas ingredientes. Vamos imaginar um <em>prato de comida<\/em>:<\/p><ol><li><strong>HTML<\/strong> = o <em>PRATO<\/em> e a<em> COMIDA<\/em>\u00a0<strong>crua.<\/strong><br \/>\u00a0\u00c9 a estrutura. \u00c9 o arroz, feij\u00e3o, bife e salada colocados no prato de qualquer jeito. Tudo junto e misturado!.<br \/>\u00a0Sem o HTML n\u00e3o tem nada pra ver. \u00c9 o esqueleto.\u00a0<\/li><li><strong>CSS<\/strong> = o <em>TEMPERO<\/em> e a <em>DECORA\u00c7\u00c3O<\/em><br \/>\u00a0\u00c9 o cheiro verde por cima, o molho especial, a arruma\u00e7\u00e3o bonita no prato.<br \/>\u00a0Deixa tudo colorido, alinhado, bonito. Sem CSS o site funciona\u2026 <em>mas fica feio pra caramba<\/em>.\u00a0<\/li><li><strong>JavaScript<\/strong> = o <em>GAR\u00c7OM<\/em> que faz m\u00e1gica<br \/>\u00a0\u00c9 quem abre a porta quando voc\u00ea clica, quem troca a foto quando voc\u00ea passa o mouse, quem calcula o frete no carrinho.<br \/>\u00a0\u00c9 o que faz o site \u201c<strong>mexe<\/strong>r\u201d e<strong> interagir<\/strong> com voc\u00ea.<\/li><\/ol><p><strong>Resumo da av\u00f3:<\/strong><br \/>\u00a0<strong>HTML<\/strong> = o que tem<br \/>\u00a0<strong>CSS<\/strong> = como ficar bonito<br \/>\u00a0<strong>JavaScript<\/strong> = o que faz acontecer quando voc\u00ea clica<\/p><p>Quando voc\u00ea usa estas pesso\u00ednhas da forma adequada, no final, voc\u00ea criou uma p\u00e1gina do seu site.<\/p><p>O que fazer depois? Se voc\u00ea criou sua p\u00e1gina, o que vai fazer com ela pra que outras pessoas possam ver sua obra de arte?<\/p><p>Agora, vamos apresentar o complemento, que vai realizar seu desejo. S\u00e3o outras 3 pesso\u00ednas que tamb\u00e9m juntas, realizam este trabalho. Vamos ver como isto acontece?<\/p><p><strong>4 \u2013 <\/strong><em><strong>Dom\u00ednio<\/strong><\/em><strong>, <\/strong><em><strong>Hospedagem<\/strong><\/em><strong> e <\/strong><em><strong>DNS<\/strong><\/em><strong> (met\u00e1fora da casa)<br \/>\u00a0<\/strong>Agora vamos imaginar que o site \u00e9 uma <em>CASA<\/em>.<\/p><ul><li>O terreno + a casa constru\u00edda = representa a <strong>HOSPEDAGEM<\/strong><br \/>\u00a0\u00c9 onde todos os<strong> arquivos(*)<\/strong> do site moram de verdade. Tipo a <strong>Napoleon Host<\/strong> que a gente vai usar depois. Realmente, s\u00e3o grupos de computadores de grande porte, com grande capacidade de armazenamento e velocidade de processamento, dedicados a este tipo de servi\u00e7o.<p>\u00a0(*) \u2013 <strong>Arquivo<\/strong>: \u00e9 o que voc\u00ea escreveu em HTML, CSS e JAVASCRIPT (lembra?). Estas escritas s\u00e3o guardadas em Arquivos, em alguma pasta do seu computador.\u00a0<\/p><\/li><li>O endere\u00e7o da casa (Rua das Flores, 123) = representa\u00a0 o<strong> DOM\u00cdNIO<\/strong>.<br \/>\u00a0Exemplo:<strong>\u00a0<\/strong><a href=\"http:\/\/www.seunome.com.br\/\"><strong>www.seunome.com.br<\/strong><\/a><br \/>\u00a0\u00c9 o que voc\u00ea digita no navegador. \u00c9 o nome f\u00e1cil de lembrar. Mais \u00e0 frente, no curso, falaremos mais sobre este item.\u00a0<\/li><li>O <strong>DNS<\/strong> = \u00e9 a LISTA TELEF\u00d4NICA que junta os dois (Dom\u00ednio e Hospedagem).<br \/>\u00a0Quando voc\u00ea digita <a href=\"http:\/\/www.seunome.com.br\/\">www.seunome.com.br<\/a>, o <strong>DNS<\/strong> \u00e9 o cara que olha na lista e fala:<br \/>\u00a0\u2014 Ah, essa casa fica no terreno da <strong>Napoleon Host<\/strong>, n\u00famero IP 189.38.12.123.\ud83d\ude0a. \u2013 \u00e9 o famoso DEDO DURO!.<br \/>\u00a0E manda seu navegador ir direto pra l\u00e1.<\/li><\/ul><p>Assim sendo, podemos notar que:<\/p><p>Sem <strong>dom\u00ednio<\/strong> = ningu\u00e9m acha sua casa.<br \/>\u00a0Sem <strong>hospedagem<\/strong> = voc\u00ea n\u00e3o tem casa, s\u00f3 tem endere\u00e7o no meio do nada.<br \/>\u00a0Sem<strong> DNS<\/strong> = tem casa e endere\u00e7o, mas ningu\u00e9m consegue ligar um no outro.Por isso quando a gente contratar a <strong>Napoleon Host<\/strong>, ela j\u00e1 anota e guarda o <strong>dom\u00ednio <\/strong>e j\u00e1 configura o <strong>DNS<\/strong> sozinha. <em>Zero dor de cabe\u00e7a<\/em>.\u201d<\/p><p><strong>5 \u2013 Front-end \u00d7 Back-end (s\u00f3 pra saber que existe)<\/strong><strong>. Voc\u00ea s\u00f3 vai precisar saber mais fundo se seguir em frente para um n\u00edvel mais PRO.<\/strong><\/p><p>\u00daltima coisa rapidinha, s\u00f3 pra voc\u00eas n\u00e3o ficarem perdidos quando algu\u00e9m falar:<\/p><ul><li><strong>FRONT-END<\/strong> = tudo que voc\u00ea <em>V\u00ca e CLICA<\/em> \u2013 \u00e9 o que aparece na sua tela: As cores, bot\u00f5es, fotos, menus. \u00c9 o que a gente vai aprender 90% do curso.\u00a0<\/li><li><strong>BACK-END<\/strong> = o que acontece \u201c<strong>nos bastidores<\/strong>\u201d \u2013 como a cozinha da pizzaria do nosso exemplo acima.<br \/>\u00a0Onde podemos programar &#8211; salvar cadastro no banco de dados, mandar e-mail autom\u00e1tico, calcular estoque da loja, etc.<br \/>\u00a0A gente n\u00e3o vai mexer nisso agora (e nem precisa pra 95% dos sites).<\/li><\/ul><p>Pensa assim:<\/p><p>\u00a0<strong>Front-end<\/strong> = <em>a vitrine e o sal\u00e3o da loja<\/em><br \/>\u00a0<strong>Back-end<\/strong> = o estoque e o escrit\u00f3rio l\u00e1 nos fundos.<\/p><p>\u00a0Neste curso a gente vai dominar a vitrine inteira e deixar ela linda.<br \/>\u00a0E se um dia voc\u00ea quiser aprender o estoque, a\u00ed a gente faz o curso avan\u00e7ado (?).<\/p><p><strong>6 \u2013 Revis\u00e3o r\u00e1pida + piadinha final<br \/>\u00a0<\/strong>\u201cResumindo tudo que voc\u00ea aprendeu hoje:<\/p><ol><li><strong>Internet<\/strong> = cliente pede, servidor entrega (pizzaria)\u00a0<\/li><li>Todo site tem <strong>HTML<\/strong> (estrutura), <strong>CSS<\/strong> (beleza) e <strong>JavaScript<\/strong> (m\u00e1gica)\u00a0<\/li><li><strong>Dom\u00ednio<\/strong> = endere\u00e7o da casa | <strong>Hospedagem<\/strong> = terreno + casa | <strong>DNS<\/strong> = lista telef\u00f4nica (dedo duro)\u00a0<\/li><li><strong>Front-end<\/strong> = o que voc\u00ea v\u00ea | <strong>Back-end<\/strong> = o que voc\u00ea n\u00e3o v\u00ea<\/li><\/ol><p>E agora a frase que eu mais falo pras minhas turmas:<br \/>\u00a0<em>\u2018Se at\u00e9 minha tia de 73 anos entendeu isso aqui\u2026 voc\u00ea tamb\u00e9m entendeu!- T\u00f4 certo ou t\u00f4 errado?\u2019\u201d<\/em><\/p><p><strong>7 \u2013 Tarefa de casa (2 minutinhos)<br \/>\u00a0<\/strong>\u201cAntes da pr\u00f3xima aula, quero que voc\u00eas fa\u00e7am s\u00f3 duas coisinhas:<\/p><ol><li>Abra o Google e digite \u2018<em>pizza<\/em>\u2019 na barra de endere\u00e7os e selecione a op\u00e7\u00e3o \u201cImagem\u201d \u2192 perceba que <strong>voc\u00ea \u00e9 o cliente<\/strong> e o <strong>Google \u00e9 o servidor<\/strong> te entregando a pizza (as imagens). \u00a0<\/li><li>Pense no nome do <em><strong>dom\u00ednio<\/strong><\/em> do seu futuro site (ex: mariaartesanato.com.br). Anote num papel.<\/li><\/ol><p><strong>Pr\u00f3xima aula<\/strong>: vamos colocar a m\u00e3o na massa e criar o primeiro arquivo <strong>HTML<\/strong> do zero!\u201d<strong>\u00a0<\/strong><\/p><p><strong>Resumo:<\/strong><\/p><p>&#8211; <strong>Cliente \u00d7 Servidor<\/strong> \u2013 Basicamente, refere-se ao seu site e onde ele vai estar alojado (hospedado).<\/p><p>&#8211; <strong>O que \u00e9 HTML, CSS e JavaScript (explica\u00e7\u00e3o de av\u00f3)<\/strong> \u2013 refere-se \u00e0 programa\u00e7\u00e3o propriamente dita. S\u00e3o os comandos que voc\u00ea passa para o computador (servidor) para que aconte\u00e7am os milagres&#8230;<\/p><p>&#8211; <strong>Dom\u00ednio, hospedagem e DNS (explica\u00e7\u00e3o simples com met\u00e1fora de casa e endere\u00e7o)<\/strong> \u2013 explicado, de forma bem humorada, sobre cada um&#8230;<\/p><p>&#8211;<strong> Front-end \u00d7 Back-end (s\u00f3 pra saber que existe)<\/strong> \u2013 realmente, s\u00f3 pra saber que existem pois ser\u00e3o transparentes pra voc\u00ea.<\/p><p><strong>Final<br \/>\u00a0<\/strong>\u201cAlguma d\u00favida? Manda aqui no grupo do WhatsApp.<br \/>\u00a0E j\u00e1 deixa salvo: na pr\u00f3xima aula o site de voc\u00eas come\u00e7a a ganhar vida de verdade. Beijo no cora\u00e7\u00e3o de cada um e at\u00e9 l\u00e1!\u201d\u00a0<\/p><p><strong>Tente responder estas quest\u00f5es<\/strong><\/p><p><strong>QUESTION\u00c1RIO \u2013 M\u00d3DULO 1\u00a0 <\/strong><\/p><p><strong>\u201cComo a internet e os sites funcionam\u201d\u00a0 <\/strong><\/p><ol><li><em><strong> Quando voc\u00ea digita um site no navegador, quem \u00e9 o \u201ccliente\u201d na hist\u00f3ria da pizzaria?\u00a0 <\/strong><\/em><\/li><li>a) O forno\u00a0<\/li><li>b) Voc\u00ea (seu computador\/celular)<\/li><li>c) O cozinheiro\u00a0<\/li><li>d) O gar\u00e7om<\/li><\/ol><ol start=\"2\"><li><em><strong> Quem prepara a p\u00e1gina e manda de volta pra voc\u00ea?\u00a0 <\/strong><\/em><\/li><li>a) O cliente\u00a0<\/li><li>b) O servidor<\/li><li>c) O DNS\u00a0<\/li><li>d) O JavaScript<\/li><\/ol><ol start=\"3\"><li><em><strong> Das tr\u00eas op\u00e7\u00f5es abaixo, qual \u00e9 a fun\u00e7\u00e3o do HTML?\u00a0 <\/strong><\/em><\/li><li>a) Deixa o site bonito\u00a0<\/li><li>b) Faz o site mexer e interagir\u00a0<\/li><li>c) \u00c9 a estrutura (o arroz com feij\u00e3o)<\/li><\/ol><ol start=\"4\"><li><em><strong> CSS serve para:\u00a0 <\/strong><\/em><\/li><li>a) Estrutura\u00a0<\/li><li>b) Tempero e decora\u00e7\u00e3o\u00a0\u00a0<\/li><li>c) Fazer m\u00e1gica quando clica<\/li><\/ol><ol start=\"5\"><li><em><strong> JavaScript \u00e9 respons\u00e1vel por:\u00a0 <\/strong><\/em><\/li><li>a) Estrutura\u00a0<\/li><li>b) Apar\u00eancia\u00a0<\/li><li>c) Intera\u00e7\u00e3o (bot\u00f5es, formul\u00e1rios, troca de foto)<\/li><\/ol><ol start=\"6\"><li><em><strong> Na met\u00e1fora da casa, o que \u00e9 o DOM\u00cdNIO? <\/strong><\/em><\/li><li>a) O terreno\u00a0<\/li><li>b) A casa constru\u00edda\u00a0<\/li><li>c) O endere\u00e7o (Rua das Flores, 123)<\/li><li>d) A lista telef\u00f4nica<\/li><\/ol><ol start=\"7\"><li><em><strong> O que \u00e9 hospedagem? <\/strong><\/em><\/li><li>a) O endere\u00e7o bonito\u00a0<\/li><li>b) O terreno + a casa onde os arquivos moram<\/li><li>c) A lista que traduz o nome pro n\u00famero<\/li><\/ol><ol start=\"8\"><li><em><strong> DNS \u00e9:\u00a0 <\/strong><\/em><\/li><li>a) O carteiro\u00a0<\/li><li>b) A lista telef\u00f4nica que junta dom\u00ednio com hospedagem\u00a0<\/li><li>c) O nome do site<\/li><\/ol><ol start=\"9\"><li><em><strong> Front-end \u00e9:\u00a0 <\/strong><\/em><\/li><li>a) Tudo que acontece nos bastidores\u00a0<\/li><li>b) Tudo que o visitante v\u00ea e clica\u00a0<\/li><li>c) S\u00f3 o banco de dados<\/li><\/ol><ol start=\"10\"><li><em><strong> (Pergunta aberta \u2013 essa \u00e9 a mais importante!)\u00a0 <\/strong><\/em><\/li><\/ol><p>\u00a0\u00a0\u00a0 \u201cEm no m\u00e1ximo 3 linhas, me explica com suas palavras como funciona a internet (pode usar a met\u00e1fora da pizzaria ou da casa). Quero ver se virou mestre mesmo!\u201d<\/p><p><strong>Na pr\u00f3xima aula, enviarei o gabarito. At\u00e9 logo mais&#8230;!<\/strong><\/p><p><strong>N\u00e3o esque\u00e7am de enviar suas respostas (seu gabarito) + a quest\u00e3o 10 via Whatsapp do Grupo.<\/strong><\/p><p>FIM DOS M\u00d3DULOS 0 E 1<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fe98b84 e-flex e-con-boxed e-con e-parent\" data-id=\"fe98b84\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Home Como Estudar Curiosidades Curso Completo M\u00f3dulos 0 e 1 M\u00f3dulo 2 M\u00f3dulo 3 M\u00f3dulo 4 M\u00f3dulo 5 M\u00f3dulo 6 Contato X Curso B\u00e1sico de Cria\u00e7\u00e3o de Sites Do Zero ao Site no Ar M\u00f3dulo 0 &#8211;\u00a0Apresenta\u00e7\u00e3o do instrutor e do curso Meu nome \u2013 Luiz. 79 anos. Aposentado. Ex-funcion\u00e1rio Embratel na \u00e1rea de inform\u00e1tica. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-208","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/pages\/208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/comments?post=208"}],"version-history":[{"count":22,"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/pages\/208\/revisions"}],"predecessor-version":[{"id":657,"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/pages\/208\/revisions\/657"}],"wp:attachment":[{"href":"https:\/\/www.curso.familiapimentel.com.br\/curso\/wp-json\/wp\/v2\/media?parent=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}