1
00:00:04,040 --> 00:00:09,465
É hora da sua primeira tarefa neste curso.

2
00:00:09,465 --> 00:00:10,975
Na primeira atribuição,

3
00:00:10,975 --> 00:00:18,605
vamos fornecer-lhe a página aboutus.html sem estilo.

4
00:00:18,605 --> 00:00:22,130
O arquivo zip que contém essa

5
00:00:22,130 --> 00:00:25,670
página aboutus.html está disponível nas instruções de atribuição.

6
00:00:25,670 --> 00:00:30,530
Então você precisa baixar a página e, em seguida, mover essa página para a sua pasta con Fusion.

7
00:00:30,530 --> 00:00:33,060
Depois disso, você aplicará

8
00:00:33,060 --> 00:00:40,970
classes Bootstrap e a grade Bootstrap Flexbox para estilizar a página, em

9
00:00:41,110 --> 00:00:47,780
seguida, você move a página para a pasta Con Fusion,

10
00:00:47,780 --> 00:00:52,095
então você pode visualizar a página em seu navegador digitando

11
00:00:52,095 --> 00:01:01,810
localhost:3000/aboutus.html e seu servidor de compilação luz até a página aboutus.html,

12
00:01:01,810 --> 00:01:05,310
então esta é a única maneira que você pode obter para ver a página.

13
00:01:05,310 --> 00:01:06,545
Então, para começar,

14
00:01:06,545 --> 00:01:08,775
a página vai ficar assim,

15
00:01:08,775 --> 00:01:12,520
uma página completamente Unstyle que apenas contém conteúdo.

16
00:01:12,520 --> 00:01:20,165
Agora seu trabalho é passar por três tarefas, a fim de formatar esta página.

17
00:01:20,165 --> 00:01:23,245
Vejamos as três tarefas com mais detalhes.

18
00:01:23,245 --> 00:01:26,890
Sua primeira tarefa é aplicar

19
00:01:26,890 --> 00:01:32,850
o CSS Bootstraps e as classes Javascript para a

20
00:01:32,850 --> 00:01:42,415
página aboutus.html para que esta página seja instantaneamente transformada nesta página,

21
00:01:42,415 --> 00:01:48,470
onde assim que você adicionar as classes Bootstraps CSS e JavaScript,

22
00:01:48,470 --> 00:01:54,115
o cabeçalho e rodapé serão formatados automaticamente corretamente,

23
00:01:54,115 --> 00:01:59,170
porque eu simplesmente copiei o cabeçalho no rodapé da página index.html para

24
00:01:59,170 --> 00:02:05,140
esta página e deixei toda a formatação Bootstrap como tal,

25
00:02:05,140 --> 00:02:10,955
mas o conteúdo real da página ainda é deixado sem estilo.

26
00:02:10,955 --> 00:02:14,580
Então, agora, como segunda tarefa,

27
00:02:14,580 --> 00:02:19,580
você vai aplicar a grade Bootstraps Flexbox incluindo o Container,

28
00:02:19,580 --> 00:02:23,190
as linhas e as classes de coluna a

29
00:02:23,190 --> 00:02:28,430
este conteúdo ou à página para que você possa estilizá-lo corretamente.

30
00:02:28,430 --> 00:02:30,345
Agora, quando aplicar as classes,

31
00:02:30,345 --> 00:02:36,430
você vai aplicar as classes de linha e coluna para o aboutus para apenas deixá-lo como tal.

32
00:02:36,430 --> 00:02:40,390
Em seguida, você vai aplicar as classes de linha e coluna para

33
00:02:40,390 --> 00:02:45,445
este conteúdo para que este conteúdo ocupe apenas metade da tela

34
00:02:45,445 --> 00:02:48,740
e, em seguida, você vai aplicar as classes de linha e coluna para

35
00:02:48,740 --> 00:02:53,245
este conteúdo de modo que tem ocupa toda a largura da tela.

36
00:02:53,245 --> 00:03:00,300
Então, escolha as classes de linha e coluna corretamente para aplicar a isso.

37
00:03:00,300 --> 00:03:05,220
Você pode usar as classes CSS personalizadas que já

38
00:03:05,220 --> 00:03:10,510
implementamos para o index.html adicionando o arquivo style.css,

39
00:03:10,510 --> 00:03:14,765
também para estilizar o conteúdo nesta página.

40
00:03:14,765 --> 00:03:18,010
Então, quando você concluir a segunda tarefa,

41
00:03:18,010 --> 00:03:21,990
sua página vai acabar sendo estilizada assim.

42
00:03:21,990 --> 00:03:27,290
Então você pode ver que a página aboutus existe em sua própria.

