0% found this document useful (0 votes)
3 views6 pages

Membuat File HTML di Visual Studio Code

The video tutorial covers setting up a project in Visual Studio for JavaScript and web development, including creating a project folder and an index.html file. It demonstrates how to install the Live Server extension to facilitate real-time code updates in the browser. The tutorial concludes by encouraging viewers to experiment with the setup and previews the next video on installing Atom as an alternative editor.

Uploaded by

krsnarocha111
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views6 pages

Membuat File HTML di Visual Studio Code

The video tutorial covers setting up a project in Visual Studio for JavaScript and web development, including creating a project folder and an index.html file. It demonstrates how to install the Live Server extension to facilitate real-time code updates in the browser. The tutorial concludes by encouraging viewers to experiment with the setup and previews the next video on installing Atom as an alternative editor.

Uploaded by

krsnarocha111
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

WEBVTT

00:00.440 --> 00:01.820


I welcome you back again.

00:01.820 --> 00:06.080


And in this video we start by setting up our project for this course.

00:06.110 --> 00:06.650


All right.

00:06.650 --> 00:12.770


So this Visual Studio will be used for both JavaScript and web development for this
course.

00:12.770 --> 00:15.290


And go ahead and set up the project folder.

00:15.290 --> 00:17.600


And then we kick off immediately.

00:17.630 --> 00:20.990


Now first of all I'll go ahead and move over to files.

00:20.990 --> 00:24.440


And I'm going to go to open Folder.

00:24.440 --> 00:26.030


And we have no folder created.

00:26.030 --> 00:28.190


I can go to my desktop right in here.

00:28.220 --> 00:35.960


I'll go ahead and create a new folder under um I'll go ahead and say I can give
this folder name, maybe

00:35.960 --> 00:40.700


a website or any name JavaScript or react and so on.

00:40.700 --> 00:46.370


I can even go ahead and give it JS tests or anything, and anytime I give that will
actually be the

00:46.370 --> 00:46.850


folder name.

00:46.850 --> 00:48.230


So let's go ahead and use this.

00:48.260 --> 00:53.030


Even though that does not actually supposed to be the folder name, it can be like
maybe my website

00:53.030 --> 00:53.690


then instead.

00:53.720 --> 00:56.750


But I just want us to know where we can be able to give any name.
00:56.750 --> 01:00.020
And the conventional way is to use the name my website.

01:00.050 --> 01:04.750


All right, because I have my website already, uh, right in here that I have.

01:04.750 --> 01:06.490


I just want us to click something else.

01:06.490 --> 01:10.660


So I'm going to use Jay's text and I'll go ahead and select folder.

01:10.660 --> 01:13.360


And then that folder will now be open.

01:13.360 --> 01:16.120


And now I have that folder right in here.

01:16.900 --> 01:22.690


So over here you can see I have Jay's text.

01:22.690 --> 01:23.920


And that shows the folder.

01:23.920 --> 01:26.560


And anything I want to do I can go right inside here.

01:26.590 --> 01:31.150


I can create a new folder right here I can go to create files.

01:31.180 --> 01:35.050


I can be able to create anything I want to right inside this folder.

01:35.290 --> 01:35.980


Okay.

01:35.980 --> 01:38.440


So anything you want I can create a new file.

01:38.470 --> 01:43.990


I can go ahead and say I want to create a index dot HTML.

01:43.990 --> 01:47.650


And if I hit enter I have index HTML.

01:47.650 --> 01:51.760


And that is right inside Jay's text I can go ahead and close.

01:51.760 --> 01:53.200


This will come right in here.

01:53.770 --> 01:54.190


All right.

01:54.250 --> 01:56.740


Now I'm going to have created index dot HTML.

01:56.770 --> 02:03.590


The very first thing we need to do is to create our HTML boilerplate to create
boilerplate in Visual

02:03.590 --> 02:03.980


Studio.

02:04.010 --> 02:09.170


All you need to do is to write an exclamation mark and hit enter.

02:09.170 --> 02:11.480


And you have HTML boilerplate.

02:11.480 --> 02:17.210


And now if you want to run this, you can go ahead and move over to the folder and
look for [Link]

02:17.240 --> 02:18.080


and run that.

02:18.110 --> 02:19.730


But that is not what I want to use.

02:19.730 --> 02:25.910


So I want to go ahead and install an extension that will help us to always run our
code and move over

02:25.910 --> 02:27.140


