Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,560 --> 00:00:05,150
Now that we're done with our CSX, we're going to move on to test our JavaScript.
2
00:00:05,840 --> 00:00:12,080
So if we go back to our code, we are going to go into our script dodgiest file, and we're going to
3
00:00:12,080 --> 00:00:14,090
use something called console logging.
4
00:00:14,660 --> 00:00:17,690
So I'm not going to get too deep into an explanation on this.
5
00:00:17,960 --> 00:00:24,620
But basically our browser window is represented by something called our window.
6
00:00:25,220 --> 00:00:28,160
And within our window we have something called a console.
7
00:00:28,790 --> 00:00:36,380
And this allows us to log certain data that we can then see from our JavaScript in our browser.
8
00:00:36,950 --> 00:00:37,970
So this is helpful.
9
00:00:38,030 --> 00:00:45,050
If we are calling an API and we want to just see how the data is formatted, we can console log that
10
00:00:45,050 --> 00:00:47,990
data and pass it into our browser.
11
00:00:48,650 --> 00:00:55,370
So we actually don't need to type out window dot console because by default all JavaScript is in the
12
00:00:55,370 --> 00:00:56,330
window element.
13
00:00:57,480 --> 00:01:03,780
So we're going to ride out console, dot log and then brackets and then in single quotes, we can pass
14
00:01:03,780 --> 00:01:08,610
in a string, or if you're passing in a variable, you would pass it in without the quotes.
15
00:01:08,970 --> 00:01:15,060
But in our case, we just want to write testing and then we'll throw in a semicolon at the end so we
16
00:01:15,060 --> 00:01:17,490
can save that and jump back to our browser.
17
00:01:18,150 --> 00:01:21,960
And so where this is going to show up is in our dev tools.
18
00:01:22,350 --> 00:01:27,450
So our dev tools is something I'm going to reference many times throughout the course to get to our
19
00:01:27,450 --> 00:01:28,150
dev tools.
20
00:01:28,170 --> 00:01:33,840
We can right click and inspect and you can see that our dev tools has opened up here.
21
00:01:34,320 --> 00:01:36,780
By default, it will open on elements.
22
00:01:37,470 --> 00:01:42,930
So you can see that we have our HTC Amelle here and we actually have our CFS here as well.
23
00:01:42,930 --> 00:01:45,570
We have our margins zero and our min height of 100.
24
00:01:46,350 --> 00:01:52,350
The cool thing is this actually allows us to turn our styling on and off and test out different things.
25
00:01:52,830 --> 00:01:59,460
So if I wanted to test out a background color on our body, I can just type in whatever I want and it
26
00:01:59,460 --> 00:02:00,870
will update in real time.
27
00:02:01,500 --> 00:02:05,490
And if I wanted to just get rid of something, I can just uncheck it to get rid of it.
28
00:02:06,270 --> 00:02:13,770
You can see next to it that we have our console and you can see here that we have testing showing up.
29
00:02:14,160 --> 00:02:16,590
So this means our console log is working.
30
00:02:16,620 --> 00:02:20,070
And it means our JavaScript is connected to our HMO.
31
00:02:20,670 --> 00:02:21,180
Perfect.
32
00:02:21,990 --> 00:02:25,200
Throughout the course, we're going to learn more about different things here.
33
00:02:25,220 --> 00:02:27,480
So we're also going to learn about the network tab.
34
00:02:28,080 --> 00:02:33,990
If we refresh the page, we can see that it actually shows which files are loading.
35
00:02:34,020 --> 00:02:39,990
So we have our index HMO, how long they take the size of them, what order they're loading.
36
00:02:40,650 --> 00:02:42,240
And more information.
37
00:02:42,300 --> 00:02:43,830
But those are the basics.
38
00:02:44,460 --> 00:02:46,770
And the other thing is our application tab.
39
00:02:47,100 --> 00:02:50,370
As you can see, this is from a project within the course.
40
00:02:50,400 --> 00:02:53,830
We're actually saving bookmarks into our local storage.
41
00:02:54,360 --> 00:02:56,910
But we'll get to that later in the course.
42
00:02:57,330 --> 00:03:00,360
The important thing is everything is working as we want it to.
43
00:03:01,050 --> 00:03:05,910
So let's jump back to the code and we're going to get rid of this and save it.
44
00:03:06,810 --> 00:03:12,370
Now, the last thing I want to show you is how to actually host your project online for free using GetUp!
45
00:03:13,440 --> 00:03:20,160
So if we jump back to get Hub here or in and create a new repository and we're going to give it a name,
46
00:03:20,550 --> 00:03:26,880
template, dash test, and we're not going to worry about a description and we're not going to worry
47
00:03:26,880 --> 00:03:27,690
about a read me.
48
00:03:28,020 --> 00:03:29,730
We're going to click create repository.
49
00:03:31,430 --> 00:03:33,050
Then we're gonna copy this here.
50
00:03:34,310 --> 00:03:40,460
This is the remote that we want to add and we're going to jump back to our code and we're going to open
51
00:03:40,460 --> 00:03:41,390
up our terminal.
52
00:03:42,960 --> 00:03:45,960
If you remember, we're gonna start with our get in it.
53
00:03:46,530 --> 00:03:49,740
It's going to initialize an empty repository within our folder.
54
00:03:50,460 --> 00:03:52,620
We are going to add the remote origin.
55
00:03:52,650 --> 00:03:57,270
So get remote, add origin, and then we're gonna paste that in.
56
00:03:58,210 --> 00:04:03,650
Then we're going to do get ad space and then period, because that's going to add everything.
57
00:04:04,760 --> 00:04:06,490
And then get commit.
58
00:04:06,520 --> 00:04:07,370
Dash em.
59
00:04:08,240 --> 00:04:10,640
And then we're gonna type in a message.
60
00:04:10,880 --> 00:04:12,950
This will be our initial commit.
61
00:04:14,450 --> 00:04:18,710
And you can see that there are some changes here and it shows the three files that are going to be added.
62
00:04:19,460 --> 00:04:23,870
And then lastly, we're going to get push origin master.
63
00:04:25,360 --> 00:04:27,010
OK, so that's done now.
64
00:04:27,250 --> 00:04:29,770
If we jump back over and we refresh.
65
00:04:30,720 --> 00:04:33,390
We can see that we have our three files here now.
66
00:04:34,260 --> 00:04:38,130
And so that's how the process would work if you're setting up a project for the first time.
67
00:04:38,460 --> 00:04:41,830
But let's say that we made a change in our index each.
68
00:04:42,510 --> 00:04:44,250
We can move this down a little bit.
69
00:04:44,940 --> 00:04:53,370
And let's say we're just going to add an H1 tab and we're just going to have it say hello, world.
70
00:04:54,180 --> 00:04:55,290
Let's save that.
71
00:04:55,890 --> 00:04:58,350
And now we can open up another terminal.
72
00:04:58,980 --> 00:05:02,580
And so any time you make changes to a project, you're going to save the file.
73
00:05:03,090 --> 00:05:05,970
And then we only have to type in three commands.
74
00:05:06,180 --> 00:05:09,450
So you got to type in, get add and then period.
75
00:05:09,750 --> 00:05:11,850
That's going to add everything that's been changed.
76
00:05:12,450 --> 00:05:17,490
And then I'm gonna go get commit Dasch m and then I can add my commit message.
77
00:05:17,490 --> 00:05:19,560
So I'm just gonna add Hello world.
78
00:05:20,520 --> 00:05:26,380
And then you can see I've only change one filer each Timal file and then I'm going to do get push.
79
00:05:26,850 --> 00:05:28,440
Origin Master.
80
00:05:29,710 --> 00:05:30,100
OK.
81
00:05:30,220 --> 00:05:31,060
So that's done.
82
00:05:31,390 --> 00:05:35,350
I can jump back to my repo if I refresh the page.
83
00:05:37,170 --> 00:05:40,960
I can see now that I have my hello world commit now.
84
00:05:41,130 --> 00:05:42,660
I can scroll back up to the top.
85
00:05:43,320 --> 00:05:44,620
So we're gonna scroll over.
86
00:05:44,640 --> 00:05:48,480
I'm very zoomed in here, but for you, you'll be able to probably see this whole page.
87
00:05:48,870 --> 00:05:51,480
We're going to go to the right and we're going to click on settings.
88
00:05:52,620 --> 00:05:57,900
And we're gong to scroll down in our settings until we find GitHub pages.
89
00:05:58,410 --> 00:06:01,740
So this is designed to host your project pages.
90
00:06:02,520 --> 00:06:07,830
And what we're gonna do is we're just gonna switch the source from none to Master Branch.
91
00:06:08,960 --> 00:06:11,720
And you can see that the page source has been saved.
92
00:06:12,470 --> 00:06:13,880
And if we scroll down again.
93
00:06:15,300 --> 00:06:17,370
We can actually see that now.
94
00:06:17,400 --> 00:06:22,350
We have a Web site where our project is going to be live so we can right.
95
00:06:22,350 --> 00:06:24,690
Click and open this in a new tab.
96
00:06:26,050 --> 00:06:28,730
So you can see right now that the site is not found.
97
00:06:29,300 --> 00:06:34,910
So something to keep in mind when you're using GitHub pages, when you enable it for the first time.
98
00:06:35,000 --> 00:06:36,740
It'll take about 10 minutes.
99
00:06:37,400 --> 00:06:40,310
So let's wait for 10 minutes and come back.
100
00:06:41,060 --> 00:06:42,060
All righty.
101
00:06:42,110 --> 00:06:45,620
So I've come back 10 minutes later and I've refreshed the page.
102
00:06:45,710 --> 00:06:47,570
And you can see now we have our title.
103
00:06:47,870 --> 00:06:52,140
We have our Farrakhan and we have our Hello World H one.
104
00:06:52,700 --> 00:06:53,600
Excellent.
105
00:06:54,080 --> 00:07:00,890
This is the process you can use going forward over and over again any time you want to share your projects
106
00:07:00,980 --> 00:07:03,020
online with people for free.
107
00:07:03,590 --> 00:07:10,400
You can start with the template I've created here, create and initialize a get repository, push the
108
00:07:10,400 --> 00:07:15,980
changes through the terminal in visual studio code and then update them as you work on the project.
109
00:07:16,430 --> 00:07:22,820
Lastly, don't forget in your settings that you want to enable GitHub pages and you want to have the
110
00:07:22,820 --> 00:07:25,490
source be the master or main branch.
111
00:07:26,240 --> 00:07:27,080
That's about it.
112
00:07:27,290 --> 00:07:28,520
That's all there is to hosting.
113
00:07:29,240 --> 00:07:36,260
So I'm going to remove the H1 from this template because again, we want it to be as blank as possible.
114
00:07:36,560 --> 00:07:41,330
That's the version I'm going to save in the course, but that's about it for our setup.
115
00:07:41,720 --> 00:07:46,370
I think we're finally ready to get started with the course and the rest of the projects.
116
00:07:47,000 --> 00:07:47,480
All right.
117
00:07:47,900 --> 00:07:49,460
I'll see in the next project.
118
00:07:49,970 --> 00:07:50,780
Bye for now.
10836
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Albanian
Amharic
Armenian
Azerbaijani
Basque
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Cebuano
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Finnish
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hawaiian
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Khmer
Korean
Kurdish (Kurmanji)
Kyrgyz
Lao
Latvian
Lithuanian
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mongolian
Myanmar (Burmese)
Nepali
Norwegian
Pashto
Polish
Portuguese
Romanian
Russian
Samoan
Serbian
Sesotho
Shona
Sinhala
Slovak
Slovenian
Somali
Spanish
Swahili
Swedish
Tajik
Thai
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese
