Baixe o app! para ter acesso a mais de 4.000 Cursos Online + Certificado, tudo gratuito!
Baixe o app! Cursos 100% gratuitos.
Curso online gratuito de HTML completo para Front-End, com 14 aulas práticas. Aprenda desde a estrutura básica até formulários, áudios e vídeos. Ideal para iniciantes em TI.
5
(35)
4h18m
15 exercícios
Curso gratuito de criação de lojas virtuais com WooCommerce no WordPress. Aprenda desde a instalação até a personalização completa e gerenciamento de pedidos.
5
(12)
20h31m
21 exercícios
Aprenda React JS com um curso gratuito e completo pela queroser.ninja. Domine React, Webpack, JSX, hot loader e lint em aulas práticas e fáceis de entender.
5
(24)
1h22m
10 exercícios
Curso online gratuito de Javascript completo, abordando DOM, variáveis, arrays, funções, eventos e jQuery. Ideal para iniciantes em Programação Front-End. Inscreva-se já!
4.96
(84)
3h49m
24 exercícios
Aprenda a criar sites no WordPress com este curso online gratuito. Domine desde a instalação até configurações avançadas e publicação de posts. Ideal para iniciantes.
4.95
(43)
6h44m
42 exercícios
Curso GratuitoHTML e CSS para Iniciantes
5
(4)
8h41m
13 exercícios
Curso GratuitoProgramação para Web
5
(4)
14h37m
12 exercícios
Curso GratuitoAprenda HTML criando um clone da Netflix
5
(2)
4h16m
17 exercícios
Curso GratuitoCSS Flexbox no desenvolvimento de sites
5
(1)
1h18m
10 exercícios
Curso GratuitoHTML e CSS para iniciantes
4.92
(622)
4h31m
16 exercícios
Curso GratuitoJquery
4.92
(13)
9h19m
53 exercícios
Curso GratuitoFramework Laravel (PHP) para iniciantes
4.92
(25)
1h41m
10 exercícios
Curso GratuitoHTML5
4.92
(12)
2h35m
32 exercícios
Curso GratuitoCriando sites com Wordpress
4.91
(11)
18h07m
23 exercícios
Curso GratuitoReact JS, a biblioteca do facebook
4.88
(25)
3h22m
9 exercícios
Curso GratuitoSite dinâmico com Jquery
4.86
(35)
1h17m
15 exercícios
Curso GratuitoPHP para iniciantes
4.84
(153)
7h50m
18 exercícios
Curso GratuitoEstilização de sites usando Bootstrap
4.83
(30)
3h10m
16 exercícios
Curso GratuitoJavascript
4.83
(124)
11h56m
44 exercícios
Curso GratuitoFramework CodeIgniter (PHP) para iniciantes
4.79
(14)
5h21m
12 exercícios
Mobile-First no Front-End: Como Planejar e Construir Interfaces que Funcionam em Qualquer Tela
Aprenda mobile-first no front-end para criar interfaces responsivas, leves e fáceis de manter em qualquer tela, do celular ao desktop.
HTTP, Fetch e CORS no Front-End: Como Consumir APIs com Segurança e Sem Dor de Cabeça
HTTP, Fetch e CORS no Front-End: Como Consumir APIs com Segurança e Sem Dor de Cabeça
Consumir APIs é uma das habilidades mais valiosas em Programação Front-End: praticamente toda interface moderna precisa buscar dados, enviar formulários, autenticar usuários e atualizar partes da tela sem recarregar a página. Para fazer isso com confiança, é essencial entender três pilares: como funciona o HTTP, como usar fetch (ou alternativas) e como lidar com CORS — o famoso bloqueio “funciona no Postman, mas não no navegador”.
Neste artigo, você vai aprender o necessário para consumir APIs no front-end de forma correta, previsível e segura, com exemplos práticos e um checklist para depurar erros comuns.
Para aprofundar com trilhas completas, vale visitar a subcategoria de cursos de https://cursa.app/curso-desenvolvimento-web-online-e-gratuito e a categoria maior de https://cursa.app/cursos-online-informatica-ti-gratuito.
1) O básico do HTTP que todo front-end precisa dominar
HTTP é o protocolo que define como cliente (o navegador) e servidor trocam mensagens. Quando você “consome uma API”, você está fazendo requisições HTTP e recebendo respostas HTTP.
Métodos mais usados
GET (buscar dados), POST (criar/enviar), PUT/PATCH (atualizar) e DELETE (remover). Além deles, o navegador pode disparar um OPTIONS automaticamente, especialmente em cenários com CORS (já chegaremos lá).
Status codes (códigos de resposta)
Aprender a ler status codes é meio caminho para depurar bugs:
200–299: sucesso (ex.: 200 OK, 201 Created, 204 No Content).
300–399: redirecionamentos (ex.: 301, 302).
400–499: erro do cliente (ex.: 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 429 Too Many Requests).
500–599: erro do servidor (ex.: 500 Internal Server Error).
Headers: o “contrato” invisível
Headers carregam metadados importantes: tipo do conteúdo, autorização, idioma, cache etc. Os mais comuns no dia a dia:
Content-Type: define o formato (ex.: application/json).
Accept: o que o cliente espera receber.
Authorization: tokens (Bearer) e credenciais.
Cache-Control: políticas de cache.
2) Consumindo APIs com fetch: exemplos práticos
O fetch é a API nativa do navegador para requisições. Ele retorna uma Promise, o que combina bem com async/await.
GET simples (buscar dados)
Exemplo de busca e conversão para JSON:
async function carregarProdutos() { const response = await fetch('https://api.exemplo.com/produtos'); if (!response.ok) { throw new Error(`Erro HTTP: ${response.status}`); } const data = await response.json(); return data; } async function criarPedido(pedido) { const response = await fetch('https://api.exemplo.com/pedidos', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify(pedido) }); if (!response.ok) { const texto = await response.text(); throw new Error(`Falha ao criar pedido (${response.status}): ${texto}`); } return response.json(); } async function buscarComTimeout(url, timeoutMs = 8000) { const controller = new AbortController(); const timer = setTimeout(() => controller.abort(), timeoutMs); try { const response = await fetch(url, { signal: controller.signal }); if (!response.ok) throw new Error(`HTTP ${response.status}`); return await response.json(); } finally { clearTimeout(timer); } } async function buscarPerfil(token) { const response = await fetch('https://api.exemplo.com/me', { headers: { 'Authorization': `Bearer ${token}`, 'Accept': 'application/json' } }); if (response.status === 401) { throw new Error('Não autorizado: faça login novamente.'); } if (!response.ok) { throw new Error(`Erro: ${response.status}`); } return response.json(); } await fetch('https://api.exemplo.com/me', { credentials: 'include' }); * ao mesmo tempo.response.ok e trate respostas não-JSON quando necessário.
Design Systems no Front-End: Como Criar Interfaces Consistentes, Escaláveis e Fáceis de Manter
Aprenda a criar Design Systems no front-end com tokens, componentes e documentação para interfaces consistentes e fáceis de manter.
CSS Moderno no Front-End: Layouts com Flexbox e Grid, Responsividade e Escalabilidade
Aprenda CSS moderno com Flexbox e Grid para criar layouts responsivos, escaláveis e fáceis de manter em projetos front-end.Aprenda CSS moderno com Flexbox e Grid para criar layouts responsivos, escaláveis e fáceis de manter em projetos front-end.
Acessibilidade no Front-End: Como Criar Sites Inclusivos com HTML, CSS e JavaScript
Aplique acessibilidade no front-end com semântica, teclado, contraste e ARIA para criar sites inclusivos com HTML, CSS e JS.
Otimizando o Desenvolvimento de Interfaces Dinâmicas com CodeIgniter
Crie interfaces web dinâmicas com CodeIgniter integrando Ajax, templates e boas práticas front-end para aplicações mais rápidas e organizadas.
Boas Práticas de Estruturação de Projetos com CodeIgniter: Mantenha Seu Código Organizado
Aprenda boas práticas de estruturação com CodeIgniter para manter seu projeto limpo, escalável e fácil de manter desde o início.
Personalizando Componentes com Bootstrap: Dicas e Boas Práticas
Aprenda como personalizar componentes do Bootstrap e criar interfaces únicas sem perder a estrutura do framework. Dicas práticas e boas práticas visuais.
Informática básica e Fundamentos
Excel, Word, LibreOffice e mais
Linguagens de programação ( Python, Ruby, Java )
Hardware e Suporte de TI
Lógica de programação
Inteligência Artificial e Ciência de Dados
Segurança da informação
Servidores Web e Redes de computadores
Programação de Aplicativos
Programação de Jogos
Banco de dados
Robótica e Automação
Ferramentas de TI
QA - Testes de software
Programação back-end
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Em geral, sabemos que conseguir uma excelente vaga no mercado de trabalho é um sonho para muita gente. Além disso, percebemos o quanto a tecnologia tem se desenvolvido nos últimos tempos, demandando por mais profissionais que saibam lidar com infraestruturas e sistemas mais modernos.
Nesse quesito, percebemos o quão eficiente o curso de desenvolvimento web pode ser, já que desenvolve o aluno para enfrentar os problemas mais atuais das empresas.
Antes de tudo, o curso de desenvolvimento web é uma área profissional que fica inteiramente responsável por oferecer uma solução informatizada a um determinado problema em questão, seja a criação de um aplicativo, de um software ou até mesmo um banco de dados.
Esses problemas são geralmente oriundos de empresas privadas, startups de tecnologia, ou até mesmo de uma instituição educacional que queira elaborar um aplicativo de marca própria para facilitar o estudo dos alunos.
Em geral, o profissional recém-formado nessa área vai criar, analisar, projetar, especificar, testar e documentar determinadas variações de manutenções de sistemas computacionais na web, além de softwares variados.
O curso de desenvolvimento de sistemas, conforme mencionado, oferece conteúdos relacionados à programação de sistemas e toda a sua vertente, habilitando o aluno para que possa trabalhar em diversos aspectos relacionados à infraestrutura tecnológica de empresas, instituições, órgãos, entre outros setores do mercado.
Nesse quesito, a Cursa oferece gratuitamente o curso de Desenvolvimento Web para alunos que desejam ingressar em um mercado de trabalho menos competitivo, e que é um setor que está só crescendo, especialmente em decorrência da modernidade. São vários módulos para desenvolver habilidades e competências necessárias para conseguir excelentes vagas nas empresas.
Devido a pandemia do novo coronavírus (Covid-19), podemos notar o quanto o comércio mudou. Por vias de segurança, e, até mesmo, pela necessidade de reduzir os casos de transmissão, chegamos ao isolamento social.
Nesse período, as empresas e instituições passaram a digitalizar suas atividades, a fim de conduzir os estudos através do meio digital. Com isso, notamos o quanto o EaD se desenvolveu ainda mais, e com a Cursa, não foi diferente.
Somente por percebermos o quanto a tecnologia está crescendo no mundo, isso por si só já responde a essa pergunta. Ou seja, as empresas estão integrando sistemas cada vez mais complexos em suas estruturas internas, e logo, demandam por profissionais que acompanham essas tendências tecnológicas e sabem conduzir esses sistemas da melhor forma.
E é exatamente isso que o curso de análise e desenvolvimento web oferece: habilidades e competências que todas as empresas exigem. Não é apenas um bom curso, mas também se trata de um curso que promove profissionais altamente demandados pelo mercado.
Já que estamos falando de um curso inteiramente ligado à tecnologia, oportunidades de trabalho é o que não faltam. O profissional recém-formado na área pode atuar em:
• Empresas;
• Startups;
• Agências de publicidade;
• Escolas;
• Universidades;
• Indústrias;
• Comércio em geral — pequenos negócios que possuem infraestrutura tecnológica simples, mas que precisam de profissionais habilitados na área para resolver pequenos problemas do dia a dia.
Ou seja, trata-se de uma profissão que atinge basicamente todos os setores do mercado.
Todos os nossos cursos são gratuitos do início ao fim, o estudando não paga nenhum tipo de taxa para estudar, por isso somos um plataforma de cursos acessível a todos.
Além de fazer o curso gratuitamente, você também recebe o Certificado de forma gratuita.
O certificado oferecido por nossa plataforma é reconhecido nacionalmente pela Lei nº 9.394/96 permitindo que as instituições de ensino livre disponibilizem cursos a nível profissionalizante de forma a prepararem o candidato para o mercado de trabalho.
Alguns de nossos cursos possuem exercícios produzidos exclusivamente para nossa plataforma, ajudando você a praticar os conhecimentos adquiridos no curso.
Somente baixando o aplicativo Cursa você tem acesso a receber o certificado digital de forma gratuita, além de diversas outras funcionalidades exclusivas, baixe na Google Play ou na App Store ( Apple ).
Ao todo, são mais de 1000 cursos, divididos entre mais de 400 categorias em 5 diferentes idiomas, onde para todos disponibilizamos o certificado digital gratuitamente.
Sobre o
Após concluir o curso você terá acesso gratuito ao certificado digital de conclusão de curso.
Como receber gratuitamente: Somente é possível emitir o certificado em nosso aplicativo, que pode ser baixado na Google Play ou App Store, ou seja, você pode fazer o curso online por aqui e usar o aplicativo somente para emitir o certificado. Sendo que você também pode fazer os cursos pelo app se desejar.
Em formato digital: Após concluir o curso e gerar o certificado pelo aplicativo, a imagem do mesmo será gerada na galeria de fotos do seu celular e também será enviada a seu e-mail.
Porque o certificado é importante: Você pode usá-lo para Horas Complementares da faculdade, para melhorar seu currículo, prova de títulos e entre diversas outras aplicações.
Base legal: Os cursos e certificados oferecidos aqui são baseados na Lei nº 9394/96, do Decreto Presidencial n° 5.154, de 23 de julho de 2004, Art. 1° e 3° e as normas do Ministério da Educação (MEC) pela Resolução CNE n° 04/99, Art. 11
Ver mais sobre o Certificado
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 9 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
O que estão falando sobre os cursos online gratuitos de Programação Front-End
POP Cine
Nem terminei de ver o curso todo já estou aprendendo cada comando e aprendendo cada vez mais, só tenho a agradecer por esse curso de valor
CursoHTML e CSS para iniciantes
Matheus Corrêa
Melhor curso gratuito que eu fiz até hoje!
CursoHTML completo
Daniel Marlon Rhendson da Silva Alves
curso muito bacana, mas na hora de responder sobre o margem no teste diz que margem serve para definir cor de fundo de um elemento , não entendi isto
CursoCSS completo
Videos incriveis Inscreva-se
Muito bom o curso,comecei ver por acaso,só não sabia que esse negócio de HTML vicia,obgd pelos ensinamentos ✨
CursoHTML e CSS para iniciantes
Victor Vieira Alexandre
achei util e interessante, Gustava Guanabra otimo professor, e muito simpatico!!!!!!!!!!!!!!!!!!!!!!
CursoPHP para iniciantes
Kauansinho014
só por ter diversos cursos grátis já merece meus parabéns pq várias e muitas pessoas não tem condições de pagar um curso
CursoJavascript
JOSÉ ROBERTO GONÇALVES
Adorei, cada dia aprendendo mais. Agora vou fazer junto o html 5
CursoProgramação com Javascript
Vitor Willian
Mano, que curso maravilhoso, já é a segunda vez que assisto
CursoHTML e CSS para iniciantes
Kauany Lopes
perfeito e muito bem explicado
CursoHTML e CSS para iniciantes
Marcos Oliveira
Gostei muito do curso bastante explicativo e didatico
CursoCSS