DevMedia

DevMedia Cursos

Curso online

Curso de Criação de web sites com Bootstrap

O objetivo deste treinamento é demonstrar como criar interfaces web utilizando framework Bootstrap. Em muitas ocasiões os desenvolvedores podem se beneficiar de frameworks para o desenvolvimento de aplicações, mas muitos projetistas de interface desconhecem a existência de códigos pré-prontos cuja finalidade é agilizar a criação de programação de interfaces. Vamos iniciar com o básico, demonstrando como configurar o ambiente de desenvolvimento e entendendo as noções de frameworks e mockups , que são projetos de interface. Estes projetos feitos de forma “rústica” são necessários para que o usuário entenda visualmente o nosso sistema, e não somente em ideias ou palavras. Após entendermos estes conceitos básicos, passaremos para o aprendizado da ferramenta em si, ou seja, criaremos interfaces utilizando o framework Twitter Bootstrap, incluindo recursos bastante interessantes que envolvem javascript e recursos de interface com o usuário, tais como menus, abas e demais elementos que fazem parte do framework.

  [VER MAIS DETALHES]


Avaliação
5545
Teste grátis Assinar Gerar certificado
  • Introdução ao Bootstrap

    • 1

      Introdução

      Nesta videoaula daremos início ao curso que tratará sobre o framework Twitter Bootstrap. Faremos uma apresentação sobre o autor, bem como as expectativas a cerca do curso, através de uma introdução teórica sobre o Framework.

      Assistir aula
    • 2

      Frameworks e Mockups

      Nesta videoaula iremos aprender um pouco mais sobre frameworks, buscando conceituar e entender o que são e para que servem. Em seguida vamos aprender e explanar o que são os mockups.

      Assistir aula
  • Layouts

    • 3

      Grids e Layouts

      Nesta aula estudaremos a necessidade e importância dos grids e layouts, sempre procurando entender de forma correta como usar e empregar. Entenderemos o que são grids e como framework implementa os mesmos.

      Assistir aula
    • 4

      Layouts Responsivos

      Nesta videoaula vamos estudar um pouco mais a fundo os conceitos e ferramentas envolvendo layouts responsivos. Demonstraremos o que são e para que servem.

      Assistir aula
  • Trabalhando com Tabelas

    • 5

      Conhecendo Tabelas

      Nesta aula vamos criar tabelas utilizando a formatação adequada do Twitter Bootstrap, bem como aprenderemos como utilizar os diversos recursos disponíveis no framework para deixar as nossas tabelas com uma aparência mais agradável.

      Assistir aula
  • Elementos de Navegação

    • 6

      Botões e Ícones

      O Bootstrap nos fornece grandes facilidades no que se refere a recursos prontos. Um desses recursos diz respeito a elementos de navegação e diversos outros, que podem ser formatados através do CSS já fornecido.

      Assistir aula
    • 7

      Grupos de Botões e Botões Dropdown

      Nesta vídeo aula vamos aprender como utilizar os recursos de grupos de botões, que nos permitem a criação de menus de forma bastante simplificada e fácil. Daremos prosseguimento aprendendo como criar nossos próprios menus do tipo Dropdown

      Assistir aula
  • Componentes

    • 8

      Barras de navegação e Abas

      Nessa videoaula daremos ênfase aos componentes de barras de navegação, ou seja, menus prontos de fácil utilização e implementação que podem ter aparências variadas, podendo ser tanto vertical como horizontal.

      Assistir aula
    • 9

      Navbar e breadcrumbs

      Nessa videoaula a respeito de componentes iremos estudar os elementos navbar, breadcrumbs e elementos de páginação. O elemento Navbar é utilizado para criar um cabeçalho para o nosso sistema.

      Assistir aula
    • 10

      Labels e badges

      Nessa videoaula vamos finalizar o assunto componentes. Desta forma vamos estudar os itens que ainda não vimos, como por exemplo, labels e badges, elemento hero-unit que por sua vez é utilizado para dar destaque a determinados itens publicitários, por exemplo.

      Assistir aula
  • Javascript

    • 11

      Integração com recursos de JavaScript

      Nessa videoaula começaremos os nossos estudos a cerca da integração do Bootstrap com recursos de JavaScript. Como em qualquer framework, a ideia principal é facilitar, e com este framework não é diferente, aprenderemos como criar a estrutura básica de uma janela model e como invocar as propriedades JavaScript

      Assistir aula
    • 12

      Scrollspy em JavaScript

      Nessa videoaula aprenderemos como utilizar o scrollspy, componente do Bootstrap que é responsável por recursos de scroll.

      Assistir aula
    • 13

      Utilizando jQuery – Tooltips e Popovers

      Nessa videoaula daremos ênfase especial aos tooltips e popovers, ferramentas de grande utilidade para salientar características de elementos, por exemplo links e botões, passando uma ideia geral sobre estes elementos.

      Assistir aula
    • 14

      Utilizando jQuery – Collapse / Accordion

      Nessa videoaula vamos estudar um componente bastante utilizado, mas que muitos desenvolvedores desconhecem, que é o elemento colapse, também conhecido como accordion.

      Assistir aula
    • 15

      Utilizando jQuery – Carousel

      Nessa videoaula vamos estudar um dos componentes mais utilizados em sites comerciais do momento, que é o carousel. Muitos desenvolvedores conhecem este componente por slider, sendo que o mesmo tem por finalidade rotacionar imagens.

      Assistir aula
  • Trabalhando com Formulários

    • 16

      Trabalhando com formulários

      Nessa videoaula vamos estudar os recursos fornecidos pelo Bootstrap que dizem respeito a interface de formulários. Vamos aprender as bases desses elementos, verificando as principais possibilidades dos mesmos, indo desde os formulários mais básicos até os formulários mais avançados.

      Assistir aula
    • 17

      Trabalhando com formulários horizontais

      Nessa videoaula vamos estudar alguns recursos mais avançados referentes ao framework. Vamos iniciar desenvolvendo um formulário do tipo horizontal, embora o resultado final seja um formulário orientado verticalmente. Na parte prática aprenderemos como criar um formulário visualmente mais bem elaborado, empregando diversos tipos de componentes disponíveis para a criação de formulários.

      Assistir aula
    • 18

      Extensões em Formulários

      Nessa videoaula vamos finalizar os nossos estudos a respeito dos elementos de formulários. Iremos finalizar este assunto utilizando alguns recursos de extensões do framework.

      Assistir aula
  • Criando um site com BootStrap

    • 20

      Configurações iniciais

      Nessa videoaula vamos começar a criar a nossa página inicial, onde configuraremos as linhas e colunas utilizando os recursos de grid já estudados anteriormente.

      Assistir aula
    • 21

      Menu superior e imagens rotativas

      Nessa videoaula continuaremos com o desenvolvimento prático de um website utilizando os recursos do framework Bootstrap. Desta vez prosseguiremos com as atividades de interface, onde criaremos o menu superior do site, utilizando recursos já vistos como por exemplo, os grupos de botões.

      Assistir aula
    • 22

      Projeto prático – Finalização do site

      Nessa videoaula finalizaremos o nosso site/projeto para a empresa fictícia. Na aula anterior deixamos a página inicial de nosso site praticamente pronto.

      Assistir aula
  • Criando um painel administrativo

    • 23

      Criando Painel Administrativo

      Nessa videoaula daremos prosseguimento aos nossos estudos de bootstrap. Desta vez teremos uma ênfase em layouts fluidos e layouts para sistemas. A ideia é iniciarmos a montagem de um layout para um painel administrativo.

      Assistir aula
    • 24

      Tela de Login

      Neste momento vamos finalizar e tela de login, criando o formulário necessário para que o usuário insira o seu login e senha, o link para recuperação de senha e o botão de acesso ao sistema.

      Assistir aula
    • 25

      Finalizando Projeto Prático

      Nessa videoaula finalizaremos o desenvolvimento de nosso projeto de criação de um layout para um painel administrativo. Vamos criar a estrutura de linhas e colunas fluidas necessárias. Essa é a última videoaula deste curso.

      Assistir aula
  • Código Fonte

    • Fontes - Arquivos de Instalação

      Nesse post você irá encontrar o material necessário para montar o ambiente do Curso de Criação de web sites com Bootstrap.

      Assistir aula