Imagem do Curso gratuito Design responsivo para sites

Curso online gratuitoDesign responsivo para sites

Duração do curso online: 1 horas e 17 minutos

Novo curso

Aprenda a criar sites responsivos com técnicas de Mobile First, viewports, jQuery e CSS otimizado neste curso gratuito de Front-End do Node Studio Treinamentos.

Neste curso gratuito, aprenda sobre

  • Introdução ao Design Responsivo e Preparação do Ambiente
  • Conceitos Iniciais de Mobile First e Estrutura do Layout
  • Interatividade do Menu e Construção das Seções Principais
  • Newsletter, Rodapé e Organização do CSS
  • Media Types, Breakpoints e Finalização do Layout Responsivo

Descrição do curso

O curso "Design Responsivo para Sites" oferecido é uma oportunidade incrível para quem deseja se aprofundar no universo do design responsivo, um dos pilares da moderna programação front-end. Com uma duração total de 1 hora e 17 minutos, este curso proporciona uma abordagem prática e direta aos principais conceitos e técnicas necessárias para criar sites que se adaptam perfeitamente a qualquer dispositivo.

Embora o curso ainda não possua avaliações, a estrutura de ensino oferecida é de alta qualidade. Pertencente à categoria Informática (TI) e subcategoria Programação Front-End, ele abrange uma vasta gama de tópicos cruciais para a criação de layouts fluidos e otimizados. Desde a preparação do ambiente inicial até a implementação de breakpoints e otimização do CSS, cada módulo é projetado para oferecer uma compreensão clara e detalhada dos processos-chave envolvidos.

O curso é iniciado com a preparação do ambiente de desenvolvimento, seguido pelo início da marcação HTML básica. Os alunos aprenderão a importância da Viewport e como a abordagem Mobile First pode influenciar todo o design do site. Elementos fundamentais como Header, Logo e Nav são abordados, não apenas em sua criação básica, mas também na implementação de funcionalidades avançadas utilizando Jquery para mostrar e esconder menus.

Além disso, o curso se aprofunda na criação de Banners Horizontais, seção principal de serviços e uma seção destinada à newsletter. A estrutura do site é completa com a adição de um Footer adequado. Para garantir que o site não apenas funcione bem, mas tenha um desempenho eficiente, o curso inclui uma sessão dedicada à otimização do CSS.

O curso vai além ao explicar Media Types e a crucial implementação de Breakpoints. Estes tópicos são divididos em várias partes para garantir uma compreensão passo a passo e permitir a adaptação adequada do site a diferentes tamanhos de tela e dispositivos. Tudo isso culmina em uma abordagem prática e aplicável que habilita os alunos a criar sites verdadeiramente responsivos.

Em suma, "Design Responsivo para Sites" é um curso essencial para qualquer desenvolvedor front-end que deseje aprimorar suas habilidades e adaptar suas criações às necessidades modernas da web. A proposta é oferecer um conteúdo de alta qualidade, visando capacitar seus alunos para desafios reais do mercado, promovendo soluções eficientes e inovadoras no desenvolvimento web. Inscreva-se e descubra como você pode transformar e elevar o design dos seus projetos com técnicas responsivas avançadas.

