Uma das principais fases do desenvolvimento de um projeto web é a prototipação da aplicação. Nessa fase, definimos os padrões que serão utilizados em todo o projeto para garantir uma interface agradável, de fácil uso e que atenda às necessidades do usuário. Entre os aspectos definidos estão a organização das informações, a paleta de cores, a tipografia aplicada e a forma como os conteúdos serão exibidos na interface. Para isso, utilizaremos o Figma, uma das ferramentas mais inovadoras do mercado, que, aliada aos padrões de UI (User Interface) e UX (User Experience), possibilita a prototipação de interfaces para qualquer aplicação web. Além disso, utilizaremos a Inteligência Artificial para apoiar no desenvolvimento de pesquisas, geração de conteúdo e testes, proporcionando uma experiência otimizada ao usuário.

O que você vai dominar:
 

• Visão geral de UX e UI; 
• O que é interface;
• Pesquisas - Entrevistas;
• Card Sorting;
• Uso do Chat GPT;
• Testes de Usabilidade;
• Heurísticas;
• Introdução Figma;
• FigJam;
• Princípios design;
• Conceitos UI;
• Cores;
• Tipografia;
• Projeto;
• Rabiscos;
• Style Guide (Design System);
• Prototipação (Figma).

E muito mais.

Agora que temos um protótipo, é o momento de codificá-lo. Para isso, vamos utilizar duas linguagens essenciais no desenvolvimento front-end: HTML, a linguagem de marcação responsável pela inserção de qualquer tipo de conteúdo, e CSS, a linguagem de estilização que define a formatação de todos os elementos da interface. Além disso, usaremos um dos frameworks front-end mais utilizados no mercado: o Bootstrap. Você também aprenderá sobre o Sass, um pré-processador CSS que permite uma codificação mais rápida e organizada dos estilos.

O que você vai dominar:
 

• Como funciona uma página Web;
• Conceito de camadas: apresentação, formatação e comportamento;
• O que é HTML?;
• Conceito de tags;
• Como criar a estrutura inicial de um documento HTML;
• Inserção de tags para: títulos, parágrafos, imagens, links e listas;
• O que é CSS?;
• Conceito de estilização e tipos de CSS;
• Elementos que formam as regras CSS: Seletor, propriedade e valor;
• Criação de uma folha de estilos;
• Aplicações de formatações iniciais: tipologia, imagens, padrões de cores (Hexadecimal - RGB - HSL - HWB);
• O que são containers? Manipulação do Box Model;
• Formatação de background de páginas e containers: inserção de imagens e cores;
• Unidades de medida CSS: px – em – rem – vh – vw – vmin – vmax;
• Alteração de posicionamento dos elementos: position e flexbox;
• Posicionamento de elementos;
• Aplicação de tags semânticas: nav, main, section, article, header, footer e aside;
• Criação de layouts com CSS Grid Layout;
• Introdução ao Web design responsivo (WDR);
• Conhecimento de Bootstrap: conceitos iniciais, classes, grid, containers e páginas responsivas;
• Apresentação de componentes Bootstrap;
• Tabelas com HTML: Estilização com Bootstrap;
• Formulários HTML: Estilização com Bootstrap.

E muito mais.

Tailwind CSS é um framework que oferece classes de estilos reutilizáveis e customizáveis, facilitando a criação rápida de interfaces modernas e eficientes. Lançado em 2017, ele se destacou no desenvolvimento front-end por ser fácil de usar, aumentar a produtividade e integrar-se bem com JavaScript.  Com certeza você se surpreenderá com esse framework e suas poderosas classes.

JavaScript, uma das linguagens mais usadas no mundo, é essencial para o desenvolvimento web. No curso, você aprenderá a usar JavaScript para aplicar lógica de programação e criar aplicações interativas, melhorando a experiência do usuário.

O que você vai dominar:
 

• Introdução ao Framework - Classes Utilitárias;
• Instalação - Arquivo de configuração - Documentação;
• Tipologia - Espaçamento - Cores;
• Background - Bordas;
• Utilização de flexbox;
• Utilização de Grid;
• Design responsivo;
• Criando componentes.
• Introdução Javascript;
• Variáveis e tipos de dados;
• Operadores aritméticos;
• Operadores relacionais;
• Operadores lógicos;
• Estruturas de decisão;
• Estruturas de repetição;
• Objetos nativos do Javascript;
• Manipulação de Arrays;
• Introdução DOM - Document Object Model;
• Eventos;
• Funções em Javascript;
• Arrow Function;
• Filter - Map - Reduce;
• Objetos JSON.

E muito mais.

Neste módulo, você aprenderá React, uma das principais bibliotecas JavaScript de código aberto para desenvolvimento front-end, criada pelo Facebook. É um requisito essencial para quem deseja atuar na área, permitindo dividir a interface em componentes reutilizáveis e criar aplicações web de forma simples, moderna e escalável.

O Next.js, um framework baseado em React, é amplamente adotado por desenvolvedores por simplificar o desenvolvimento, melhorar o desempenho e a escalabilidade, e facilitar a otimização para SEO. Esse framework será uma ferramenta valiosa na criação de aplicações web modernas e eficientes.

O que você vai dominar:
 

• Introdução ao framework;
• JSX;
• Estilização;
• Componentes;
• Props;
• Eventos;
• Variáveis de Estado;
• Efeitos;
• React Hooks;
• React Router;
• JSON;
• Context API e states globais;
• Consumo de API;
• Hospedagem;
• Introdução ao framework;
• Introdução TypeScript - Tipagem;
• Componentes;
• Funções;
• Gerenciamento de Rotas;
• Estilização;
• Server-Side-Rendering;
• Eslint;
• Consumo de API.