1
00:00:00,710 --> 00:00:06,500
Welcome back to another developer, Fundamentals Video, and you know who we haven't seen in a while,

2
00:00:06,800 --> 00:00:08,320
my friend Jean-Claude Van Damme.

3
00:00:08,690 --> 00:00:09,860
How are you doing these days, John?

4
00:00:12,710 --> 00:00:16,940
All right, so what is this developer fundamental that we're going to teach?

5
00:00:17,960 --> 00:00:26,980
Well, I have over here animatics, and this is another case file that we can download to animate things,

6
00:00:27,440 --> 00:00:33,530
so all I need to do is click download and Amdocs and I have the case file.

7
00:00:33,800 --> 00:00:34,730
Download it for me.

8
00:00:35,330 --> 00:00:36,470
So let's open that up.

9
00:00:37,640 --> 00:00:45,710
You'll see over here that, yeah, this is a massive txt file that I just downloaded and this is how

10
00:00:45,710 --> 00:00:52,880
bootstrap that we've seen in previous videos works, they're essentially providing a access file for

11
00:00:52,880 --> 00:00:56,330
us with all these properties already preset.

12
00:00:56,570 --> 00:01:00,680
And we also have all the classes that we need to use them.

13
00:01:02,530 --> 00:01:10,150
So let's say I wanted to use this and I'm just going to copy this for now and I have an empty website

14
00:01:10,150 --> 00:01:12,460
and I'm just going to copy and paste this txt for us.

15
00:01:14,010 --> 00:01:20,730
Just think about how powerful that is, we're able to not start from scratch, but use what other people

16
00:01:20,730 --> 00:01:23,330
have created to make our Web sites faster.

17
00:01:24,500 --> 00:01:29,150
To show you this, let's open up this file so into our browser.

18
00:01:30,660 --> 00:01:37,680
OK, it's completely empty, and let's just have a header, one that says Animate me.

19
00:01:40,050 --> 00:01:41,580
I'm going to save and refresh.

20
00:01:42,840 --> 00:01:49,680
And looking at animated, I can add the let's add bounce to our header.

21
00:01:50,620 --> 00:01:56,770
All we need to do is click on something like this on GitHub and it will explain for us what we can add

22
00:01:57,610 --> 00:02:00,790
and I'll just save you the trouble of reading.

23
00:02:00,790 --> 00:02:05,590
But all we need to do is this copy and add the class.

24
00:02:06,710 --> 00:02:09,200
Animated and then whatever animation we want.

25
00:02:10,490 --> 00:02:15,110
And this library, that's how it works, you just need to stay a class.

26
00:02:16,610 --> 00:02:23,870
And type animated first and then any of the actions that were provided on the website, so in our case

27
00:02:23,870 --> 00:02:26,480
there was infinite bounce.

28
00:02:27,770 --> 00:02:32,530
Save and refresh and, well, we have a link to our stylesheet here, so let's do that.

29
00:02:34,460 --> 00:02:39,830
And we should be really good at this by now, because we've done it plenty of times, save and refresh.

30
00:02:42,790 --> 00:02:44,410
A header is now animated.

31
00:02:44,440 --> 00:02:45,970
Let's see what else we can do with this.

32
00:02:47,090 --> 00:02:49,720
We can do Gelo.

33
00:02:51,010 --> 00:02:54,400
Actually, let's do something more exciting, maybe flip.

34
00:02:55,310 --> 00:02:56,070
Well, I like that one.

35
00:02:56,090 --> 00:02:57,530
OK, so we want to do flip.

36
00:02:58,820 --> 00:03:01,700
We can type in flip and refresh here.

37
00:03:04,440 --> 00:03:06,270
Let's do that Infinite Jest so we can see it.

38
00:03:11,560 --> 00:03:12,080
Woo!

39
00:03:12,190 --> 00:03:12,680
There you go.

40
00:03:13,810 --> 00:03:17,620
I'm going to stop that because that's going to get us dizzy or fresh.

41
00:03:17,650 --> 00:03:18,040
There you go.

42
00:03:18,880 --> 00:03:26,500
Now, the fundamental here that I want to show you is that when we're building websites, it is very

