Desenvolvimento de sites responsivos com Bootstrap
3.8 (15 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.
112 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Desenvolvimento de sites responsivos com Bootstrap to your Wishlist.

Add to Wishlist

Desenvolvimento de sites responsivos com Bootstrap

Aprenda técnicas de criação de páginas web para qualquer tamanho de dispositivo usando o Bootstrap
3.8 (15 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.
112 students enrolled
Last updated 8/2017
Portuguese
Current price: $10 Original price: $30 Discount: 67% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 1 Supplemental Resource
  • 1 Coding exercise
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Criar sua página portfólio com colunas responsivas
  • Aprender as diferenças entre programar para celular e para desktop
  • Aprender a analisar sua página diretamente do browser utilizando o inspetor de elementos
  • Aprender as diferentes formas de adicionar CSS na sua página
  • Aprender a carregar scripts externos na sua página
  • Aprender o que é o Bootstrap e como utilizar suas funções CSS e JS
  • Aprender os elementos básicos que compõem uma página web feita em HTML
View Curriculum
Requirements
  • Computador com acesso a internet (Windows / Mac)
  • Editor de texto
Description

Hoje em dia o uso de dispositivos móveis está superando o uso de computadores. Com isso, é essencial que o conteúdo oferecido na Internet esteja com um visual agradável e ajustável para tanto smartphones quanto grandes monitores. Para isso temos muitas ferramentas disponíveis que facilitam a vida do desenvolvedor na hora de programar multi-plataforma. Isso mesmo, estamos falando de Bootstrap!

Este curso ensina os fundamentos de desenvolvimento web com HTML e CSS, além de mostrar como criar o seu site utilizando o framework Bootstrap. O aluno aprenderá conceitos importantes sobre HTML e CSS, além de boas práticas e metodologias mais utilizadas. Também aprenderá a utilizar ferramentas do navegador para analisar seu trabalho e editar rapidamente uma página.

O aluno vai aprender os fundamentos básicos de HTML e CSS, e vai aprender a adicionar o Bootstrap e suas principais classes utilitárias, como todo Grid Stytem, alinhamento de linhas, cores, margens, cards, e mais.

Who is the target audience?
  • Interessados em desenvolvimento web
  • Iniciantes na linguagem de programação JavaScript, HTML ou CSS
  • Interessados em Aprender Bootstrap (4)
Students Who Viewed This Course Also Viewed
Curriculum For This Course
22 Lectures
03:15:23
+
Introdução
3 Lectures 25:26

Nesta aula apresentamos o conteúdo que será visto no curso, bem como ferramentas que serão utilizadas. Falarei brevemente sobre meu perfil e um pouco de motivação para o curso.

Preview 08:35

Nesta aula vamos falar sobre a linguagem CSS para estilizar páginas.

Tópicos:

  • História do CSS
  • Qual a utilidade do CSS
  • Elementos básicos do CSS: atributos, valores, classes, IDs
  • exemplos de atributos e unidades de medida para valores
Conceitos básicos de CSS
06:57

Nesta aula vamos aprender o que é e como surgui o Bootstrap. Alguns pontos dessa aula:

  • O que é o Bootstrap
  • Quais as vantagens de se usar o Bootstrap
  • O que compõe o kit Bootstrap
  • Alguns exemplos de sites que usam Bootstrap
Conceitos básicos do Bootstrap
09:54

Você aprendeu tudo da primeira seção? Então teste seu aprendizado aqui! 

Questionário - CSS e HTML básico
5 questions
+
CSS e HTML básico
4 Lectures 37:14

Nesta aula vamos aprender a forma mais simples de adicionar CSS na página, através do inline style.

  • Explicação de como estilos são aplicados em páginas web
  • Demonstração passo a passo de estilo inline sendo aplicado em um elemento
Preview 08:23

Nesta aula vamos aprender a adicionar estilos em uma página através da tag style .

  • Explicação da style tag para adicionar estilos
  • Demonstração passo a passo de um grupo de estilos sendo aplicados em uma página via tag style
  • Resumo das vantagens ou desvantagens de se usar essa forma de CSS
Estilizando a página - CSS section
09:20

Nesta aula vamos aprender a terceira e última forma de adicionar estilos em uma página: o arquivo CSS.


  • Demonstração passo a passo de criação de um arquivo CSS simples
  • Como referenciar o novo arquivo CSS na minha página
  • Resumo das vantagens ou desvantagens de se usar essa forma de CSS
Estilizando a página - arquivo CSS
09:46

Nessa aula vamos aprender:

  • A baixar os arquivos do site do Bootstrap
  • A definição de HTML e suas funcionalidades
  • Como exibir todo o Código Fonte de uma Página
  • O que são tags e atributos, e como elas são inseridas
  • As tags essenciais de uma página HTML
Fundamentos do HTML
09:45

Neste Quiz você tem a chance de testar suas habilidades na área de configuração de CSS para seu site, e sobre temas comuns da linguagem HTML.

Questionário - CSS e HTML básico
7 questions
+
Utilizando Bootstrap
6 Lectures 58:21

Nessa aula vamos utilizar os conceitos aprendidos até agora e começar a montar uma página responsiva.

  • Vamos fazer o download do Bootstrap e adicionar os arquivos na página
  • Por que há arquivos tipo 'min'?
  • Vamos criar as pastas e adicionar os arquivos no local correto
  • Vamos criar um elemento e comprovar os estilos do Bootstrap
Instalando o Bootstrap
09:48

Nesta aula vamos iniciar a criação de uma pequena tabela de endereços com algumas informações sobre usuários.

  • Vamos testar alguns elementos HTML, como tipos diferentes de cabeçalho
  • Vamos aprender a criar elementos que ocupam uma linha inteira ou que se agrupam entre si
O Gerenciador de Endereços
09:47

Nesta aula, vamos colocar o aprendizado em CSS em ação e colorir um pouco nossa tabela de endereços.

  • Vamos aprender a adicionar nosso arquivo CSS junto ao CSS do Bootstrap
  • Aprenderemos o sistema RGB e como escolher a cor ideal
  • Vamos criar algumas classes específicas na nossa tabela
CSS em prática no gerenciador de Endereços
09:51

Nesta aula:

  • Vamos dar um pouco de estilo na nossa lista de endereços
  • Aprenderemos a introduzir o Grid System do Bootstrap
  • Vamos aprender como funcionam as 12 colunas e como organizar seus elementos
  • Vamos entender melhor como diferenciar quais tamanhos de tela
Bootstrap em prática: Grid System Parte 1
09:47

Vamos continuar praticando nossas habilidades em Grid System!

  • Aprenderemos a remover certos elementos da tabela para certos tipos de tela
  • Vários exemplos de modificação da tabela, para praticar
  • Algumas classes de ajuda do Bootstrap são apresentadas, com CSS do navegador e do Bootstrap
Bootstrap em prática: Grid System Parte 2
09:23

Na terceira e última parte do treino de Grid System:

  • Vamos finalizar nossa tabela e especificar um design para telas de celulares.
  • Vamos aprender a analisar seu código em tempo real com o inspetor de elementos do navegador
  • Algumas dicas gerais do editor de texto
Bootstrap em prática: Utilizando o inspetor de elementos
09:45

Este é seu teste final! Vamos ver se você entendeu mesmo como o Grid System funciona? Se não for bem, não desanime, confira os vídeos mais uma vez! Boa sorte!

Questionário - Bootstrap e Grid System
6 questions

Tabela Simples
1 question
+
Revisão
1 Lecture 09:46

Na última aula, vamos revisar tudo que foi aprendido nesse curso. 

  • BÔNUS: Como conteúdo extra vamos aprender mais alguns truques para simular o seu site no inspetor de elementos
  • Uma pequena motivação em várias outras ferramentas do Bootstrap que podem ser incluídas no site, como ícones e a biblioteca javascript.
Revisão e Conteúdo Extra: media Query
09:46
+
Bootstrap Avançado
5 Lectures 36:02
Instalando Bootstrap 4
05:12

Controlando colunas com classe col e container
07:50

align-self, align-items, justify
06:12

Tether: tether.io

Criando um modal
08:31

Navbar: Barra de navegação
08:17
+
Criando um site portfólio
3 Lectures 28:34
Header
05:07

Conteúdo
13:45

Nessa aula final do portfólio, vamos aprender algumas classes utilitárias do Bootstrap e finalizar o rodapé.

Rodapé
09:42
About the Instructor
Arthur dos Santos Dias
4.5 Average rating
43 Reviews
294 Students
3 Courses
Web Developer

Sou formado em Engenharia da Informação pela Universidade de Ciências aplicadas em Hamburgo, Alemanha.

Atuo profissionalmente como Desenvolvedor Web especializado em Front End em uma empresa de consultoria renomada na Alemanha e no exterior. Trabalhei em diversos projetos com foco em digitalizar empresas tradicionais e aprimorar seus resultados. 

Iniciei minha carreira como estagiário em Java ainda no Brasil, e após ser selecionado para um intercâmbio na Alemanha, tive minha primeira experiência com Desenvolvimento web. Iniciei com PHP mas logo me apaixonei por javaScript. Há 5 anos trabalho com o framework Angular e constantemente me desafio a experimentar novas tecnologias.

Algumas das razões porque eu amo o que faço:

- O que mais me motiva a seguir esse caminho é a velocidade em que o cenário muda. Todos os dias pessoas trabalham e melhoram soluções para programar websites e aplicativos. Muito raramente você vai encontrar um problema sem solução, pois a comunidade cresce a cada dia mais.

- JavaScript é uma linguagem extremamente flexível. Antigamente era usado apenas para scripts no cliente. Hoje em dia é muito mais do que isso. JavaScript se tornou uma ótima solução para programar servidores, com frameworks como Node. Com JavaScript é possível criar aplicativos híbridos,  que rodam em dispositivos Android e iOS com o mesmo código. Isto não é possível de se alcançar quando se programa nativo para essas plataformas.

- Desenvolvimento Front End é fácil de começar a aprender! Com poucas horas uma pessoa sem conhecimento algum de programação consegue criar um simples formulário ou um site pessoal de imagens por exemplo. 

- Ao mesmo tempo que flexível, JavaScript é completo e consegue resolver  problemas complexos de sua aplicação. Há muito o que se aprender com a linguagem, e com experiência você aprende a usar boas práticas e direcionar seu código de forma optimal.


Esses são apenas alguns dos motivos pelos quais eu ❤︎ WebDev.