1
00:00:01,100 --> 00:00:04,880
In the text lecture ready for this one, you should have found a little bit of access to paste into

2
00:00:04,880 --> 00:00:06,560
your sizable doctor's file.

3
00:00:07,070 --> 00:00:10,130
There should be three selectors with a variety of different roles inside there.

4
00:00:10,580 --> 00:00:14,840
As soon as you add in that CSFs and then save the file, you should be able to go back to the browser,

5
00:00:14,840 --> 00:00:18,650
refresh the page, and it's going to look like everything is the same as what it was before.

6
00:00:18,800 --> 00:00:23,110
But if you scroll down to the very bottom, you might now notice this little sizable element down here.

7
00:00:23,600 --> 00:00:29,120
So that is the Cizre that a user is eventually going to drag around to resize a code editor and a preview

8
00:00:29,120 --> 00:00:30,660
window in the vertical direction.

9
00:00:31,300 --> 00:00:35,960
Now, at this point in time, in theory, stuff should work, but if you start to drag that thing,

10
00:00:35,960 --> 00:00:38,450
you're going to notice nothing really gets resized.

11
00:00:39,080 --> 00:00:41,160
So to make it troubleshooting this a little bit easier.

12
00:00:41,180 --> 00:00:44,660
I think that we should try to remove one of our two code editors.

13
00:00:44,870 --> 00:00:48,980
Remember, right now we are showing two on the screen, which just makes debugging all the stuff a little

14
00:00:48,980 --> 00:00:49,700
bit challenging.

15
00:00:50,240 --> 00:00:51,650
So to hide one editor.

16
00:00:52,930 --> 00:00:58,770
I'm going to go to my index file, remember, we had hardcoded in a second code cell inside of your

17
00:00:59,020 --> 00:01:00,370
and I'm going to remove the second one.

18
00:01:01,970 --> 00:01:08,270
If I then save that, go back over and refresh now, I can much more easily see the code editor, the

19
00:01:08,270 --> 00:01:13,910
submit button, the preview window is technically right here and then we've got the little draggy thing

20
00:01:13,910 --> 00:01:14,480
right here.

21
00:01:15,810 --> 00:01:20,760
OK, so to start to debug this thing and get a better idea of what's going on, I think the first thing

22
00:01:20,760 --> 00:01:25,890
we might want to do is to get the code editor and the preview window to show up next to each other.

23
00:01:26,310 --> 00:01:30,870
So it kind of actually get closer to the little design that we eventually want to end up with.

24
00:01:32,060 --> 00:01:35,450
Let's take a quick pause and then make sure that we can show the editor in the preview window next to

25
00:01:35,450 --> 00:01:36,590
each other in the next video.