WEBVTT

1
00:00:00.000 --> 00:00:01.920
First, let's install Visual Studio Code.

2
00:00:01.960 --> 00:00:05.080
That's the open source free editor
we're going to use from Microsoft.

3
00:00:05.120 --> 00:00:07.180
I think it's a great choice
for building applications.

4
00:00:07.220 --> 00:00:08.900
It lets us work with
artificial intelligence,

5
00:00:08.940 --> 00:00:13.920
but also lets us drop in and use and
edit files directly if we want to.

6
00:00:13.960 --> 00:00:18.640
If you're using something else, like maybe
the terminal directly, or Cursor, or Claude Code

7
00:00:18.680 --> 00:00:23.500
desktop, Codex, etc., Elements is designed
to work with all of those systems fine.

8
00:00:23.540 --> 00:00:25.460
We don't sit in front of any agent.

9
00:00:25.500 --> 00:00:28.580
We work side by side with it.
So as long as you're using an agent that's

10
00:00:28.620 --> 00:00:32.230
working inside of an Elements project
folder, it should know what to do.

11
00:00:32.280 --> 00:00:34.780
In most of our tutorials,
we're going to use Visual Studio Code

12
00:00:34.820 --> 00:00:39.040
so we can standardize the tutorials and
show people how to get up and running.

13
00:00:39.080 --> 00:00:42.060
But all of these concepts will
apply to any of these editors.

14
00:00:42.100 --> 00:00:44.880
Okay, so let's get started by
downloading Visual Studio Code.

15
00:00:44.920 --> 00:00:48.770
Click the operating system that
you have, macOS, Windows, or Linux.

16
00:00:49.080 --> 00:00:52.560
And after that download has completed
in the upper right-hand corner,

17
00:00:52.600 --> 00:00:56.870
click it and drag the application
into the applications folder.

18
00:00:56.920 --> 00:00:58.020
If you're on Mac,

19
00:00:58.060 --> 00:01:02.280
you can use Command-Space to bring up
the Spotlight search menu and type code.

20
00:01:02.320 --> 00:01:05.220
That should bring up Visual
Studio Code as the first option.

21
00:01:05.260 --> 00:01:07.830
If you're on Windows, you can do
the same with the Windows key.

22
00:01:08.300 --> 00:01:10.440
If you're installing Visual
Studio for the first time,

23
00:01:10.480 --> 00:01:12.640
the first time you open it,
you're going to see this splash screen

24
00:01:12.680 --> 00:01:16.620
asking if you want to sign up to GitHub
Copilot, and you should do that.

25
00:01:16.660 --> 00:01:21.280
Click the Continue with GitHub button,
and if you already have a GitHub account,

26
00:01:21.320 --> 00:01:23.660
you can continue and
authorize it. Otherwise,

27
00:01:23.700 --> 00:01:25.540
go ahead and create an account on GitHub.

28
00:01:25.580 --> 00:01:28.920
It's free to get started,
and it has a pretty generous free tier

29
00:01:28.960 --> 00:01:32.480
so that you can use the AI models for quite
a while before you have to pay anything.

30
00:01:32.520 --> 00:01:34.830
I already have an account,
so I'll click Continue.

31
00:01:35.620 --> 00:01:38.920
That'll redirect me back into Visual
Studio Code and ask me to pick a theme,

32
00:01:38.960 --> 00:01:41.240
and I'll go with Dark 2026,
which is the default,

33
00:01:41.280 --> 00:01:42.710
and click the Get Started button.

34
00:01:43.520 --> 00:01:45.140
Inside of Visual Studio Code,

35
00:01:45.180 --> 00:01:47.880
you're going to see this Welcome tab
that has a bunch of things in it.

36
00:01:47.920 --> 00:01:51.440
I will go ahead and close that.
And over on the right is a chat window,

37
00:01:51.480 --> 00:01:55.020
which I'll expand so we can see it more
clearly. This is where we're going to chat

38
00:01:55.060 --> 00:01:59.110
with artificial intelligence to do work on
our behalf and to build our application.

39
00:01:59.620 --> 00:02:03.500
Let's set this up properly so that we have
an easier time getting Elements installed

40
00:02:03.540 --> 00:02:05.090
and building our first application.

41
00:02:05.480 --> 00:02:09.480
Down in the chat box here, you'll see
that there's a button called Auto,

42
00:02:09.520 --> 00:02:13.580
and if I click that, you'll see
that I can pick a model that I want.

43
00:02:13.620 --> 00:02:15.500
And if I want to select one specifically,

44
00:02:15.540 --> 00:02:18.100
I can do that, or I can leave
it on the Auto selection,

45
00:02:18.140 --> 00:02:21.880
which will let Copilot decide for
me based on the task that I'm doing.

46
00:02:21.920 --> 00:02:26.640
Keep that selected and keep this the same.

47
00:02:26.680 --> 00:02:30.100
And down in Default Permissions,
I'm going to change this to Allow All,

48
00:02:30.140 --> 00:02:33.820
which sounds a little bit scary,
but there's nothing that's going to happen

49
00:02:33.860 --> 00:02:36.260
when you're building an Elements
application that you have to worry about.

50
00:02:36.300 --> 00:02:40.040
It's going to invoke Elements tooling
to build the application for the most part.

51
00:02:40.080 --> 00:02:42.140
So you can enable that.
If you're not comfortable

52
00:02:42.180 --> 00:02:44.020
and you want to leave the default
permissions, that's fine,

53
00:02:44.060 --> 00:02:47.500
but you're going to have to say okay
to a lot of the tool invocations that happen.

54
00:02:47.540 --> 00:02:51.880
So I find it much less annoying
to pick Allow All and just go with it.

55
00:02:51.920 --> 00:02:55.420
Don't worry so much about it.
All right, now in the main area here,

56
00:02:55.460 --> 00:02:57.170
we're going to open up a terminal window.

57
00:02:57.220 --> 00:03:00.920
To do that, if you're getting
used to keyboard commands,

58
00:03:00.960 --> 00:03:02.420
you can use Control-backtick.

59
00:03:02.460 --> 00:03:04.110
That will open up a terminal.

60
00:03:04.360 --> 00:03:07.520
If you don't want to use the keyboard,
you can go up to the menu up here

61
00:03:07.560 --> 00:03:12.490
and click Terminal and then
select the New Terminal menu item.

62
00:03:12.640 --> 00:03:15.160
That's going to open up
a terminal down at the bottom.

63
00:03:15.200 --> 00:03:18.660
And importantly, right now we're
just in the home directory.

64
00:03:18.700 --> 00:03:22.700
We're not in a project yet, but we're going
to use the terminal to install Elements,

65
00:03:22.740 --> 00:03:24.570
so you can go ahead and keep this up.

66
00:03:24.860 --> 00:03:27.280
This is all we need now
with Visual Studio Code,

67
00:03:27.320 --> 00:03:29.930
and next up we can go and
install Elements itself.