Welcome to this course! Before we begin, let's discuss the tools you'll need to complete it successfully. As a starter, you will need a code editor. There are numerous code editors available, including Visual Studio Code Editor, V.S Code, Sublime Text, Adam, and more.
In this course, we will be using Visual Studio Code Editor, along with a few extensions for starting a web server and formatting code. However, if you are experienced with another code editor, you are welcome to use your preferred tool.
If you are new to coding or unsure which editor to use, we recommend downloading the latest version of Visual Studio Code Editor. You can do this by visiting code.visualstudio.com.
Thank you for joining this course, and we look forward to helping you achieve your goals!
Now we will be discussing how to install two essential extensions in VS Code. These extensions will help you format your code and launch your website on a development server. Let's begin.
Firstly, we need to open the Extensions panel in VS Code. You can do this by navigating to the sidebar on the left-hand side of the screen, clicking on the Extensions icon, or by using the shortcut Ctrl+Shift+X (Windows, Linux) or Cmd+Shift+X (macOS).
Now that we have the Extensions panel open, let's search for an extension called "Prettier". This extension is a code formatter that can help you format your code to make it more visually appealing. It has been downloaded over a million times, making it a popular choice among developers. You will see an "Install" button next to the extension's name. Please click on it to install Prettier.
The next extension we will install is called "Live Server". This extension will allow you to launch your website inside a development web server. With almost eight million downloads, it is a widely used extension. To install Live Server, search for it in the Extensions panel, click on the "Install" button, and wait for the installation process to complete.
Congratulations, you have successfully installed two essential extensions in VS Code. We hope that these extensions will help you in your coding endeavors. Thank you for tuning in, and we will see you in the next tutorial.
To begin, create a new folder by right-clicking on your desktop or any other location on your computer and selecting the "New Folder" option. For this demonstration, we will name it "html," although you may choose any name you prefer. Next, return to VS Code and access the Explorer panel. Open the folder you have just created by selecting "Open Folder." At present, this folder is empty, so let us add a new file called "index.html."
As previously mentioned, "index.html" frequently serves as a website's home page, and we will proceed with that notion. Close the Explorer panel by pressing "Command + B" on a Mac or "Control + B" on a Windows computer. The first step in this process is to inform the browser that this is an HTML5 document. Begin by typing a left angle bracket. The suggestion list will appear, with "doctype" or "document type" listed first. Press "Enter" or "Tab," and VS Code will generate this code for you.
This line of code is known as a doctype declaration and informs the browser that this is an HTML5 document. The previous version of HTML's doctype declaration was lengthy and unwieldy, but HTML5 addressed this issue. We need only type "doctype html," and it is important to note that HTML is not a case-sensitive language, although we conventionally type everything in lowercase except "doctype," which we will maintain in uppercase.
Next, we will use HTML elements to define the structure of this webpage. The first element we will use is the "html" element, which we can create by typing "html" and pressing "Tab" or "Enter." VS Code will again generate this code for you. The left side of this code is called the opening tag, while the right side is the closing tag. Most HTML elements have both opening and closing tags, although there are exceptions that we will discuss later in this tutorial. Inside this element, we will add two additional elements: "head" and "body." We use the "head" element to provide the browser with information about this page, such as the title of the page that will appear in the browser.
Let us name this page "My First Webpage" using the "title" element. Save the changes by pressing "Command + S" on a Mac or "Control + S" on a Windows computer. Before moving forward, right-click somewhere and select "Open Live Server" to open the page using the development server we just installed.
#htmltutorial #csstutorial #htmlcssfullcourse #html #css #tutorial #fullcourse #course #htmltutorial #csstutorial #htmlcsstutorial #htmlfullcourse #cssfullcourse #webdevelopment #advancedhtmltutorial #advancedcsstutorial #coding #codingtutorial #softwareengineer #softwareengineering #learntocode #supersimpledev #HTML #WebDevelopment # Coding #webdevelopment #fullstackwebdevelopment #webdevelopmentcourses #Nitda #nitdablockchainscholarship