HTML Frontend Learning | Beginner's Diar
Hello everyone, I am a complete beginner who has just started learning front-end development. I have never been exposed to programming at all before, and I didn’t even know what VS Code was. Starting today, I will keep a diary of my HTML learning journey. On the one hand, it’s to leave myself a memento for future review. On the other hand, I hope to encourage other newcomers learning front-end together and help everyone avoid the pitfalls I’ve stumbled into.
- First Encounter with HTML & Getting Equipped with Essential Tools Today marks the official start of my front-end learning journey. First, I figured out what HTML truly is. It is not a programming language, but a HyperText Markup Language. Simply put, it uses predefined tags to mark elements such as text, images and links on web pages, telling browsers “this is a heading”, “this is a paragraph”, “this is an image”. It is responsible for building the basic structure of a webpage, just like the framework of a house. It does not handle styles or interactions—those are managed by CSS and JavaScript, which I will learn later.
Next, I prepared my development tools. Countless tutorials recommend VS Code as the top choice for beginners, and it is widely used by most front-end developers in the industry. Downloading and installing it is straightforward with a one-click installation from the official website. However, the default interface is fully in English, which confused me at first. I then found and installed the Chinese language extension to switch the interface to Chinese with one click, making it much more user-friendly.
I also installed the Open in Browser extension. It allows users to open edited HTML files directly in browsers via right-click, which will greatly improve operational efficiency in practical practice. This is a must-have tool for all beginners.
I didn’t tackle overly complex content today. I just got familiar with the basic operations of VS Code, created my first text file, changed its suffix to .html, typed a few simple lines of text, saved the file, and opened it by double-clicking. Seeing the content displayed normally in the browser gave me a small sense of accomplishment. Even though it was just plain text, I knew I had taken my first step in coding.
When creating my first file, I forgot to modify the file suffix and saved it as a .txt document. It took me a long time to figure out why it still opened as a text file. A crucial reminder for beginners: HTML files must use the .html suffix.
- Mastering the Basic HTML Structure & Memorizing the Core Template Today’s core learning focus is the fundamental structure of HTML documents. According to tutorials, all HTML web pages follow a fixed universal structure, known as the core foundational template that every learner must memorize. All web content is added and filled within this basic framework, and I’ve kept this key point firmly in mind.
Below is the template code with detailed notes for each line to help me memorize and understand better.
<!DOCTYPE html>
<head>
When I first started memorizing them, I always mixed up the differences between head and body. Besides, the tutorial says this line is mandatory.
I also learned how to write comments today. In VS Code, you can add comments with one click by pressing Ctrl+/. Comments won't be displayed on web pages; they are for personal or others' reference to explain the functions of code. My teacher emphasized that developing the habit of writing comments is crucial. When there is a large amount of code in the future, comments will help me quickly locate my own content, and I will stick to this habit from now on.