Skip to content

Latest commit

 

History

History
127 lines (85 loc) · 5.79 KB

README.md

File metadata and controls

127 lines (85 loc) · 5.79 KB
Raw

NewTab Academy

Projeto HTML e CSS (individual)

Agora que temos um entendimento inicial sobre o funcionamento de cada linguagem, iremos demonstrar um passo a passo de desenvolvimento de um projeto que as utiliza.

Você verá a seguir o Fernando Duro desenvolver em tempo real esse projeto. Inclusive sem grandes edições, vai ver que mesmo um desenvolvedor com grande experiência como ele ainda precisa testar e ajustar algumas coisas conforme vai fazendo. A intenção é que você realmente acompanhe como se estivesse ali ao lado dele.

Link do projeto do curso: https://edijunior88.github.io/NewTab_Academy_Projeto_Individual/

Tecnologias Utilizadas

Para ver todas as tecnologias clique aqui

readme

Escopo do projeto individual

Atualmente o mercado de trabalho está muito mais interessado em saber se você possui experiência em determinado assunto do que em quais cursos você fez. E até que você comece a criar a sua experiência profissional, trabalhando em empresas, a maneira que conseguimos provar certa experiência é desenvolvendo projetos e os apresentando ao mundo e em processos seletivos.

Por isso, durante a nossa jornada você vai desenvolver projetos tanto individualmente quanto em grupo.

Parte destes projetos foram planejados por nós, e outra parte são projetos que empresas utilizam como formas de avaliar tecnicamente um candidato para uma vaga, os famosos “testes técnicos” que vocês irão precisar resolver no futuro. Desde já, vamos nos acostumando com eles.

No nosso primeiro projeto, que iremos trabalhar nos módulos de HTML, CSS e Javascript, nos inspiramos no teste técnico de front-end para a empresa Via Varejo (responsável pelas Casas Bahia, Pontofrio e outras marcas).

E ainda adicionamos alguns itens para ficar mais divertido. 😁

Vamos lá?

Obs. 1) Antes vamos deixar aqui o link do teste técnico original: https://github.com/viavarejo/frontend-test

Obs. 2) No módulo seguinte você vai aprender sobre JavaScript para desenvolver alguns dos requisitos abaixo, mas já vamos deixá-los aqui para entender o escopo completo do projeto. Por enquanto, você precisará fazer toda a parte de HTML e CSS.

Introdução

Seu objetivo é criar uma SPA (Single Page Application) seguindo o layout que está aqui: https://www.figma.com/file/U8ojEXx2vxSK2KOvoBvHVH8y/Frontend-test?node-id=13%3A42

Obs.: Se você fizer um cadastro e login no Figma, você conseguirá ver com mais detalhes todas as telas. E para facilitar, temos imagens e docs das telas no Drive também.

No layout original, vocês vão ver que existem itens no menu sem utilidade. Vamos alterar e criar funcionalidades pra eles? 🙂

Durante o desenvolvimento portanto, vocês devem:

  • Alterar o link “Resumo” para “Cadastro de transações”.
  • Alterar o link “Dashboard” para “Limpar dados”.
  • Excluir o link “Configurações”.

O que sua aplicação deverá fazer

  • Incluir transações de compra ou venda de mercadoria.
  • Criar um extrato das transações incluídas. As transações deverão ser mostradas na ordem em que foram incluídas.
  • Mostrar o saldo final e destacar se houve lucro ou prejuízo.
  • A aplicação deverá ser responsiva e estar de acordo com o layout fornecido.
  • Persistir as transações no Local Storage.

Outros requisitos

HTML:

  • As opções do campo “Tipo de transação” são: Compra e Venda.
  • Caso não exista nenhuma transação cadastrada, adicione a mensagem “Nenhuma transação cadastrada.” na lista do Extrato.

CSS:

  • Testar em smartphones, tablets (modos portrait e landscape) e monitores a partir de 1024px até 1900px. (Através do inspecionar elemento no navegador)
  • A fonte utilizada é a Lato.
  • A largura máxima do conteúdo é 1100px.

JavaScript (isso será feito no próximo módulo):

  • Validar o formulário para que todos os campos sejam preenchidos.
  • Adicionar uma máscara no campo “Valor” para que apenas números sejam preenchidos e com a formatação correta. (Padrão: 10,90)
  • Ao adicionar uma nova transação, persistir no Local Storage e já atualizar a lista com o extrato. Atualizar também o cálculo apresentado.
  • Ao clicar no link “Limpar dados”, apresentar uma mensagem de confirmação e em seguida apagar as informações, atualizando a lista.

Divisão de atividades

HTML e CSS:

  • ATIVIDADE 1 – HTML/CSS:
    • Desenvolvimento completo do HTML
    • Início do desenvolvimento do CSS (versão mobile)
  • ATIVIDADE 2 – HTML/CSS:
    • Desenvolvimento completo do CSS (versão responsiva)

Javascript (reforçando, isso será feito no próximo módulo):

  • ATIVIDADE 1 – JAVASCRIPT:
    • Validação e máscara do formulário
  • ATIVIDADE 2 – JAVASCRIPT:
    • Registro em local storage e listagem das transações
    • Funcionalidade de limpar dados

Status do projeto: ✅ Concluído