1
00:00:00,000 --> 00:00:04,879
[MUSIC]

2
00:00:04,879 --> 00:00:11,307
Front-end Web UI Frameworks
are becoming their go-to approach for

3
00:00:11,307 --> 00:00:16,320
designing and
implementing their recent websites.

4
00:00:16,320 --> 00:00:20,220
Let's ask ourselves what exactly
are front-end Web UI Frameworks,

5
00:00:20,220 --> 00:00:24,150
and learn a little more
details about them.

6
00:00:24,150 --> 00:00:27,700
Next, so obviously

7
00:00:27,700 --> 00:00:33,090
in this lesson we're going to ask
ourselves, what are front-end frameworks?

8
00:00:33,090 --> 00:00:34,050
What do they contain?

9
00:00:35,130 --> 00:00:38,780
What are some of the popular
front-end UI frameworks?

10
00:00:38,780 --> 00:00:44,130
And why do we need to make use of
front-end UI frameworks when we design

11
00:00:44,130 --> 00:00:46,460
our websites?

12
00:00:46,460 --> 00:00:50,410
So what are front-end web UI frameworks?

13
00:00:50,410 --> 00:00:52,800
Let's take a step backwards, and

14
00:00:52,800 --> 00:00:57,580
imagine that you only know HTML,
CSS, and JavaScript.

15
00:00:57,580 --> 00:01:03,540
If you were asked to design a new website,
you would obviously go about constructing

16
00:01:03,540 --> 00:01:08,510
and implementing the entire website
Using the technical skills that

17
00:01:08,510 --> 00:01:13,490
you have based on your knowledge of HTML,
CSS, and JavaScript.

18
00:01:13,490 --> 00:01:16,880
You would often realize
that there are many

19
00:01:16,880 --> 00:01:21,580
repeated components that you
would use on your website.

20
00:01:21,580 --> 00:01:27,590
And you would end up designing
your own set of CSS classes.

21
00:01:27,590 --> 00:01:30,730
You will be designing
JavaScript based component.

22
00:01:30,730 --> 00:01:34,940
And then once you get
a group of these together,

23
00:01:36,180 --> 00:01:40,770
every time you need to design a new
website you would be making use of these

24
00:01:40,770 --> 00:01:45,670
predefined sets of CSS classes and

25
00:01:45,670 --> 00:01:49,549
JavaScript based components to
quickly implement a new website.

26
00:01:50,740 --> 00:01:53,480
Why not take this to
its logical conclusion?

27
00:01:54,750 --> 00:02:00,610
How about, if we design an entire
framework that consists of

28
00:02:00,610 --> 00:02:07,522
ready to use HTML, CSS, and
JavaScript placed web UI components.

29
00:02:07,522 --> 00:02:12,930
So, here, a front-end web UI framework

30
00:02:12,930 --> 00:02:17,850
may define a bunch of CSS classes that

31
00:02:17,850 --> 00:02:22,905
will enable us to include
components like Buttons,

32
00:02:22,905 --> 00:02:27,985
Tables, Navigation bars,
Dropdowns, Alerts,

33
00:02:27,985 --> 00:02:32,615
Modals, Tabs, Accordions and many more.

34
00:02:33,687 --> 00:02:39,027
And quickly enable us to design and
implement a website.

35
00:02:39,027 --> 00:02:43,887
So this is what a front-end
web UI framework accomplishes.

36
00:02:43,887 --> 00:02:47,693
It is a collection of
all these components.

37
00:02:47,693 --> 00:02:51,903
Not only that,
it gives you a method of defining

38
00:02:52,903 --> 00:02:58,443
consistent typography that you can use for
your entire website design.

39
00:02:59,611 --> 00:03:05,702
And enables you to quickly scaffold

40
00:03:05,702 --> 00:03:09,501
out a website or the pitch.

41
00:03:10,651 --> 00:03:15,191
If you search for
front-end web frameworks,

42
00:03:15,191 --> 00:03:20,341
you would find a plethora of
them out there in the Internet.

43
00:03:21,750 --> 00:03:26,387
Now several people have
done their own service of

44
00:03:26,387 --> 00:03:30,573
all these different web UI frameworks, and

45
00:03:30,573 --> 00:03:37,170
have published their top ten
lists of front-end UI frameworks.

46
00:03:37,170 --> 00:03:40,290
This is one such that you may or

47
00:03:40,290 --> 00:03:45,707
may not agree with this ranking, but

48
00:03:45,707 --> 00:03:53,920
Bootstrap happens to be the most popular
among all the front-end web UI frameworks.

49
00:03:53,920 --> 00:03:57,140
Bootstrap consistently
ranks as the number one

50
00:03:57,140 --> 00:04:01,380
in many of the lists of
front end web UI frameworks.

