Step 1 - Create a blank solution
To create a blank solution, we go through the following steps:
- Launch the Visual Studio and select "Create new project" from the starting page.
- The "Create a new project" window will appear, displaying a list of all available templates. Search for "blank" or "solution" and select the "Blank Solution" template.
Click "Next" to configure the solution.
- Give the solution a name and then click the "Create" button.
Visual Studio IDE should now create a blank project with an empty Solution Explorer.
Step 2 – Add existing Web Site in the Solution
In this step, we are going to add a "Web Site" that uses a local file system. The web site doesn't exist yet, but it will be created using the steps below.
- Right-click on empty Solution Explorer and select Add > Existing Web Site from the context menu.
The "Add Existing Web Site" window will open. Select File System from the left sidebar. We select the location of our website project from the folder dialog. We can add it to our solution path, but this is not required. At the bottom is an input field that contains the path to the selected folder.
In the example below, we added the "MySimpleWebSite" at the end of the selected path. The
MySimpleWebSitefolder doesn't exist yet, but it will be created in the next step.
- Click "Open" and if the folder does not exist yet, it will ask us if we want to create it. Click "Yes".
- Visual Studio will add the Web Site to the current project solution. It might show us the "Target framework not supported" window and recommend we update to .NET Framework 4.8. Leave the first option selected and press the "Continue" button.
This will create a
Web.configfile in our project. We won't be using any .NET components, but we still need
web.configfile to have debugging enabled. It is set to "False" by default, but when we run the project with "Run with Debugger", Visual Studio will ask us if we want to enable the Debugging.Note: In some cases, Visual Studio might not create
Web.configfile at all, but when we first run the project it will ask us if it should "Add a new Web.config file with debugging enabled.". Click "OK" so we can make use of the debugging.
Now, let's start adding some files to our website.
Step 3 – Add new items to the project
In this step, we will add three files to our project. Right-click on the website folder inside Solution Explorer and select Add > Add New Item as shown below:
This will open the "Add New Item" window from where we can choose the file type to add to the project.
In our case, we need to add the following items:
- HTML Page
index.htmland click "Add". This is the HTML page that will open when we run the project. It will contain minimal HTML content.
Rename the file
index.htmlwill need to reference this file.
- Style Sheet
Rename this to
style.cssand click "Add". We can add CSS rules here to style our HTML page.
After we've added all three files, our Solution Explorer should now look something like this:
index.html needs to reference them.
We can add the necessary code manually or we can open
index.html in the code editor and "Click+Drag" the
style.css files from Solution Explorer into the code editor.
hello.js, this is what gets added:
The above code should be placed before the closing </body> tag.
style.css, the following code is added:
<link href="style.css" rel="stylesheet" />
style.css code should be placed within the
<head></head> section of the
Content of index.html
index.html file should now contain the following HTML code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="style.css" rel="stylesheet" /> </head> <body> <script src="hello.js"></script> </body> </html>
See the Pen
Copy the content of the HTML tab to the
index.html at the beginning of
<body> section. The content of the JS tab should be copied into
hello.js file and the content of the CSS tab into
If we now run the project now (Menu > Debug > Start Debugging or F5), we should get the same result in a browser as shown in the above CodePen example.
index.html page, so that the HTML page references both files.
EvanOctober 13, 2016
I've tried it without this code, and it doesn't work as I'd expect it to, so this code is obviously doing something; but what exactly it does is still unclear to me. Why don't we want the enter button to simulate a "submit" event? Isn't this exactly what clicking on the "submit" button would do? Why do the two mechanisms work differently without the above code?
Thanks a lot!
adminOctober 13, 2016
I'm glad you have found this tutorial helpful.
That is why
onclickevent to call ShowHelloMessage function.
HelgyMarch 7, 2017
You solved my problem with VS, thx.
NamanNovember 21, 2017
How did you add the .css file
I used property but not getting same results
adminNovember 21, 2017
Good catch. I didn't mention anything about CSS. I have now updated the article.
MollerOctober 14, 2020
adminOctober 14, 2020
NewbieJSCoderMarch 11, 2021
Jenny CraigOctober 30, 2021
Thanks for sharing this helpful post!
Jace MalloyNovember 2, 2021
I wanted a simple test-bed/sandbox, and this was exactly what I was looking for.
Layout and associated verbiage were well done.
Thank you. Much appreciated