Learn How To Create Your First HTML Web Page From Scratch Using Visual Studio Code In 5 Minutes.
A website is typically a collection of HTML web pages that are linked together and hosted on a web server on the internet. A typical HTML (hyper text markup language) web page is made up of 3 seperate layers that work together to deliver an experience to a user. There is a content layer which consists of the information you see on the page, a presentation layer that handles how that information looks, and a behaviour layer that allows users to interact with that page. This tutorial is for the complete beginner and aims to teach you how to create your first HTML web page from scratch using an Visual Studio Code In just about 5 minutes. You will also learn about the basic structure of a web page, HTML tags, HTML attributes, how to add comments in your HTML code and how to inspect network traffic using dev tools built into almost any web browser . A free video tutorial is also available on youtube, click on the “VIEW YOUTUBE TUTORIAL” button below to watch now
Requirements.
In order to complete this tutorial successfully the following items are required. Please ensure to have these items available before taking implementation action on this tutorial:
1) Visual Studio Code version 1.53 or newer
2) A web browser such as google chrome, mozilla firefox or safari
3) Prettier – visual studio code formatting extension
4) Live Server – visual studio web server extension
OVERVIEW
1) Programming languages you should learn and the basic structure of an HTML web page
2) Download and install visual studio code
3) Install the prettier and live server extensions in visual studio
4) Create a basic web page using HTML, CSS and JAVASCRIPT and test the page using the LIVE SERVER extension.
5) HTML tags, attributes and comments
6) Inspecting HTML network traffic using web browser developer tools.
Programming languages You Should Learn And The Basic Structure Of An HTML Web Page.
1) Every website has two parts, a front end and a back end. The front end is the part that you see and interact with in your browser whilst the backend is the part that powers the frontend and deals with storing of user and non generated data in a database or storage system / service. Therefore web development jobs fall into 3 main categories, front end development, back end development and full stack development (front end + back end).
Front end developers use three main programming languages which you should learn and master and these are HTML, CSS and JAVASCRIPT. HTML (Hyper Text Markup Language) is used to build the structure of a web page, CSS ( Cascading Style Sheet ) is used for adding styling, colours, typography to an HTML web page and JAVASCRIPT is used for adding functionality to a web page.
2) To become a good front end developer, we recommend that you start learning HTML & CSS and spend about 4 to 5 hours every day for 7 weeks. You can then proceed to learn JAVASCRIPT for an additional 7 weeks. We also recommend that you learn frontend frameworks such as REACT, ANGULAR and VUE. Therefore the following is a list of Programming languages, frameworks and markup languages that we recommend to be a good front end developer:
1) HTML
2) CSS
3) JAVASCRIPT
4) REACT, ANGULAR or VUE
5) GIT
3) Many websites on the internet have many different types of beautiful structures and complex layouts however when you are starting out as a web developer it is important to know the basic structure of a website and where important HTML tags should be placed.
A basic website should have a HEADER SECTION where you can place items such as the website logo and navigation bar. It should have an HTML BODY where all the content such as text, images and forms should be placed. A FOOTER section is also needed on a web page where you can place items such as a quick links, social share links and a site map. The website should also have sidebars for placing items such as ADS for monetization.
Step 1: Download And Install Visual Studio Code
4) Click HERE to go to the visual studio code website and click on the DOWNLOAD button.The download page will detect the operating system you are using and display the appropriate download button.
Step 2: Install Prettier and Live Server Extensions.
5) Install Visual Studio Code on your computer. Once the installation process is complete, open VSCode and click on the EXTENSIONS button. Use the search bar to search for “prettier. On the PRETTIER – CODE FORMATTER search result, click on the INSTALL button.
6) Live server is a web server built for visual studio code that allows you to load static and dynamic web sites and web pages. This makes your web development efforts easier and you do not need to build and/or manage a seperate web server.
On the extensions search bar, search for “LIVE SERVER” and on the LIVE SERVER search result click on the INSTALL button.
Step 3: Create a basic web page using HTML, CSS and JAVASCRIPT and test the page using the LIVE SERVER extension.
7) On your desktop or any other location on your computer, create and new folder and name it MYFIRSTWEBPAGE. This folder will be used to save all HTML, CSS and JAVASCRIPT files for the web page that you are creating.
In VISUAL STUDIO CODE, click on the EXPLORER and click on the OPEN FOLDER button. Select the MYFIRSTWEBPAGE folder and click on OPEN.
Click on the NEW FILE button shown on the MYFIRSTWEBPAGE folder, name the file index.html and press ENTER.
NB: THE INDEX.HTML FILE REPRESENTS THE HOME PAGE OF A WEBSITE
8) Type in the following code to set the document type to HTML and to set the structure of the web page:
9) The diagram in the image on the right is an illustration of what the HTML code above does. This is a visual depiction of the structure of the HTML web page.
DOCTYPE HTML tag – tells the web browser that the web page is an HTML document. The HTML tag – indicates where the HTML web page starts and ends.
The HEAD tag – is used to give the web browser information about the web page such as the title of the page and CSS styling.
The TITLE tag –
The BODY tag –
10) Next, add some content to the body of the HTML web page. The content will be on the form of a blog post that will have a image, a blog title and blog text paragraphs.
