Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • JavaScript Organizando Seu Projeto de Vida Com Matematica Aplicada - Aula1 - ALUNO

    Enviado por

    andreia.olegario
    137 visualizações14 páginas

    Título original

    JavaScript organizando seu projeto de vida com matematica aplicada_Aula1_ALUNO

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    137 visualizações14 páginas

    JavaScript Organizando Seu Projeto de Vida Com Matematica Aplicada - Aula1 - ALUNO

    Enviado por

    andreia.olegario

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 14

    Aula 1

    Estruturando o site

    Unidade

    Projeto de vida: organizando


    objetivos futuros com
    matemática aplicada
    O que vamos aprender?
    Iniciar um projeto web utilizando
    HTML e CSS.

    Reproduzir um layout feito a


    partir do Figma.

    Criar as primeiras CLIQUE E ACOMPANHE A AULA NA ALURA


    customizações utilizando
    CSS.

    2
    Construindo a página
    Neste curso, nossa ênfase será em
    aprofundar o conhecimento nas linguagens
    HTML e CSS. Assim, revisitaremos
    conceitos essenciais, como o uso de tags,
    classes e a aplicação de estilos no CSS,
    tais como posicionamento e escolha de
    fontes. Trabalharemos com um protótipo
    desenvolvido no Figma, disponível em:
    https://www.figma.com/community/
    file/1266748897061926443. Aplicaremos
    os conhecimentos em HTML e CSS
    para criar uma representação prática e
    introduzir interatividade ao projeto usando
    JavaScript. Nosso tema será a reflexão
    sobre os planos de vida pessoais de cada
    estudante, encorajando a definição de
    metas que sejam específicas, mensuráveis,
    3
    alcançáveis, relevantes e temporais.
    Para que possamos iniciar o projeto, precisamos adicionar as extensões
    Live Preview e Live Server ao VS Code. Para isso, acesse a seção de
    extensões, localizada no menu lateral esquerdo do VS Code.

    Use a função de pesquisa para encontrar as extensões mencionadas e


    clique no botão Instalar para cada uma delas. Isso permitirá a integração
    das extensões ao seu ambiente de desenvolvimento no VS Code.

    4
    Ao abrir o protótipo indicado no Figma, observaremos elementos como
    título, vários botões, abas de texto e uma contagem de tempo. Ao
    alternarmos as abas, o texto da descrição da tarefa também se modifica.
    Por exemplo, ao clicar em Criar projetos em JavaScript, o título da tarefa
    exibido será Criar 5 projetos em JavaScript.

    5
    Para iniciar o código do projeto, comece criando uma nova pasta no
    VS Code.

    Em seguida, crie dois novos documentos: index.html e style.css. Para isso,


    clique em New File (novo arquivo), localizado no canto superior direito do
    programa:

    6
    No arquivo index.html, criaremos uma estrutura inicial básica. Dentro
    da tag <html>, definiremos o idioma português com a propriedade
    lang=”pt-br”. Na seção <head>, adicionaremos um título utilizando a
    tag <title>, cujo texto será Meus objetivos do ano. Observe o código
    criado:

    <!DOCTYPE html>
    <html lang=”pt-br”>
    <head>
    <meta charset=”UTF-8”>
    <meta name=”viewport” content=”width=device-width, initial-
    scale=1.0”>
    <title>Meus objetivos do ano</title>
    </head>
    <body>
    </body>
    </html>

    7
    Em seguida, dentro da tag <body>, criaremos uma classe chamada
    conteudo-principal. Feito isso, criaremos um título <h2> com uma
    classe chamada titulo-principal e com o texto “Meus objetivos do
    ano”. É importante observar que, no Figma, esse título está no topo da
    página e é seguido por um underscore _.
    <body>
    <section class=”conteudo-principal”></section>
    <h2 class=”titulo-principal”>Meus Objetivos do ano_</h2>
    </body>

    8
    Para criar uma divisão de conteúdo, utilizaremos a tag <div> com classe
    de nome botoes. Dentro dessa tag <div>, criaremos quatro botões e
    inseriremos os textos correspondentes a cada um deles, com uma classe
    de nome botao.
    <body>
    <section class=”conteudo-principal”></section>
    <h2 class=”titulo-principal”>Meus Objetivos do ano_</h2>
    <div class=”botoes”>
    <button class=”botao”>Cursos na Alura</button>
    <button class=”botao”>Criar projetos em JavaScript<
    button>
    <button class=”botao”>Criar um portfólio</button>
    <button class=”botao”>Atualizar meu currículo</button>
    </div>
    </body>
    Ao gerar a visualização da nossa página, teremos o seguinte resultado:

    9
    Ainda no arquivo index.html, dentro da tag <head>, podemos adicionar
    uma linha em branco para vincular esse arquivo ao nosso style.css
    usando a tag <link>.
    <head>
    <meta charset=”UTF-8”>
    <meta name=”viewport” content=”width=device-width,
    initial-scale=1.0”>
    <title>Meus objetivos do ano</title>
    <link rel=”stylesheet” href=”style.css”>
    </head>

    10
    No Figma, é possível inspecionar os elementos, como fundo, título,
    botões etc. Para isso, basta clicar sobre eles para abrir uma aba à direita
    da tela chamada Design. Nessa aba, você poderá visualizar as definições
    daquele elemento, como a cor utilizada, a fonte, o alinhamento e outras
    propriedades.

    11
    Uma prática útil é mapear todas as cores que você utiliza no Figma e
    salvá-las em variáveis. Isso evitará a necessidade de retornar ao Figma
    sempre que precisar dessas informações, além de permitir a reutilização
    de dados que já foram coletados.
    Assim, dentro do arquivo style.css, armazenaremos as cores em variáveis
    com base no nosso protótipo.
    :root {
    --cor-de-fundo: #1E1E1E;
    --verde: #6FFF57;
    --branco: #FFFFFF;
    --botao-ativo: #3A375E;
    --botao-inativo: rgba(58, 55, 94, 0.5);
    --texto-fundo: rgba(58, 55, 94, 0.3);
    }

    Agora, vamos incorporar uma fonte ao nosso projeto. Para adicionar


    fontes externas à sua página, pesquise no Google Fonts, disponível em:
    fonts.google.com. Procure pela fonte Chakra Petch e adicione as versões
    com pesos 400 e 700. Se desejar explorar outras fontes ou diferentes
    pesos e efeitos, fique à vontade para explorar outras opções.

    12
    Após selecionar as fontes desejadas para o seu projeto, no menu lateral
    do Google Fonts, selecionaremos a opção Import e copiaremos o código
    que está dentro da tag <style>, adicionando-o a primeira linha do
    arquivo style.css.

    @import url(‘https://fonts.googleapis.com/
    css2?family=Chakra+Petch:wght@400;700&display=swap’);

    Para alinhar nosso projeto ao design proposto no protótipo do Figma,


    faremos modificações na cor de fundo, tipografia e cor do texto. Para
    isso, aplicaremos estilos ao elemento <body>, utilizando nossas variáveis
    de cores e incorporando nossa fonte.
    body {
    background-color: var(--cor-de-fundo);
    color: var(--branco);
    font-family: ‘Chakra Petch’, sans-serif;
    }

    13
    Desafio
    Nesta aula, começamos o projeto de vida usando HTML e CSS para criar
    uma estrutura inicial. O desafio de hoje é a personalização dessa página
    inicial. Propõe-se que os estudantes escolham uma fonte diferente para o
    texto, bem como modifiquem a cor de fundo do projeto e dos botões.
    O objetivo é incentivar os estudantes a explorar opções adicionais de
    personalização para aprimorar o projeto, despertando seu interesse por
    possibilidades criativas e promovendo maior engajamento.

    CLIQUE AQUI PARA AVALIAR ESTE MATERIAL


    14

    Você também pode gostar