HTML Frontend Learning | Beginner's Diary https://write.otter.homes/html-frontend-learning-beginners-diary/ Mon, 04 May 2026 13:58:22 +0000 Day 3: Learn Text Tags and Master Webpage Text Layout https://write.otter.homes/html-frontend-learning-beginners-diary/day-3-learn-text-tags-and-master-webpage-text-layout <![CDATA[Day 3: Learn Text Tags and Master Webpage Text Layout Today, I started learning specific tags, beginning with the most basic text tags, as text makes up the majority of webpage content. I mainly studied heading tags, paragraph tags, bold and italic tags, as well as line break and divider tags. I practiced each one repeatedly and gradually got the hang of them. The heading tags range from h1 to h6. From h1 to h6, the font size decreases progressively, with built-in bold styling and top-bottom margins. Importantly, a single webpage can only contain one h1 tag, which is used for the most critical title and benefits SEO, while multiple h2 to h6 tags are permitted. I coded all heading levels, saved the file, and opened it in a browser; the differences between them were clear and intuitive at a glance. The paragraph tag is p, used to wrap paragraph text. Unlike plain text written directly on the page, content within separate p tags has default spacing between paragraphs for a neater layout. Previously, I typed content directly in the body section, resulting in cramped, clustered text. After using the p tag, the page layout became much cleaner instantly. The bold tag is strong and the italic tag is em. A key takeaway: b can also bold text and i can italicize text. However, tutorials recommend prioritizing strong and em for their semantic meaning, whereas b and i only control visual styles. It is more standardized to manage styles with CSS later on, so beginners should develop good coding habits early. The line break tag is br / and the horizontal divider tag is hr /. Both are self-closing single tags with no corresponding closing tags required. Simply inserting br / creates a line break, and hr / inserts a horizontal line on the page to divide different content sections, which is extremely practical. Common Pitfall Reminder: When I first started writing tags, I frequently forgot closing tags. For instance, I would add an opening p but omit the closing /p. After saving and opening the webpage, the entire text layout fell apart. I later learned that most HTML tags are paired double tags that must be used in matching sets, with only a few single tags exempt from closing tags. This detail requires close attention. Day 4: Hands-on Practice – Building a Simple Personal Introduction Page After three days of foundational learning, I completed a practical exercise today by creating a basic personal introduction page to apply all the tags I had learned and assess my learning progress. The page structure was straightforward. I used the h1 tag for the main title "My Personal Introduction", p tags for descriptive text, strong to highlight key information, hr / to separate different content sections, and line break tags to adjust text line breaks for a tidier visual effect. I encountered a minor issue during coding: I wanted to center the text but had no idea how to do it. After checking tutorials, I discovered that pure HTML cannot directly adjust text alignment or other styles, and CSS is required for visual modifications. Since I have not learned CSS yet, I put the centering adjustment aside and focused on ensuring a correct page structure first. There is no need to rush. I will solidify my HTML fundamentals first and optimize the design with CSS in later studies. Additionally, I experimented with list tags, including the unordered list tag ul and list item tag li, to organize my skill list, such as "HTML (In Progress)" and "CSS (Not Started)". Wrapping each skill item with li inside an unordered list greatly improved content organization and looked far more structured than listing content in separate paragraph tags. Once finished, I right-clicked the file and opened it in a browser via the Open in Browser plugin. Seeing my first self-coded simple page, despite its plain design with no decorative styles, filled me with a strong sense of accomplishment. Practical hands-on practice is far more motivating than merely watching tutorials and taking notes. Summary of Four Days of Learning: I have gone from having zero knowledge of HTML to constructing basic webpage structures. I have mastered core text tags and list tags, and become proficient in basic VS Code operations. Though I encountered many coding pitfalls along the way, solving each problem helped me acquire new knowledge and skills. Future Learning Plan: I will continue to study image tags, hyperlink tags and form tags, which are essential elements for mainstream webpages. Mastering these tags will enable me to develop more feature-rich and diverse webpages. Lastly, I want to share a message with fellow new front-end learners: do not fear difficulties or seek instant results. Take things step by step, learn a little each day, practice consistently and summarize regularly, and steady progress will follow. I will continue to update my learning journal to record every stage of my growth. Let’s encourage each other and strive to move from beginners to skilled developers soon!💪]]> Day 3: Learn Text Tags and Master Webpage Text Layout Today, I started learning specific tags, beginning with the most basic text tags, as text makes up the majority of webpage content. I mainly studied heading tags, paragraph tags, bold and italic tags, as well as line break and divider tags. I practiced each one repeatedly and gradually got the hang of them.