51
00:04:01,380 --> 00:04:06,879
The remaining among this list may vary,
but you would often find Semantic-UI,

52
00:04:06,879 --> 00:04:12,450
Foundation by Zerp,
Materialize, Material UI, and

53
00:04:12,450 --> 00:04:17,249
some of these others appearing
in many of those top-end lists.

54
00:04:18,330 --> 00:04:20,060
The next obvious question is,

55
00:04:20,060 --> 00:04:24,230
why would you want to use
front-end web UI frameworks?

56
00:04:24,230 --> 00:04:30,830
First and foremost, they provide you with
a consistent way of designing websites.

57
00:04:30,830 --> 00:04:34,010
And, most of these front-end frameworks

58
00:04:34,010 --> 00:04:36,730
support what is called as
responsive web design.

59
00:04:38,040 --> 00:04:43,299
We will examine more about responsive
web design in the next lesson, but

60
00:04:43,299 --> 00:04:50,610
quickly summarizing it, you don't realize
that your website may be accessed from

61
00:04:51,780 --> 00:04:56,320
various kinds of devices of
different screen savers ranging

62
00:04:56,320 --> 00:05:01,850
from small mobile phones all the way
to up to a full fledged desktop.

63
00:05:01,850 --> 00:05:07,070
You want to be able to design your
website to automatically adapt itself to

64
00:05:07,070 --> 00:05:12,260
cater to the size
constraints of each of these

65
00:05:12,260 --> 00:05:16,490
different devices,
from which your website is being accessed.

66
00:05:16,490 --> 00:05:21,870
So responsive web design is
concerned about this aspect.

67
00:05:21,870 --> 00:05:26,310
The second issue that most of
these Franken frameworks try to

68
00:05:26,310 --> 00:05:30,740
address is cross browser compatibility.

69
00:05:30,740 --> 00:05:35,790
If you have played around with
browsers as much as I have done,

70
00:05:35,790 --> 00:05:38,930
I'm pretty sure you've
come to realize that

71
00:05:38,930 --> 00:05:43,090
no two browsers render the same
website exactly the same way.

72
00:05:43,090 --> 00:05:46,710
So when you design a website
to render consistently across

73
00:05:46,710 --> 00:05:51,466
many different browsers, you
are going to be facing an uphill battle.

74
00:05:51,466 --> 00:05:56,980
Now these front-end frameworks have
managed to address most of these

75
00:05:56,980 --> 00:06:02,930
idiosyncrasies of the different browsers
in such a way that you can deliver

76
00:06:02,930 --> 00:06:09,740
consistent rendering of your
website on different browsers.

77
00:06:09,740 --> 00:06:13,290
So that's the second reason
why you may want to resort to

78
00:06:13,290 --> 00:06:17,000
using a Front-End Web UI framework.

79
00:06:17,000 --> 00:06:22,930
And the third aspect of course is that
when you need to design a website,

80
00:06:22,930 --> 00:06:27,050
you're always going to be
under terrible time pressure.

81
00:06:27,050 --> 00:06:29,680
So increasing your productivity so

82
00:06:29,680 --> 00:06:35,450
that you don't waste your energy and
time on wasteful

83
00:06:35,450 --> 00:06:40,600
configuration issues of those
individual components of your website.

84
00:06:40,600 --> 00:06:43,470
Instead, let that be taken care of

85
00:06:43,470 --> 00:06:47,430
by a consistently designed
front-end web UI framework.

86
00:06:47,430 --> 00:06:53,400
So that saves you a lot of time in
terms of implementing your website.

87
00:06:53,400 --> 00:06:54,850
They have sacked.

88
00:06:54,850 --> 00:06:56,450
And finally, of course,

89
00:06:56,450 --> 00:07:03,010
most of these front-end UI frameworks that
are all there have their own community.

90
00:07:03,010 --> 00:07:08,900
They are users that use these
frameworks for implementing websites.

91
00:07:08,900 --> 00:07:14,700
So this community of users
will provide you with a very

92
00:07:14,700 --> 00:07:19,560
efficient way of being able
to solve issues that you may

93
00:07:19,560 --> 00:07:25,050
encounter when you're applying anyone of
this frameworks for your website design.

94
00:07:25,050 --> 00:07:30,610
So given these different advantages,

95
00:07:30,610 --> 00:07:36,080
why would you not want to resort to
using a front-end web UI framework?

96
00:07:36,080 --> 00:07:40,697
With this understanding of
front-end web UI frameworks,

97
00:07:40,697 --> 00:07:45,315
let's now proceed forward to
learn more about Bootstrap,

98
00:07:45,315 --> 00:07:48,840
the most popular front
end web UI framework.

99
00:07:48,840 --> 00:07:51,809
[MUSIC]