Inspirations:
I have chosen Khan Academy's 'Intro to HTML/CSS: Making Webpages' tutorial. I also watched some parts of 'Don't Fear The Internet - Basic HTML & CSS' content.
I have learned only a little about HTML and CSS in my previous studies, and my understanding of them lacked structure and depth. However, after going through the tutorial, I now have a better grasp of the relationship between HTML and CSS, as well as the structure of both languages. In many web pages I had seen before, HTML and CSS were usually not placed in the same file. Now, I understand that they can be written together when CSS is in the <style> element as a part of the <head> section. HTML defines the various elements on a webpage and their structural relationships, while CSS specifies the style and layout for each component defined in HTML.
Beyond understanding the structure and relationship between HTML and CSS, I have also gained insights into many detailed and useful HTML and CSS tags. Within HTML, I was surprised to discover tags for creating tables and lists, which can be used efficiently for structuring content. In CSS, I clarified the differences between type selectors, class selectors, and ID selectors. The priority of selector types increases in the following order: 1) type selectors (e.g., h1) and pseudo-elements, 2) class selectors (e.g., .example), attribute selectors (e.g., [type="example"]), and pseudo-classes, and 3) ID selectors (e.g., #example). I believe that by using these selectors effectively, specific content on a page can be easily and quickly batch-changed to achieve consistent styling. Additionally, I have learned more about the concept of the box model, including margins, borders, and paddings, and how to utilize them within the <style> element for layout purposes.
However, some aspects still need to be clarified to me. For instance, I understand that specifying the size of a box can cause its contents to overflow. Khan Academy has taught me about solutions like 'overflow: hidden' and 'overflow: scroll.' Nevertheless, if I want the text within the box to adjust automatically with the box's size, is manually adjusting the font size the only solution? I intend to further research the relationship between the box size and its content. Moreover, I am curious about vertical text, particularly in languages like Chinese and Japanese, where characters are sometimes arranged vertically on a page. I have searched for relevant information but still lack a clear understanding. Here is a link that I have found on handling different text directions, but I need to delve deeper into this topic.
The website I made: https://codepen.io/Jiayue-Qiu/pen/wvRexep