to extension right here.

02:27.230 --> 02:29.810


And we go ahead and start immediately.

02:29.810 --> 02:36.170


So go over here and I'm going to look for extension called Live Server.

02:36.200 --> 02:37.850


So we have Live Server here.

02:37.880 --> 02:44.180


And go ahead and open up that and go ahead and install Live Server saying do you
trust the publisher.

02:44.480 --> 02:47.180


Trust and uh install that.

02:47.180 --> 02:49.640


And very soon that will be installed for us.

02:50.480 --> 02:56.150


So it's getting ready and uh, it doesn't take much time and very soon that will be
installed and we'll

02:56.150 --> 03:00.110


go ahead and start up immediately and get this up and running.

03:01.360 --> 03:02.470


So that is done.

03:02.470 --> 03:08.260


You can see we have live server installed for us, and we can always go back to your
files and move

03:08.260 --> 03:09.430


to index dot HTML.

03:09.460 --> 03:10.990


I can always go ahead and close this.

03:10.990 --> 03:14.350


And for whatever we do, all we need to do just to save.

03:14.350 --> 03:18.850


And anytime you save your file live server, we actually open for you.

03:19.720 --> 03:22.660


So now our head and move over to body.

03:22.660 --> 03:31.480


And I'm going to write a paragraph or let's go ahead and uh create H1 and our head
and say welcome to

03:31.510 --> 03:33.340


JavaScript.

03:33.370 --> 03:33.880


All right.

03:33.910 --> 03:35.800


So this is not our hello world board.

03:35.800 --> 03:41.200


We have just tried to check out the studio and check out the live server and see
how that actually works.

03:41.230 --> 03:46.930


Now I'll go over and set these control s move order to index dot HTML.

03:46.990 --> 03:49.540


Right click that and open with Live Server.

03:49.570 --> 03:53.800


Click on this and we're going to have Live Server start up immediately.

03:53.800 --> 03:56.770


So we have live server start up says welcome to JavaScript.

03:56.770 --> 04:00.860


So try because all I have to do is to go ahead and uh are minimize.

04:00.860 --> 04:06.650


These are always go ahead and shift this by the side as well and say I'm going to
drag this by the side.

04:06.650 --> 04:08.810


And I'm going to also drag this by the side.

04:08.810 --> 04:11.870


And now you can see that both of them are side by side.
04:11.870 --> 04:16.520
And in that way it's going to be easier for me and our guide and close this.

04:16.550 --> 04:21.200


Now once you open this lifesaver for the first time, all you need to do is to go
ahead and click on

04:21.200 --> 04:22.310


save and your lifesaver.

04:22.310 --> 04:32.150


We actually automate quite and said a paragraph tag and I'm going to say this is
George Steve and click

04:32.150 --> 04:34.400


on save and have this is Steve.

04:34.400 --> 04:36.560


And I can go ahead and add any other thing.

04:36.560 --> 04:40.280


And then go ahead and say this is our hash tool.

04:40.310 --> 04:44.690


And I'll go ahead and say, um, we work great guide.

04:44.690 --> 04:54.380


And since we work with uh live Sabah and uh, save this with control s and it shows
we work with left

04:54.380 --> 04:54.800


Sabah.

04:54.800 --> 04:59.900


So this is a simple or a quick set up for Visual Studio.

04:59.900 --> 05:06.010


And now we have learned how to create a folder, how to create index dot HTML file,
and how to set

05:06.010 --> 05:06.910


up the web server.

05:06.910 --> 05:13.030


And that will help us to actually launch our projects immediately without doing
that manually.

05:13.030 --> 05:20.110


So anytime you click on control Save or Control S, it will go ahead and populate
whatever we have on

05:20.110 --> 05:21.040


the browser.

05:21.070 --> 05:22.060


Keep moving immediately.

05:22.060 --> 05:23.620


So go ahead and pause this.

05:23.620 --> 05:26.110


And uh, that is it for now.

05:26.140 --> 05:27.340


Pull it down, play around with it.

05:27.340 --> 05:31.600


And in the next video lecture I will show you how to install atom on your system in
case if you want

05:31.600 --> 05:32.950


to use atom for this project.

05:32.950 --> 05:37.000


But if you don't want to use that tone, you can skip that video lecture and kick
off immediately.

05:37.030 --> 05:37.450


All right.

05:37.450 --> 05:39.280


So that is for people who want to use that tone.

