1
00:00:03,260 --> 00:00:09,800
Bem-vindo ao front-end Web UI Frameworks and Tools: Bootstrap 4.

2
00:00:09,800 --> 00:00:13,565
Estou feliz que você decidiu se juntar a este curso para aprender

3
00:00:13,565 --> 00:00:18,265
sobre o front-end Web UI Framework mais popular: Bootstrap.

4
00:00:18,265 --> 00:00:20,995
Vamos olhar para vários aspectos do Bootstrap.

5
00:00:20,995 --> 00:00:29,520
Através de vários exemplos, você aprenderá fazendo exercícios como parte deste curso.

6
00:00:29,520 --> 00:00:32,900
Vamos ver alguns detalhes a seguir.

7
00:00:32,970 --> 00:00:35,890
Antes de iniciar este curso,

8
00:00:35,890 --> 00:00:38,760
certifique-se de que você tem antecedentes suficientes para

9
00:00:38,760 --> 00:00:41,625
ser capaz de ter sucesso neste curso.

10
00:00:41,625 --> 00:00:44,455
Você deve ter um bom conhecimento de HTML

11
00:00:44,455 --> 00:00:48,920
, CSS e JavaScript antes de iniciar o curso.

12
00:00:48,920 --> 00:00:54,225
Do meu ponto de vista, web design e desenvolvimento consiste em dois aspectos:

13
00:00:54,225 --> 00:00:58,320
um é o design do site e a página web,

14
00:00:58,320 --> 00:01:04,610
o segundo é a construção e implantação real da própria página web.

15
00:01:04,610 --> 00:01:06,845
Do ponto de vista do design,

16
00:01:06,845 --> 00:01:13,625
o que quero dizer é o design da interface do usuário e da experiência do usuário,

17
00:01:13,625 --> 00:01:16,815
o design visual, a prototipagem,

18
00:01:16,815 --> 00:01:20,164
os elementos de cores,

19
00:01:20,164 --> 00:01:23,815
gráficos e animação que podem ser de interesse.

20
00:01:23,815 --> 00:01:29,645
Nesta especialização, não estamos olhando para este aspecto do desenvolvimento web.

21
00:01:29,645 --> 00:01:32,650
Em vez disso, estamos olhando para esse segundo aspecto,

22
00:01:32,650 --> 00:01:34,680
que é o desenvolvimento, construção

23
00:01:34,680 --> 00:01:40,825
e implantação de sites e páginas da web, usando tecnologias

24
00:01:40,825 --> 00:01:45,190
como o front-end web UI frameworks como Bootstrap,

25
00:01:45,190 --> 00:01:52,030
talvez framework JavaScript como Angular ou uma biblioteca como React

26
00:01:52,030 --> 00:01:55,700
e híbrido mobile frameworks para projetar

27
00:01:55,700 --> 00:02:00,950
aplicativos móveis e também desenvolvimento do lado do servidor usando Node,

28
00:02:00,950 --> 00:02:06,670
Express, MongoDB, a pilha principal em mais detalhes.

29
00:02:06,670 --> 00:02:09,530
Se você está olhando para a Especialização,

30
00:02:09,530 --> 00:02:13,035
pensando sobre o aspecto de design do site,

31
00:02:13,035 --> 00:02:16,260
então você pode querer repensar.

32
00:02:16,260 --> 00:02:19,360
Esta especialização concentra-se

33
00:02:19,360 --> 00:02:25,115
no desenvolvimento e implantação de páginas web e web,

34
00:02:25,115 --> 00:02:31,065
um conhecimento puramente técnico sobre o uso de HTML

35
00:02:31,065 --> 00:02:37,310
, CSS e habilidades baseadas em JavaScript para o desenvolvimento real de sites.

36
00:02:37,310 --> 00:02:43,080
Você também provavelmente está se perguntando sobre o que se entende por desenvolvimento web de pilha completa.

37
00:02:43,080 --> 00:02:48,385
Analisaremos mais detalhes do desenvolvimento da web de pilha completa na próxima lição.

38
00:02:48,385 --> 00:02:52,835
Em particular, se você estiver observando como este curso está

39
00:02:52,835 --> 00:02:57,665
posicionado no contexto geral do desenvolvimento web de pilha completa,

40
00:02:57,665 --> 00:03:02,790
neste curso, estamos lidando com o desenvolvimento de interface web front-end.

41
00:03:02,790 --> 00:03:07,565
Em particular, o UI Framework Bootstrap 4.

42
00:03:07,565 --> 00:03:10,245
Estaremos analisando os aspectos restantes do

43
00:03:10,245 --> 00:03:15,845
desenvolvimento web de pilha completa no resto desta especialização.

44
00:03:15,845 --> 00:03:19,640
Este curso analisa o Bootstrap em grande detalhe.

45
00:03:19,640 --> 00:03:23,640
Nós também vamos olhar para web design responsivo e como Bootstrap suporta

46
00:03:23,640 --> 00:03:27,750
web design responsivo através do sistema Bootstrap Grid.

47
00:03:27,750 --> 00:03:33,050
Vamos olhar para os componentes baseados em CSS e JavaScript no Bootstrap e como você

48
00:03:33,050 --> 00:03:38,660
pode fazer uso deles na construção de seu site e suas páginas da web.