Conteúdo do curso

  • Aula em vídeo: Design Responsivo - Aula 01 - Preparando Ambiente 03m
  • Exercício: _O que é design responsivo?
  • Aula em vídeo: Design Responsivo - Aula 02 - Iniciando Marcação 03m
  • Exercício: _Qual é a função da tag meta name description em uma página HTML?
  • Aula em vídeo: Design Responsivo - Aula 03 - Viewport 02m
  • Exercício: _Qual é a importância das meta tags em um site responsivo?
  • Aula em vídeo: Design Responsivo - Aula 04 - Mobile First 03m
  • Exercício: _O que é o conceito de "mobile first"?
  • Aula em vídeo: Design Responsivo - Aula 05 - Header e Logo 02m
  • Exercício: O que é a prática 'mobile first' no desenvolvimento de páginas web?
  • Aula em vídeo: Design Responsivo - Aula 06 - Nav 06m
  • Exercício: Qual é a função do ícone dentro do botão criado no menu?
  • Aula em vídeo: Design Responsivo - Aula 07 - Nav (Jquery / Show e Hide) 02m
  • Exercício: _Qual biblioteca é necessária para controlar os eventos de abertura e fechamento do menu no design responsivo do site?
  • Aula em vídeo: Design Responsivo - Aula 08 - Banner Horizontal 07m
  • Exercício: Quais são algumas características de estilização mencionadas no vídeo para o banner e seus componentes?
  • Aula em vídeo: Design Responsivo - Aula 09 - Main (Serviços) 08m
  • Exercício: Como modificar o botão 'btn Close' em um projeto de HTML?
  • Aula em vídeo: Design Responsivo - Aula 10 - Section (Newsletter) 03m
  • Exercício: Qual é a estrutura básica criada para a seção de newsletter no projeto descrito?
  • Aula em vídeo: Design Responsivo - Aula 11 - Footer 05m
  • Exercício: Qual o objetivo do uso das classes no desenvolvimento do rodapé mencionado no texto?
  • Aula em vídeo: Design Responsivo - Aula 12 - Otimizando o CSS 09m
  • Exercício: Qual é a principal abordagem para otimizar a repetição de código em CSS apresentada?
  • Aula em vídeo: Design Responsivo - Aula 13 - Media Types 02m
  • Exercício: _Qual é o media type utilizado para direcionar um bloco CSS para impressoras?
  • Aula em vídeo: Design Responsivo - Aula 14 - Breakpoints (Parte 01) 03m
  • Exercício: _Qual é a ideia do conceito de "mobile first" na criação de break points?
  • Aula em vídeo: Design Responsivo - Aula 15 - Breakpoints (Parte 02) 09m
  • Exercício: Qual abordagem foi utilizada para ajustar a largura dos elementos de serviço na página?
  • Aula em vídeo: Design Responsivo - Aula 16 - Breakpoints (Final) 04m
  • Exercício: _Qual a propriedade utilizada para deixar o menu na horizontal?

Este curso gratuito inclui:

1 horas e 17 minutos de curso online em vídeo

Certificado digital de conclusão de curso ( Gratuito )

Exercícios para treinar seus conhecimentos

100% gratuito, do conteúdo ao certificado

Pronto para começar?Baixe o app e comece hoje mesmo.

Instale o app agora

para ter acesso ao curso
Ícone representando cursos de tecnologia e negócios

+ de 5.000 cursos gratuitos

Programação, Inglês, Marketing Digital e muito mais! Aprenda o que quiser, gratuitamente.

Ícone de calendário com alvo representando planejamento de estudos

Plano de estudos com IA

A Inteligência Artificial do nosso aplicativo pode criar um cronograma de estudos para o curso que você escolher.

Ícone de profissional representando carreira e negócios

Do zero ao Sucesso profissional

Melhore seu currículo com nosso Certificado gratuito e depois utilize nossa Inteligência Artificial para buscar seu emprego dos sonhos.

Você também pode utilizar o QR Code ou os Links abaixo

QR Code - Baixar Cursa - Cursos Online

Mais cursos gratuitos em Programação Front-End

Baixe o Aplicativo agora para ter acesso a + de 3300 cursos gratuitos, exercícios, certificado e muito conteúdo sem pagar nada!

  • Cursos online 100% gratuitos do início ao fim

    Milhares de cursos online em vídeo, ebooks e áudiobooks.

  • Mais de 48 mil exercícios gratuitos

    Para testar seus conhecimentos no decorrer dos cursos online

  • Certificado Digital gratuito válido em todo o Brasil

    Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail

Aplicativo Cursa na tela de ebook, na tela de curso em vídeo e na tela de exercícios do curso, mais o certificado de conclusão de curso

+ 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