Curso de Design Responsivo
4.1 (28 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
953 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Curso de Design Responsivo to your Wishlist.

Add to Wishlist

Curso de Design Responsivo

Web Design Responsivo na prática
4.1 (28 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
953 students enrolled
Last updated 5/2017
Portuguese
Price: Free
Includes:
  • 8 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Desenvolver sites responsivos completo do zero sem frameworks
  • Criar layouts responsivos seguindo os padrões da W3C
  • Criar imagens e mídias flexiveis
  • Introdução básica ao uso do JavaScript e jQuery
  • Utilizar plugins jQuery
  • Marcação válida pela W3C com HTML5 e CSS3 Orientado a Objetos
View Curriculum
Requirements
  • Noções básicas de marcação HTML5 e CSS3.
  • Os pré-requisitos não são obrigatórios, mas eles dão uma base de parte do conhecimento necessário que se precisa ter para fazer esse curso.
Description

Aprenda a criar sites que se ajustam automaticamente a qualquer dispositivo independentemente do tamanho da tela ou resolução! Design Responsivo do jeito certo, válido pela W3C.

Você aprendera a desenvolver um projeto real do zero, sem utilizar frameworks para desenvolver seu próprio site responsivo reutilizável com seu próprio sistema de Grids e os conceitos do CSS orientado a objetos que serviram de base para criar inúmeras possibilidades de sites.

Aprenda na prática desenvolvendo sites com as mais novas técnicas de uma maneira simples fácil e eficiente.

Curso objetivo 100% na prática.

Who is the target audience?
  • Esse curso é perfeito para quem deseja aprender web design responsivo e criar sites para desktop, tablets e smartphones que se ajustam automaticamente ao tamanho da tela
Students Who Viewed This Course Also Viewed
Curriculum For This Course
27 Lectures
07:49:56
+
Iniciar aqui
27 Lectures 07:49:56

Neste curso você vai aprender a desenvolver um web site completo com todos os fundamentos e práticas do Web Design Responsivo do jeito correto, válido pela W3C.

Apresentação
11:20

Nessa vídeo aula vamos aprender como fazer o download, instalação e realizar as configurações básicas do IDE NetBeans.

Baixando e instalando a IDE NetBeans
09:04

Nessa vídeo aula vamos aprender como criar nosso projeto em HTML5, CSS3 e JavaScript no NetBeans, navegar pelo projeto criado, fazer o download das imagens do site e conhecer nossa estrutura HTML5 inicial.

Criando projeto HTML5, CSS3 e JavaScript no NetBeans
12:41

Nessa vídeo aula vamos aprender como criar um sistema de Grids CSS3 automático com 12 colunas utilizando um seletor CSS3 avançado. Trabalhar com seletores CSS é extremamente interessante. No inicio as coisas podem parecer complexas, mas de fato, é muito divertido quando você inicia seu desenvolvimento e vê as coisas tomando forma na sua frente e as infinitas possibilidades que os seletores nos oferecem.

Criando sistema de Grid CSS3 automático com 12 colunas
20:23

Nessa vídeo aula vamos criar o topo do nosso projeto, criar nosso CSS Reset e o Clearfix, estilos importantes e essenciais em nosso projeto.

Criando topo CSS Reset e Clearfix
13:52

Nessa vídeo aula vamos criar um formulário de busca simples para nosso projeto e realizar a estilização do campo de busca  e o botão que utilizara uma imagem em seu lugar.

Criando e estilizando formulário de busca
14:44

Nessa vídeo aula vamos aprender como criar um menu com submenu lateral, utilizando as tags padrões e a criar um botão para ativar o menu utilizando jQuery

Criando e estilizando menu com submenu lateral
26:20

Nessa vídeo aula vamos criar a sessão da galeria de imagens, realizar a marcação e a estilização da sessão e das imagens, além de utilizar um filtro CSS nas imagens da nossa galeria.

Criando sessão da galeria de imagens
12:03

Nessa vídeo aula vamos aprender como utilizar o plugin Fancybox, desde o download a configuração personalizada.

Utilizando a biblioteca Fancybox
21:17

Nessa vídeo aula vamos aprender como utilizar as fontes do Google Web Fonts em nossos projetos .

Utilizando fontes do Google Fonts
09:04

Nessa vídeo aula vamos aprender como utilizar os seletores first-child e last-child que também são conhecidos como pseudo-classes.

Utilizando seletores first-child e last-child
11:09

Nessa vídeo aula vamos criar a sessão de destaque do nosso projeto, utilizaremos poucas marcação, mas muitos estilos já usados e novos serão aplicados, além de ver o mesmo resultado em um site real online.

Criando sessão destaque
23:51

Nessa vídeo aula vamos aprender como criar tabelas com HTML e realizar a estilização dom cores alternadas utilizando CSS. De uma maneira geral, tabelas são uma maneira de exibir e organizar conteúdo. Facilitam, e muito, a vida de quem tem muita informação e seu uso, no dia-a-dia, são algo bem, mas bem extenso mesmo.

Criando tabelas e estilizando com cores alternadas
20:50

Nessa vídeo aula vamos cria e estilizar nossa sessão de conselhos, utilizaremos apenas marcações HTML que já utilizamos e propriedades CSS que nos já conhecemos .

Criando sessão conselhos
11:08

Nessa vídeo aula vamos marcar todo nosso rodapé com HTML5 utilizando a tag padrão footer e realizar toda a estilização com CSS3.

Marcando e estilizando rodapé
32:56

Nessa vídeo aula vamos aprender como criar e estilizar botões de diferentes tamanhos cores e características, e também conhecer a propriedade z-index uma propriedade muito importante para organização de elementos em nosso projeto.

Criando botões e conhecendo z-index
06:49

Nessa vídeo aula vamos aprender como criar um SlideShow de imagens utilizando um plugin do jQuery.

Criando SlideShow com plugin jQuery
18:16

Nessa vídeo aula vamos aprender como criar um efeito de rolagem suave em nossos links âncora fazendo-os rolar suavemente para seu destino ao invés de saltar instantaneamente. Muitos sites têm utilizado o recurso de rolagem suave com jQuery. O código é bem simples e o efeito, sofisticado.

Criando scroll suave em links ancora
07:39

Nessa vídeo aula vamos aprender como criar um botão de voltar ao topo para permitir os visitantes subam á parte superior do site facilmente. Este botão permanece em uma posição fixa no site, logo pode ser visto a todo momento, quando rolar o scroll para baixo e descer pela página.

Criando botão voltar ao topo
12:51

Nessa vídeo aula vamos criar e entender o funcionamento de formulários utilizando as novidades do HTML5.

Criando e entendendo formulários
01:02:02

Nessa vídeo aula vamos continuar aprendendo sobre formulários, complementaremos nosso formulário com campos não vistos e conheceremos um atributo muito interessante chamado pattern que nos permite validar os campos de formulário usando expressões regulares de acordo com as nossas necessidades.

Complementando e estilizando formulário
27:31

Nessa vídeo aula vamos aprender como aplicar a declaração CSS !important, conhecer suas vantagens e cuidados na sua utilização.

Aplicando a declaração CSS !important
07:55

Nessa vídeo aula vamos aprender como ajustar nosso site utilizando Media Queries de diferentes formas fazendo que o nosso site atenda diferentes tipos de dispositivos independente do tamanho de tela ou resolução.

Ajustando site com Media Queries
22:02

Nessa vídeo aula vamos aprender como criar uma janela modal utilizando o plugin do jQuery Fancybox e realizar a personalização da nossa janela conforme nossas necessidades.

Criando janela modal com Fancybox
11:53

Nessa vídeo aula vamos aprender como criar uma tela de loading, antes de carregar o conteúdo do site, ou seja, o usuário irá visualizar somente uma imagem gif ou um texto, até que o site esteja totalmente carregado.

Criando tela de loading antes de carregar o site com jQuery
16:42

Nessa aula vamos finalizar nosso projeto final, realizar algumas correções, conhecer dicas importantes para facilitar o trabalho de desenvolvimento front-end, além de conhecer exemplos de projetos reais desenvolvidos a partir dos conhecimentos adquiridos e a possibilidade de expansão do conhecimento.

Finalizando projeto com correções e dicas
19:57

Escondendo menu ao clicar nos links
05:37
About the Instructor
Ronaldo Aires da Silva
4.1 Average rating
27 Reviews
953 Students
1 Course
Programador Web

Instrutor e desenvolvedor de Sistemas Web, produtor de vídeo aulas para o YouTube. Formando em Tecnologia em Sistemas para Internet pela IFMT. Apaixonado por desenvolvimento web, sempre aprendendo para compartilhar conhecimento.

Focado em compartilhar conhecimento ensinando de uma maneira simples fácil e eficiente desenvolvendo projetos e exemplos reais com as mais novas tecnologias e novas tendências.