Table of Contents
At the end of this course, you will –
- Be able to develop any website you want.
- work as a freelance website developer.
- Learn the latest frameworks and technologies, including Javascript ES6, Bootstrap 5, MongoDB.
What you’ll learn in this full stack web development course-
- HTML
- CSS
- Bootstrap
- JavaScript
- jQuery
- Node.js
- Angular
- MongoDB
Note: at the end of every tutorial you will find a link to download the program discussed in that particular tutorial.
HyperText Markup Language.
HTML is an acronym of HyperText Markup Language.
- The term Hyper is a Greek term, which means beyond. It is a document that contains a lot of information beyond what you see.
- HTML is used to tell the browser about the structure of the web page.
HTML uses tags to label the text such as this is a paragraph, this is a hyperlink, and this is a heading. - Without tags, we can create an HTML file or we can say a web page but without tags, everything will be in the form of plain text.
- We can not add images/graphics. We can not connect other websites or webpage to our website. Everything will be in the form of plain text.
Let’s create our first HTML file.
- Open notepad or any other text editor.
- You can copy-paste the following paragraph or type any random sentence.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae accumsan sem. Pellentesque sollicitudin odio sit amet mauris faucibus, a fermentum massa malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum posuere risus, ut interdum velit tristique vitae. Fusce non volutpat massa. Pellentesque cursus laoreet lacus nec lacinia. Morbi non magna in elit egestas iaculis. Ut iaculis rhoncus elit, nec fringilla nibh faucibus blandit. Phasellus non tempor lectus, vitae euismod elit. Sed scelerisque dignissim ante. Nullam dictum tempor nisi in ultricies.
Save as the file as withouttags.html. you can give any name to the file just remember to add .html or .htm after your filename without any space. Open this file in your browser to check how it looks.
Output:
Congratulations! you have created your first webpage.
Software required for the course
- Visual studio code.
- Node.js (NPM package manager)
Now you know how to create a webpage or HTML document by using text editor like notepad but throughout this tutorial, we will use visual code studio. It’s free and you can download it here. You can use any editor as per your convenience. You can find a list of editors here. After installing VS Code we can download node.js. Node.js will provide a Package Manager tool NPM (Node Package Manager). This tool is used to download and install various libraries required for projects. We will discuss Node.js in upcoming tutorials so don’t worry if you don’t know about Node.js. We will run our code on a live server to check the appearance of the webpage. After installing the main software its time to install two add-ons in to VS Code.
- Live Server/local server.
- IntelliSense for CSS class names in HTML (Optional). This extension provides CSS class name completion for the HTML class attribute.
Why do we need a live server/local server in visual studio code?
Before publishing the website online we can check how the website looks and behaves in different conditions and on different devices by using a local server on the same pc. Once you or your client is happy with the website structure and functionality you can publish it actually on live webserver. In addition to this, some browsers will not run async requests, and to run server-side languages we need a special server to execute the code and display the web page.
In the next tutorial, we will learn how to use visual studio code and how to create a .json file by using node.js and we will also create a project folder and we will learn how to organize the project files.
Add a Comment