Download Web Development basic of html and more Study notes Programming Languages in PDF only on Docsity!
Introduction to HTML, #Note 1
In this notes, you will learn about various technologies that can be used to create websites from start to finish. I will teach you how to create successful and profitable websites, covering all aspects of the process. All of the videos for this course can be found on my channel. If you're interested in learning web development, I have a free notes available on studypool. This Notes is designed for beginners who have no prior knowledge of web development or programming. I cover everything from the basics to the end, so you'll be able to start from scratch.
HTML Installing VS Code & Live Server | #Notes 2
HTML Tutorial
Let's quickly recap what we learned in the last Notes. We learned that in order to build websites, we need HTML, CSS, and JavaScript. When we request a website from a server, it responds with HTML and CSS. In this Notes, we will learn how to write HTML code. While you can write HTML in Notepad, I recommend using an integrated development environment (IDE) like VS Code to make your workflow faster and more efficient. To install VS Code, simply search for "Visual Studio Code" and install the software. VS Code provides suggestions and makes your work easier with multiple tabs. Once you have installed VS Code, create a new folder called "Complete Web Development Boot" and open it in VS Code. If you cannot find the "Open with Code" option, try restarting your computer and opening VS Code again. If that doesn't work, try reinstalling VS Code and restarting your computer again. Don't worry if you are new to VS Code, just follow my lead and you'll be fine.
To create a new HTML file, simply create a new file with the extension ".html". For example, "harry.html" is a simple HTML file. If you want to create a website, just start writing HTML code in this file. This is an HTML file that will be used to create a CSS file (hari.css) and a JavaScript site (harry.js). These are different types of files, but I won't go into detail about CSS and JS right now. Let's start with HTML. We created three types of files with the help of VS Code. If you had to create these files using Notepad in a folder, you would have faced a lot of problems. You would have to make files one by one and then edit them from Notepad. Additionally, you wouldn't have syntax highlighting. For example, if I write "console" in JavaScript, it suggests "log" to me, showing me how to pass arguments inside it. I won't show you this much, but I want to show that it suggests things to me. Hence, we don't use Notepad. We can use it, but we don't prefer to. We use any IDE or any source code editor. For a web browser, I recommend Google Chrome. It's a good, stable browser. I will be using this browser throughout the course. If you want to use something else, you can use Firefox, etc. But I will use Chrome just for your information.
HTML Tutorial: Basic Structure of a Website | # Notes
Introduction to Web Development
In this Notes, we covered various aspects of web development, starting with the basics of HTML and CSS.
HTML
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It provides the structure and content of a webpage, and includes elements such as headings, paragraphs, links, and images.
Introduction to Website Structure
In this tutorial, we will be focusing on the basic structure of a website using JavaScript. Assuming that you have already installed VS code and Liveserver, we will take things further by c
HTML Tutorial: Title, Script, Link & Meta Tags | # Notes 4
In the previous Notes, we discussed the basic structure of a website. Now, let's take a look at how a website actually looks. Don't forget to access and save this playlist if you haven't already!
Purpose of Tutorial
The purpose of this tutorial is to understand the head of HTML. We will start by reviewing the basic structure of HTML and then go into detail about what is written in the head and body sections.
Creating a New File
To start, open VS Code and create a new file called harry.html. Then, create a new file named tut4.html using basic Emmet abbreviation (type "!"). Press enter and the file is ready to be edited.
Understanding the Head Section
In the head section, we see the meta charset= '' UTF-8 '' tag which indicates the character set being used in the HTML file.
reating three files including CSS.
HTML Tutorial: Headings & Paragraphs | # Notes 5
For beginners, let me explain Emmet Abbreviation. After typing an exclamation mark and hitting enter, it provides auto-complete options. It's better to use this tool than to ask questions about it.
Emmet: A High-Speed HTML Coding and Editing Tool
If you're looking for a way to speed up your HTML coding and editing process, Emmet is the tool for you. This set of plug-ins for text editors provides a fast and efficient way to write HTML code. Emmet is built into VS code, so you don't need to download or install anything extra. Once you start using it, you'll be amazed by how quickly you can write HTML code.