43
00:03:26,500 --> 00:03:29,570
rare that we build something from scratch.

44
00:03:29,620 --> 00:03:33,520
Most of the time you want to build on top of something that has already been created.

45
00:03:33,530 --> 00:03:38,500
Otherwise, the whole environment of being a developer would be very, very tedious.

46
00:03:39,250 --> 00:03:43,300
How much of a waste is it if somebody has already created a solution that you need?

47
00:03:44,500 --> 00:03:51,370
So as a developer, you want to be efficient with your time and your limited resources, so you want

48
00:03:51,370 --> 00:03:58,600
to find things like bootstrap or even animatics if they solve your certain problems.

49
00:03:58,990 --> 00:04:03,220
And that is true for success as well as JavaScript.

50
00:04:03,250 --> 00:04:08,920
When we get into it, you want to find solutions that already exist.

51
00:04:09,010 --> 00:04:13,690
And only if they don't exist already, then you can implement your own.

52
00:04:14,080 --> 00:04:20,500
Finally, I wanted to show you one other tool, and that is creative, Tim.

53
00:04:23,080 --> 00:04:24,790
So if you click on Creative Tim.

54
00:04:25,920 --> 00:04:34,770
They create bootstrap themes, they're using the bootstrap toolkit to build their own styles and their

55
00:04:34,770 --> 00:04:39,600
own little customized actions to make it even better.

56
00:04:40,230 --> 00:04:47,310
So if I go to Catagories over here and we'll do UI kits, you'll see over here that they have all these

57
00:04:47,310 --> 00:04:48,220
things that we can use.

58
00:04:49,110 --> 00:04:53,970
So if we click on paper kit to let's find a free one.

59
00:04:53,970 --> 00:04:55,650
Actually if I click on.

60
00:04:57,230 --> 00:04:58,400
Price low to high.

61
00:05:01,030 --> 00:05:01,610
There you go.

62
00:05:02,500 --> 00:05:09,400
We have the get shit done and we also have people get to so if I click on this and I'm going to make

63
00:05:09,400 --> 00:05:10,690
this full screen.

64
00:05:12,830 --> 00:05:18,860
This allows us to build something like this very, very easily with their own custom design.

65
00:05:19,970 --> 00:05:23,360
And all we need to do is do a free download.

66
00:05:25,070 --> 00:05:26,990
And you'll see that when we download this.

67
00:05:30,370 --> 00:05:33,520
We have all the files that we need and let's open it up.

68
00:05:34,810 --> 00:05:39,460
Look at that, we have this website that just like.

69
00:05:40,320 --> 00:05:49,050
Bootstrap, we can use these buttons and these different styles and navigation progress, bars and forms

70
00:05:49,050 --> 00:05:57,540
and everything that you need, and because we know now how HTML files and access files work, we can

71
00:05:57,540 --> 00:06:03,690
actually start customizing this and we can open up an index file and start editing.

72
00:06:04,230 --> 00:06:12,230
Or if we go into assets and success, we can start adding our own access values to it.

73
00:06:13,580 --> 00:06:22,190
And you'll see a lot of developers that do this exactly, they're freelancers and people need just websites

74
00:06:22,190 --> 00:06:27,790
built and they're able to build websites really, really fast by using something like Creative Tim,

75
00:06:28,190 --> 00:06:32,250
because as you can see, they've already build really nice looking components for you.

76
00:06:32,870 --> 00:06:37,430
There's paid ones that you can get, and that is one avenue that you can go.

77
00:06:38,670 --> 00:06:49,050
But I do argue that these type of websites can only take you so far and in order to build real applications,

78
00:06:49,050 --> 00:06:56,070
real complex applications and and even garner higher salaries and make your skills really valuable,

79
00:06:56,760 --> 00:07:04,650
we need to learn JavaScript and we need to become better than just using templates and access.

80
00:07:05,490 --> 00:07:08,310
And that's what we're going to get into the next section.

81
00:07:08,640 --> 00:07:09,720
That is JavaScript.

82
00:07:09,840 --> 00:07:12,510
That is when the real power comes.

83
00:07:13,720 --> 00:07:14,480
I'll see you on that one.

84
00:07:14,960 --> 00:07:15,310
Bye bye.