05:39.280 --> 05:45.100


But for Visual Studio, why I continue using Visual Studio and follow me up in this
course throughout

05:45.100 --> 05:47.500


the end of this course, and it's going to be very interesting.

05:47.530 --> 05:48.310


Thank you so much.

05:48.310 --> 05:51.010


And I'm going to see you in the next video lecture.

Common questions

Powered by AI

To set up a project in Visual Studio for JavaScript and web development, first create a project folder by opening Visual Studio, navigating to Files, and selecting 'Open Folder'. Create a new folder on your desktop and name it, for example, 'my website'. Within this folder, create essential files like 'index.html'. To generate the HTML boilerplate, type an exclamation mark and hit enter. For efficient code execution, install the extension called 'Live Server', which automatically opens the project in a browser and updates it upon saving any changes .

To execute a simple HTML application using Visual Studio and Live Server, first create a new HTML file (e.g., 'index.html') within your project and use the exclamation mark shortcut to generate a boilerplate. Install the Live Server extension, which can be found in the Visual Studio extensions panel. Open the HTML file with Live Server to view it in a web browser that automatically refreshes upon saving changes. This setup allows you to instantly test and view the results of your HTML code .

Organizing files and folders systematically in Visual Studio during a project setup offers several benefits. It enhances project clarity and accessibility, making it easier to locate and manage files throughout the development process. This organization also facilitates collaboration, as team members can understand the project's structure readily. Furthermore, it streamlines workflow efficiency by reducing time spent searching for specific files and allows for better version control management through clear and logical folder structures .

To optimize the use of Live Server in Visual Studio for collaborative web development projects, teams can establish a shared repository structure to maintain consistency across development environments. This includes standardized naming conventions and project setup procedures, ensuring all team members have the same Live Server configuration. Teams should also adopt version control systems to track changes and manage conflicts. Additionally, integrating automated testing to validate code changes on save can further enhance collaboration by catching errors early and keeping the development process agile and efficient .

Live Server enhances the development process in Visual Studio by enabling real-time preview of changes made to HTML files. Upon installing Live Server, developers can open HTML files in a browser that automatically refreshes to reflect saved changes. This allows for immediate verification of code, which streamlines the development process and increases efficiency by eliminating the need for manual browser refreshes after each modification .

The use of Visual Studio and its extensions, such as Live Server, significantly impacts a JavaScript developer's workflow by providing powerful tools that enhance productivity and efficiency. Visual Studio offers an integrated environment with features like IntelliSense for code completion and a user-friendly interface for file management. Extensions like Live Server facilitate real-time browser updates, reducing manual refreshes and enabling immediate visual feedback on code changes, thus accelerating the coding-debugging loop and allowing developers to focus more on development rather than tedious task management .

To create and run an HTML boilerplate in Visual Studio, start by creating a new HTML file, such as 'index.html', within your project folder. Inside this file, type an exclamation mark and press enter to automatically generate the HTML boilerplate. Install the Live Server extension to facilitate running the boilerplate. You can then open 'index.html' with Live Server and see the page live in your web browser. Modifications to the HTML will show up instantly after saving .

Visual Studio supports flexibility in project development environments through its comprehensive features and extensive library of extensions, which are not typically found in basic text editors. It allows developers to switch between languages seamlessly and supports integrated tools for debugging, version control, and cloud integration. Extensions like Live Server provide additional utilities directly within the IDE. This flexibility enables developers to tailor their development environment to their specific workflow needs, enhancing productivity, collaboration, and project management. Compared to other text editors that may require additional standalone tools or plugins, Visual Studio offers a unified and versatile platform .

The introduction to HTML boilerplate setup in Visual Studio facilitates learning for new web developers by providing an easy and efficient starting point for building web pages. The use of the exclamation mark shortcut to generate a boilerplate reduces the barrier of entry by simplifying the initial setup process and allowing newcomers to focus on learning HTML content and structure rather than syntax and formatting. By combining this with tools like Live Server for real-time updates, beginners are able to quickly see how their code translates to visual output, reinforcing learning through immediate feedback .

When naming project folders during setup in Visual Studio, it is important to use names that clearly reflect the project's purpose or content, thereby aiding organization and retrieval. Although any name can be chosen, conventional names like 'my website' are suggested for clarity. This practice helps maintain a structured workspace and ensures that team members or collaborators can easily understand and navigate the project files .

You might also like