49
00:03:38,660 --> 00:03:45,200
Ao longo do caminho, aprenderemos sobre esse desenvolvimento web usando a linha de comando.

50
00:03:45,200 --> 00:03:48,570
Então, vamos aprender muitas ferramentas da web que são

51
00:03:48,570 --> 00:03:52,635
baseadas na linha de comando e no ecossistema Node.js.

52
00:03:52,635 --> 00:03:54,630
Vamos rever brevemente o Git,

53
00:03:54,630 --> 00:04:03,355
adicionar Node.js e olhar para ferramentas baseadas em Noje.js, incluindo corredores de tarefas como Grunt e Gulp.

54
00:04:03,355 --> 00:04:08,235
Este curso, em si, está estruturado em módulos completos.

55
00:04:08,235 --> 00:04:12,195
Cada módulo corresponde aproximadamente a uma semana de trabalho.

56
00:04:12,195 --> 00:04:13,830
No primeiro módulo,

57
00:04:13,830 --> 00:04:17,795
teremos a visão geral do desenvolvimento web de pilha completa,

58
00:04:17,795 --> 00:04:22,895
então você terá uma introdução rápida ao Git e Node.js.

59
00:04:22,895 --> 00:04:29,450
Em seguida, vamos apresentá-lo ao Bootstrap e, em seguida, rever o sistema Bootstrap Grid.

60
00:04:29,450 --> 00:04:34,180
Isso o levará até a primeira tarefa neste curso.

61
00:04:34,180 --> 00:04:38,520
O segundo módulo lida com componentes CSS Bootstrap.

62
00:04:38,520 --> 00:04:42,445
Vamos olhar para o design da barra de navegação Bootstrap

63
00:04:42,445 --> 00:04:46,875
e como podemos usá-lo para suportar a navegação.

64
00:04:46,875 --> 00:04:51,565
Vamos olhar para a entrada do usuário através de

65
00:04:51,565 --> 00:04:58,649
botões e formulários, em seguida, vamos olhar para como podemos exibir conteúdo usando tabelas e cartões.

66
00:04:58,649 --> 00:05:06,340
Em seguida, veremos como podemos incluir imagens e mídia em nossa página da Web usando imagens,

67
00:05:06,340 --> 00:05:08,590
miniaturas e objetos de mídia.

68
00:05:08,590 --> 00:05:13,095
E, finalmente, analisamos como alertamos os usuários usando tags,

69
00:05:13,095 --> 00:05:14,680
alertas e barras de progresso.

70
00:05:14,680 --> 00:05:19,615
Isto deve levar-te à tua segunda missão.

71
00:05:19,615 --> 00:05:25,425
O terceiro módulo lida com componentes JavaScript Bootstrap.

72
00:05:25,425 --> 00:05:27,980
Vamos olhar para a visão geral de

73
00:05:27,980 --> 00:05:32,930
como os componentes JavaScript Bootstrap funcionam, vamos revisar guias,

74
00:05:32,930 --> 00:05:34,635
pílulas e navegação com guias,

75
00:05:34,635 --> 00:05:40,874
então veremos como colapso e acordeão podem ser usados para mostrar e ocultar conteúdo.

76
00:05:40,874 --> 00:05:43,730
E então analisaremos o uso de dicas de ferramentas,

77
00:05:43,730 --> 00:05:48,610
popovers e modais para revelar o conteúdo a ser exibido em sua página.

78
00:05:48,610 --> 00:05:52,230
E então vamos olhar para o componente carrossel,

79
00:05:52,230 --> 00:05:58,235
que permite que você exiba informações deslizantes em sua página da web.

80
00:05:58,235 --> 00:06:02,670
Isso deve levá-lo até a terceira tarefa neste curso.

81
00:06:02,670 --> 00:06:11,625
O último módulo lida com Bootstrap e o jQuery e várias ferramentas de desenvolvimento.

82
00:06:11,625 --> 00:06:17,070
Vamos, em particular, olhar para como Bootstrap e jQuery interagem e como você pode

83
00:06:17,070 --> 00:06:23,535
escrever código jQuery e JavaScript para controlar seu componente JavaScript Bootstrap.

84
00:06:23,535 --> 00:06:28,230
Analisamos os vários métodos que são suportados pelos componentes JavaScript do Bootstrap,

85
00:06:28,230 --> 00:06:31,510
que podem ser aproveitados para escrever

86
00:06:31,510 --> 00:06:35,735
código JavaScript para controlar o comportamento desses componentes.

87
00:06:35,735 --> 00:06:44,509
Em seguida, vamos rever CSS linguagem de pré-processamento é como LESS e Sass.

88
00:06:44,509 --> 00:06:49,675
Então, finalmente, veremos como podemos construir e implantar nosso site

89
00:06:49,675 --> 00:06:57,345
usando scripts NPM ou corredores de tarefas como Grunt e Gulp.

90
00:06:57,345 --> 00:07:03,485
Isso deve levá-lo até a tarefa final neste curso.

91
00:07:03,485 --> 00:07:06,990
Espero que você se divirta muito fazendo

92
00:07:06,990 --> 00:07:12,920
as várias partes deste curso e também aproveite os exercícios que você

93
00:07:12,920 --> 00:07:16,850
encontrará em cada etapa que lhe permitem

94
00:07:16,850 --> 00:07:23,430
entender melhor vários aspectos do framework web UI Bootstrap.