43
00:03:27,290 --> 00:03:31,505
Em seguida, parte Nossa História,

44
00:03:31,505 --> 00:03:37,800
observe que em um tamanho de tela pequeno a grande,

45
00:03:37,800 --> 00:03:43,815
a Nossa História ocupará apenas metade da largura da tela.

46
00:03:43,815 --> 00:03:51,850
Em seguida, a parte Liderança Corporativa ocupa toda a largura da tela neste caso.

47
00:03:51,850 --> 00:03:56,000
Esta é a segunda tarefa que você precisa concluir em sua tarefa.

48
00:03:56,000 --> 00:03:59,660
Para a terceira tarefa, como você pode ver,

49
00:03:59,660 --> 00:04:05,380
este layout de conteúdo parece bom para tamanhos de tela maiores,

50
00:04:05,380 --> 00:04:13,240
mas quando você vai para o tamanho de tela extra pequeno especialmente como este,

51
00:04:13,240 --> 00:04:20,415
você percebe que o conteúdo é demais nesta seção.

52
00:04:20,415 --> 00:04:27,670
Então, o que gostaríamos de fazer é usar outra classe Bootstrap fornecida para nós chamado,

53
00:04:27,670 --> 00:04:31,615
[inaudível] e DSM block.

54
00:04:31,615 --> 00:04:37,865
Há um link para as classes responsivas nos recursos de atribuição,

55
00:04:37,865 --> 00:04:44,550
para que você possa conferir a documentação do bloco [inaudível] e DSM.

56
00:04:44,550 --> 00:04:49,440
Você precisa aplicá-los para que esta descrição fique

57
00:04:49,440 --> 00:04:54,400
oculta nos tamanhos de tela extra pequenos.

58
00:04:54,400 --> 00:04:59,955
Então, quando você as classes para esta parte de liderança corporativa,

59
00:04:59,955 --> 00:05:06,040
o mesmo conteúdo agora será colocado para fora sem a descrição, de

60
00:05:06,040 --> 00:05:10,465
modo que ele será escondido no tamanho extra telas pequenas.

61
00:05:10,465 --> 00:05:14,170
Mas quando você vai para o pequeno tamanho de tela grande,

62
00:05:14,170 --> 00:05:16,335
o conteúdo ficará visível.

63
00:05:16,335 --> 00:05:21,200
Assim, você pode notar que para o tamanho de tela extra pequeno,

64
00:05:21,200 --> 00:05:23,760
o conteúdo está oculto,

65
00:05:23,760 --> 00:05:26,170
mas para o tamanho da tela pequena,

66
00:05:26,170 --> 00:05:30,475
esse conteúdo de descrição será mostrado claramente.

67
00:05:30,475 --> 00:05:35,310
Então esta é a sua terceira tarefa na sua missão.

68
00:05:35,310 --> 00:05:40,175
Enquanto você está nisso, você também pode aplicar as mesmas classes às

69
00:05:40,175 --> 00:05:45,810
descrições em nossa página index.html

70
00:05:45,810 --> 00:05:51,480
para que as descrições detalhadas dos itens de conteúdo também sejam ocultas

71
00:05:51,480 --> 00:05:57,645
na página index.html quando ela é visualizada em tamanhos de tela extra pequenos.

72
00:05:57,645 --> 00:06:02,090
Isso conclui sua primeira tarefa.

73
00:06:02,090 --> 00:06:04,965
Além disso, quando você enviar sua tarefa,

74
00:06:04,965 --> 00:06:14,460
faça uma captura de tela de página inteira do seu layout,

75
00:06:14,460 --> 00:06:19,615
tanto em

76
00:06:19,615 --> 00:06:25,930
tamanho de tela pequeno a extra grande quanto no tamanho de tela extra pequeno,

77
00:06:25,930 --> 00:06:29,230
e depois inclua isso como parte de seu envio.

78
00:06:29,230 --> 00:06:32,420
Para fazer uma captura de tela de página inteira no Chrome,

79
00:06:32,420 --> 00:06:36,000
você pode usar uma extensão do Chrome disponível para nós,

80
00:06:36,000 --> 00:06:39,305
o link para a extensão do Chrome é fornecido nos

81
00:06:39,305 --> 00:06:45,325
recursos de atribuição que seguem a descrição da atribuição.

82
00:06:45,325 --> 00:06:48,555
Depois de concluir sua atribuição,

83
00:06:48,555 --> 00:06:52,610
caso você esteja salvando suas alterações em um Repositório Git,

84
00:06:52,610 --> 00:06:55,750
não se esqueça de confirmar as alterações em

85
00:06:55,750 --> 00:07:00,090
seu Repositório Git com a Atribuição de Mensagem Um.