HTML and CSS are the most fundamental building blocks of a webpage, and they are also your first step towards becoming a web developer. This chapter covers everything you need to know about HTML & CSS, and by the end, you will be able to design responsive webpages that works on any devices. This HTML & CSS tutorial is also available in PDF format, and can be downloaded for free.
What is HTML?
HTML is the standard markup language used to create webpages. It defines the structure and content of webpages using HTML elements, such as headings, paragraphs, images, links, forms, and more. These elements tell the browser what information should be displayed on the webpage.
To start writing HTML code, you can use the CodePen demo below:
On the left side, you will find the HTML source code, which is essentially the blueprint for what will be displayed. The browser will then transform this blueprint into the webpage you see on the right side.
You can modify the source code directly to see how it affects the displayed webpage.
Prepare your computer for web development
Of course, in practice, you cannot rely on tools such as CodePen to create a fully featured web application. You must make sure your computer is ready for web development.
To get started, make sure you have a browser installed. Any popular web browser such as Google Chrome, Microsoft Edge, Safari, or Firefox, should be sufficient for this course. You may download and install the browser from the linked websites.
In addition, you'll need a code editor to write and edit your code. Visual Studio Code is a great option for beginners (and professionals, for that matter). It is the most popular code editor in the world. Simply download the appropriate installer for your operating system from their official website.
After you've installed VSCode, make sure to install the Live Server extension as well. Navigate to the Extensions tab on the left sidebar, and type in Live Server in the search box. From there, you'll be able to download and install the extension.
Live Server will create a local development server with the auto-reload feature. For example, create a new work directory and open it using VSCode.
Create a new file named index.html under this directory. The .html extension indicates that this is an HTML document. Type in ! in VSCode, and you will see suggestions like this:
This is a shortcut for creating HTML documents quickly. Select the first option, and the following code should be generated.