Web App Structure and Design: HTML/CSS Roles and Responsive Design Basics

Introduction

Hello. This is a learning record for "How to Make Web Apps with Python". In my previous post, I provided an overview of the entire backend technology landscape. This time, I learned about the basic roles and syntax of HTML and CSS, which constitute the frontend of web applications. Both technologies are deep, and I am once again overwhelmed by the high level of expressiveness in CSS. In this article, I will organize the roles of HTML and CSS, focusing specifically on the mechanism of responsive design—"changing the design without changing anything in the HTML."

1. HTML and CSS: Roles of Separating Structure and Style

HTML and CSS are technologies that complement each other's necessary parts in web service development.

Technology	Role	Features
HTML	A markup language that defines the structure and content of web pages. It composes basic elements such as headings, paragraphs, lists, images, links, and forms.	It is built as a tree structure called the DOM (Document Object Model).
CSS	A language that specifies the style of elements defined in HTML. It specifies colors, fonts, layouts, margins, etc., to achieve a visually appealing design.	It is important for maintaining design consistency throughout the site.

How to Write CSS

CSS is written in the format of "Selector," "Property," and "Value."

CSS-Selector {
　　property: value;
　　property: value;
}

• Selector: Specifies the element you want to apply the style to (e.g., body, h1, .card, ul > li, etc.).
• Property: Specifies the type of style you want to change (e.g., background-color, font-family, padding, etc.).

2. The Principle of Immutable HTML: Basics of Responsive Design

One thing that particularly surprised me while studying was the concept of responsive design: "By specifying CSS effectively, you can achieve designs suited for PC, tablet, and smartphone environments without changing anything in the HTML."
This phenomenon is realized by the principle of separation of roles between HTML and CSS, and the functions provided by CSS.

How Responsive Design Works (CSS Solves Everything)

Responsive design is possible because of the following principles of HTML and CSS:
1. Thorough Separation: HTML purely defines the "meaning of content," and CSS purely defines the "appearance of content." HTML does not need to hold environmental information such as screen size.
2. Media Queries: CSS has a feature (media queries) to apply different styles depending on the viewing environment, such as browser width, height, and resolution.
By using these media queries, you can write instructions in a CSS file like, "If the screen width is 768px or less, hide the sidebar and make the article width 100%." As a result, for the same HTML structure, CSS can dynamically switch the design according to the device.

3. Next Steps: The Path to CSS Mastery Using AI

HTML 'canvas' and advanced CSS layout expressions (Flexbox, Grid, etc.) are deep and take time to master. However, CSS has many patterned expressions, making it one of the areas where AI (such as ChatGPT and Gemini) excels most.

• "Please write CSS for a card centered horizontally on the screen."
• "Please add a media query for XX for responsive support."

By giving such specific instructions, AI will generate accurate CSS code. The expressiveness and usability of a web app depend heavily on your proficiency in HTML/CSS. I intend to use AI as a powerful assistant and improve my HTML/CSS skills in parallel with building backends in Python.

References

"How to Make Web Apps with Python" by Kujira Hikouki, Yoichi Sugiyama, Shunsuke Endo
https://www.socym.co.jp/book/1496