Curso

Criação de web sites com Bootstrap

Este curso faz parte da Formação Front-end web

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.

Avaliação

Clique para avaliar o curso!
Criação de web sites com Bootstrap
5 5 46
Iniciar curso Assinar curso Certificado
Aulas: 25 vídeos Carga Horária: 25 horas
Check Certificado Certificado Marcar como favorito (168)

Para obter a contagem de carga horária do curso levamos em consideração que cada aula possui, em média, a duração técnica de uma hora - que contém o tempo de acompanhamento, codificação, assimilação do aluno além do próprio tempo total do vídeo.

Conteúdo programático

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
19

Criando um projeto Prático com Bootstrap

Nessa videoaula vamos iniciar um projeto prático, simulando como se estivéssemos trabalhando em uma empresa de desenvolvimento.

Assistir aula
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 - Código Fonte Completo

Nesse post você encontrará o código fonte completo do Curso de Criação de web sites com Bootstrap.

Assistir aula

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

Sobre o autor

Jaison Dairon Ebertz Schmidt - DevMedia Space Jaison Dairon Ebertz Schmidt

Bacharel em Ciência da Computação pela Universidade de Passo Fundo. proprietário da Webb House. Trabalha a aproximadamente 14 anos com tecnologia Web. Site pessoal: www.jaison.com.br

Como adquirir este curso ?

Nosso objetivo é atender as suas necessidades de forma eficiente e econômica.

Com a assinatura DevMedia MVP você paga apenas R$ 69,90 por mês e tem acesso a todos os cursos - além de todos os canais de conteúdo!

Assine