Próximas Turmas

  • Frequência: Terça e Quinta
  • Horário: 18:00/21:00h
  • Término Previsto: 22/04/2025
  • Modalidade: Presencial/online
  • Professor: David Borges
Investimento:

12*430,00 no cartão

O que você vai aprender nesse curso

Formação completa para se tornar um Desenvolvedor Front-End, especializado em HTML, CSS, Javascript e também em React JS.

Ideal para desenvolvedores Back-End que desejam se tornar um Full-Stack.

O curso começa com conceitos fundamentais do HTML e CSS e avança pelo framework Bootstrap e pela linguagem Javascript até chegar na biblioteca React, umas das tecnologias mais requisitadas no mercado Front-End.

Além de toda a preocupação com o desenvolvimento de sites, o curso também aborda temas importantes como: Dicas para freelances,  montagem de portfólio e muito mais.

Conteúdo do curso

Introdução

  • Apresentação
  • Ferramentas
    • VS Code
    • Figma
  • Tecnologias 
  • Estrutura de um site

 

HTML

  • Estrutura base do HTML
  • Principais tags
  • Formulários
  • HTML Semântico
    • Header
    • Footer
    • Section
    • Article
    • Entre outras
  • Google Fonts

 

SEO Básico (Melhorando o código para o google)

  • O que é SEO
  • Tags importante para SEO
  • Otimização de imagens

 

CSS

  • Seletores
    • Nativos
    • Classes
    • Ids
  • Propriedades de texto
  • Box Model
  • Positions
  • Z-Index
  • Display
    • Block
    • Inline
    • Flex
  • Variáveis
  • Transformações
  • Transitions
  • Unidades de medida
  • Responsividade
    • O que é responsividade
    • Media Queries
    • Dicas de responsividade

 

CSS Flexbox

  • O que é flexbox
  • Flex Direction
  • Justify Content
  • Align Items
  • Order
  • Gap
  • Wrap

 

Colocando em Prática

  • Construção de projetos utilizando HTML e CSS

 

Figma (Ferramenta de Interface)

  • Instalação
  • Conceitos gerais do UI Design
  • Imagens
  • Cores
  • Tipografia para web
  • Grid
  • Camadas
  • Guias e Réguas
  • Exportação de imagens para web
  • Style Guide

  

Javascript

  • DOM
  • O que é Javascript
  • Seleção de elementos
  • Console
  • Variáveis
  • Array
  • Eventos
  • Funções
  • Estruturas de repetição
  • Objeto
  • SessionStorage
  • LocalStorage
  • ClassList
  • Consumindo dados de API

 Bibliotecas Javascript

  • Animação de conteúdo
  • Slider
  • Para formulários

Bootstrap

  • O que é um framework
  • Sistema de grid do Bootstrap
  • Utilitários
  • Componentes
    • Botões
    • Navbar
    • Carrossel
    • Modal
    • Entre outros
  • Formulário

 

Bootstrap na prática

  • Criação de um projeto de site com bootstrap

  

Colocando um site no ar

  • Domínio
  • Hospedagem
  • Upload via ftp

 

React JS

  • Javascript Moderno
    • Json
    • Arrow Functions
    • Template String
    • Desestruturação
    • Promisses
    • Async / Await
    • Find/Map/Filter
  • Introdução ao React
    • Introdução ao REACT e configuração do ambiente de trabalho
    • Configuração do VSCODE
    • Configuração e instalação do NODEJS
    • Instalando e gerenciando dependências 
    • Trabalhando com VITE
  • Principais elementos do React
  • Eventos
  • Componentes
  • Propriedades
  • DefaultProps
  • useState
  • useEffect
  • Map
  • Importando imagens no React
  • Trabalhando com CSS
    • Css Import
    • Css Modules
    • Styled Components
    • TawilwindCSS
  • ROUTES
    • React Router Dom
    • Mapeando rotas no projeto
    • Desenvolvendo SPA (Single Page Application)
    • Mapeamento dos links e rotas 
  • HOOKS e REACT HOOK FORMS
    • Iniciando com REACT HOOKS
    • Trabalhando com useState e useEffect
    • Criação de formulários dinâmicos com React Hook Forms
    • Validações customizadas
    • Desenvolvendo componentes de formulário
    • Controllers de formulário 
  • APIs
    • AXIOS
    • Acessando serviços de API
    • Responses
    • Headers
    • Integrando o projeto REACT com APIs Web
  • Deploy
    • Colocando um projeto React online
  • TailwindCSS
    • Fundamentos do Tailwind
    • Valores arbitrátios
    • Group
    • Responsividade
    • Extend

Dicas para trabalhar como freelancer 

  • Dicas de negociação
  • Dicas de como cobrar
  • Dicas de como criar portfólio 

Diferencial Coti Informática: Aulas baseadas em projetos 100% na prática

Diferencial Coti Informática 2: Nosso curso não é dividido em módulos, ou seja, interagimos com todas as tecnologias de modo que o aluno aprenda colocando a mão na massa, deixando as aulas mais atrativas e agradáveis aos alunos.