How do I use HTML? Where do I start if I want to be a programmer? Follow this guide on how to download Microsoft Visual Studio Code and use it to create a simple website.
Part 1 Visual Studio Code
Step 1 - Download Microsoft VS Code
Click here to go to the download page for Microsoft Visual Studio Code. Click download or click the drop down and select the stable version for your operating system.
Step 2 - Once the file has downloaded, double click it to run it
Step 3 - Accept the agreement and click next
If you want a desktop icon, check the box for it after you accept the agreement.
Step 4 - Click Install
Step 5 - After installation has completed, click finish
Leave the box next to Launch Visual Studio Code checked. Once you have clicked finish it should open visual studio code.
Step 6 - Open VS Code, if it didn't open automatically
If VS Code did not open, type "Visual Studio Code into your windows search box. It should show up in results, click on it to open it.
Congrats you have setup your first IDE! It should like the image below, it may look different if you are seeing this after the November 2019 version. No worries it will work the same way.
Part 2 Create a simple web page
Step 1 - Create an HTML file
Click file in the top left corner and select new file, or press CTRL N. A new file window will appear and will be named something like Untitled-1 by default.
Step 2 - Copy and paste this simple HTML into the VS Code window. I will explain it later.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title> My New Website</title>
</head>
<body>
<h1>This is a Title for My New Website</h1>
<p>This is a paragraph. It was not very hard but it does not look that great, but that is what CSS is for and will learn that later.</p>
<a href="https://www.mynextemployee.com">Click here to go to MyNextEmployee.com</a>
</body>
</html>
Step 3 - Save the site as an html file
Click file in the top left corner, then click save, or press CTRL S.
A file window will open, change the file name to mynewwebsite.html and then save it to your desktop so you can find it in the next step. You do not have to set the file type in "Save as type" if you make sure to put .html after the name of the file.
You have now created a website! You should see the colors of the code change in Visual Studio Code. This will make it much easier to analyze it later. Lets test it first in the next step.
Step 4 - Test your new site!
Go to your desktop and find the file you saved above.
Right click on the file and select open with... and select chrome or internet explorer if you do not have chrome. Your new web page should open in your browser!
Step 5 - Explanation of HTML code.
Now that you can see your website lets look at each item and the website as a whole.
The code may look confusing at first, that is normal and get used to it.
Ignore lines 1 and 2, you should not worry about these. Seriously while learning this stuff, just focus on what I am showing you, you really do not need to know anything about these other lines until you a much farther down the road.
Basic HTML
HTML is split into sections, each section is defined by its opening <head> and closing tags </head>, you will learn this in codecademy later.
<head>
The <head> </head> element is a container for metadata (data about data). It will be used to connect the html document to css and javascript documents way down the road. For now I am just going to show you the Title inside the head.
</head>
<title>
In line 5 you can see tags for title. The title element:
Defines a title in the browser tab
Provides a title for the page when it is added to favorites
Displays a title for the page in search engine results
</title>
<body>
The body is where all the items we can see reside.
Look at the text "This is a title for My New Website", the <h1> & </h1> tags tell the text to be a header. Try changing this text to something else, then click save and then refresh your website.
Try changing the text in the paragraph in line 9. You can probably guess that the <p> </p> tags stand for paragraph.
Finally you can see a more complex looking set of tags <a href> </a>. This is used to create text that links to a web address. Try changing the website from my website to one of your choosing. Click save, refresh your website and click on the link. You can change the display text to anything.
</body>
In line 12 you will see the closing tag for the entire html page.
For me, programming is about testing and failing. Once you have messed things up enough you will know what will work and what will not. Try and try again. There is no harm in failing. Play around with this website and mess some stuff up.
What do you do from here??
I'll tell you what no one told me.
Programming languages are not interchangeable.
You need to know a few of them to do something usable and nice looking.
Each programming or markup language serves a different purpose and act as puzzle pieces.
HTML is like your skeleton, CSS is your skin and hair, it makes things look good, JavaScript allows you to walk, talk and make decisions based on inputs.
Example 2 - the button on this screen are defined in HTML, the color and roundness of the buttons are controlled in CSS, the action of clicking the button and it taking you to another page is JavaScript.
It is not as hard as you think it is to build something cool once you have some basic fundamentals.
Codecademy.com will take you far down the path and it will be more fun that trying to figure it out on your own. It gives you immediate feedback and provides the solution if you get stuck. It will be one of your best friends.
Codecademy.com is this awesome website where you can learn pretty much any programming language with fun interactive examples and projects. The free courses like the ones below will teach you how to make basic websites. I am in no way affiliated with Codecademy.com, I am just someone who knew nothing about programming two years ago and now I know enough to enjoy it and build fun projects and that is primaryily because of that website.
Step 6 - Learn HTML with Codecademy!
Step 7 - Learn CSS with Codecademy!
Step 8 - Learn JavaScript with Codecademy!
Please comment and share if this post was helpful or if you have any suggestions. Seriously everything helps me to provide better guides.
Terminology that will help you! These are very simplified.
I went through tons of websites to find my favorite definitions. Sources listed at bottom.
IDE - Video
An Integrated Development Environment is an interface for users to write code. Microsoft Visual Studio Code is a great IDE.
HTML - Video skip to 0:23 seconds
Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.
CSS - Video
Cascading Style Sheets. It is a markup language responsible for the visual elements of a website. CSS tells the browser how the HTML elements should be displayed. CSS is used to apply colors and to determine font, text size and alignment, to name just a few.
JavaScript - Video
JavaScript is a programming language that adds interactivity to your website. For example when playing a game online, if you press buttons to move a character, JavaScript performs the action.
Cache - Video skip to 1:00
A cache is a temporary storage space for data. When you visit a website, the files that you request are automatically stored in the cache like HTML, JavaScript, and CSS files. If you return to that same website in the near future, your browser will retrieve the necessary files from your cache rather than from the original server — so the webpage will load quicker. Tip: use CTRL SHIFT R to reload a website without using cached files.
Wireframe - Video