1. Overview
The good news is that HTML is fairly simple to learn and there is plenty of resources available for free on the internet!
Aim at learning the basics of HTML, tags, elements and web page structure.
In this video, Brad Traversy crams as much about HTML that he can and teaches you the fundamentals, tags, elements and HTML5 Semantic Tags.
HTML Crash Course For Absolute Beginners
https://www.youtube.com/watch?v=UB1O30fR-EE
If you prefer to learn from written material, here are some great resources to learn HTML:
HTML defines the content of every web page on the Internet. By “marking up” your raw content with HTML tags, you’re able to tell web browsers how you want different parts of your content to be displayed. Creating an HTML document with properly marked up content is the first step of developing a web page.
Basic Web Pages
At its heart, HTML is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page.
Getting started with HTML
2. Code editors
There are a variety of code editors available. Visual Studio Code is one of the most popular and usually recommended by the community. It's free and opensource!
If you have never used a code editor before, it's worth checking some overview videos that will cover just enough for you to get going
Visual Studio Code
https://www.youtube.com/watch?v=MySEbx1jlKE
And here is the link to the official website where you can download Visual Studio Code 👌:
Alternative to VS Code
As an alternative, Atom, developed by GitHub, is also a very popular code editor:
3. Web Page Structure
Learn about the building blocks of the web and become comfortable using elements/tags such as:
@todo picture:
If you're an absolute beginner in web development, you can learn the basics of HTML here. This video covers setting up an HTML file, and the basic HTML tags and what they mean.
HTML Tutorial - How to Make a Super Simple Website
https://www.youtube.com/watch?v=PlxWf493en4
In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column"). This article looks into how to plan a basic website structure, and write the HTML to represent this structure.
Document and website structure
4. Semantic Elements
Different from elements like <div> and <span> that doesn't tell us anything about what sort of content it contains, semantic elements like <header> , <nav> and <article> clearly define its content.
This video is all about semantic HTML elements. If we say we have semantic elements, we’re simply saying that we have elements that have some meaning. We'll learn how we use them to make our markup more descriptive to developers, browsers and screen readers that are used by the visually impaired.
Examples of non-semantic elements include divs and spans, and though these elements are still great, they tell us absolutely nothing about the content that they contain.
HTML5 Semantic Elements In Depth | HTML5
https://www.youtube.com/watch?v=ZC5y7XDdG80
... in this HTML & CSS tutorial for beginners we'll take a look at some of the newer HTML semantic tags, like section, article, header, nav and aside.
HTML 5 Semantics - HTML & CSS Crash Course Tutorial
https://www.youtube.com/watch?v=kGW8Al_cga4
Explore the different semantic elements you can use to define different parts of a web page.
HTML Semantic Elements - W3 Schools
5. Forms
Learn about Forms and its elements: inputs, radio buttons, checkbox, text area and etc.
... in this HTML tutorial I'll explain how to create forms in HTML, (using some newer HTML 5 input fields too). We'll look at email fields, text fields, password fields and more.
HTML Forms - The Net Ninja
https://www.youtube.com/watch?v=YwbIeMlxZAU
Web forms are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage, or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).