The heading tags range from

to

. From

to

, the font size decreases progressively, with built-in bold styling and top-bottom margins. Importantly, a single webpage can only contain one

tag, which is used for the most critical title and benefits SEO, while multiple

to

tags are permitted. I coded all heading levels, saved the file, and opened it in a browser; the differences between them were clear and intuitive at a glance.

The paragraph tag is

, used to wrap paragraph text. Unlike plain text written directly on the page, content within separate

tags has default spacing between paragraphs for a neater layout. Previously, I typed content directly in the body section, resulting in cramped, clustered text. After using the

tag, the page layout became much cleaner instantly.

The bold tag is and the italic tag is . A key takeaway: can also bold text and can italicize text. However, tutorials recommend prioritizing and for their semantic meaning, whereas and only control visual styles. It is more standardized to manage styles with CSS later on, so beginners should develop good coding habits early.

The line break tag is
and the horizontal divider tag is

. Both are self-closing single tags with no corresponding closing tags required. Simply inserting
creates a line break, and
inserts a horizontal line on the page to divide different content sections, which is extremely practical.

Common Pitfall Reminder: When I first started writing tags, I frequently forgot closing tags. For instance, I would add an opening

but omit the closing

. After saving and opening the webpage, the entire text layout fell apart. I later learned that most HTML tags are paired double tags that must be used in matching sets, with only a few single tags exempt from closing tags. This detail requires close attention.

Day 4: Hands-on Practice – Building a Simple Personal Introduction Page After three days of foundational learning, I completed a practical exercise today by creating a basic personal introduction page to apply all the tags I had learned and assess my learning progress.

The page structure was straightforward. I used the

tag for the main title “My Personal Introduction”,

tags for descriptive text, to highlight key information,

to separate different content sections, and line break tags to adjust text line breaks for a tidier visual effect.

I encountered a minor issue during coding: I wanted to center the text but had no idea how to do it. After checking tutorials, I discovered that pure HTML cannot directly adjust text alignment or other styles, and CSS is required for visual modifications. Since I have not learned CSS yet, I put the centering adjustment aside and focused on ensuring a correct page structure first. There is no need to rush. I will solidify my HTML fundamentals first and optimize the design with CSS in later studies.

Additionally, I experimented with list tags, including the unordered list tag

    and list item tag
  • , to organize my skill list, such as “HTML (In Progress)” and “CSS (Not Started)”. Wrapping each skill item with
  • inside an unordered list greatly improved content organization and looked far more structured than listing content in separate paragraph tags.

    Once finished, I right-clicked the file and opened it in a browser via the Open in Browser plugin. Seeing my first self-coded simple page, despite its plain design with no decorative styles, filled me with a strong sense of accomplishment. Practical hands-on practice is far more motivating than merely watching tutorials and taking notes.

    Summary of Four Days of Learning: I have gone from having zero knowledge of HTML to constructing basic webpage structures. I have mastered core text tags and list tags, and become proficient in basic VS Code operations. Though I encountered many coding pitfalls along the way, solving each problem helped me acquire new knowledge and skills.

    Future Learning Plan: I will continue to study image tags, hyperlink tags and form tags, which are essential elements for mainstream webpages. Mastering these tags will enable me to develop more feature-rich and diverse webpages.

    Lastly, I want to share a message with fellow new front-end learners: do not fear difficulties or seek instant results. Take things step by step, learn a little each day, practice consistently and summarize regularly, and steady progress will follow. I will continue to update my learning journal to record every stage of my growth. Let’s encourage each other and strive to move from beginners to skilled developers soon!💪

    ]]> https://write.otter.homes/html-frontend-learning-beginners-diary/day-3-learn-text-tags-and-master-webpage-text-layout Mon, 04 May 2026 13:10:07 +0000 HTML Frontend Learning | Beginner's Diar https://write.otter.homes/html-frontend-learning-beginners-diary/html-frontend-learning-beginners-diar <![CDATA[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. &lt;!DOCTYPE html&gt; html lang="zh-CN" &lt;head&gt; <meta charset="UTF-8"&gt; &lt;title&gt;我的第一个HTML页面&lt;/title&gt; /head body /body /html 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. ]]> 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.

    1. 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.

    1. 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.

    ]]>     https://write.otter.homes/html-frontend-learning-beginners-diary/html-frontend-learning-beginners-diar Sat, 25 Apr 2026 13:07:02 +0000