Web development's basic principles — HTML, CSS and CMS
The technical foundation you need to know to design for and collaborate on the web
Although you as a media designer do not necessarily have to code yourself you work closely with web developers — and the better you understand the technology behind a website the better your design decisions and collaboration become. Web is not just a canvas; it is built of structures that have their own rules and limitations.
§HTML — content structure
HTML (HyperText Markup Language) is the language that describes the structure of content on a web page: what is a heading, what is a paragraph, what is a list or an image. HTML does not tell you how something should look — only what it is. This is an important distinction: when used correctly, HTML makes a page understandable to browsers, screen readers, and search engines, regardless of how it is visually designed.
§CSS — appearance and layout
CSS (Cascading Style Sheets) controls how the HTML content should look: colours, typefaces, spacing, placement. Because appearance and content are separated the same HTML content can be displayed very differently depending on the CSS — it is among other things what makes responsive design possible where a page adapts its layout to screen width.
- 01The box model — each HTML element is a box with content, padding, border and margin, which CSS controls.
- 02Flexbox and grid — modern CSS tools to place elements flexibly on a page or in a grid.
- 03Responsive design — the layout automatically adjusts to the screen size, from a large computer screen to a small mobile.
- 04Breakpoints — the screen widths where the layout switches from one set of rules to another.
§From static page to CMS
A pure HTML/CSS website is static: content only changes when a developer edits the code. Most websites today are instead built on a CMS (content management system) — a system that separates content from technical design so an editor without coding knowledge can update text and images through a user interface.
| Type | Characteristic |
|---|---|
| Static HTML/CSS | No database fast and simple but requires a developer to update content |
| Traditional CMS | Content, design and functions combined in one system, editors can update themselves |
| Headless CMS | Content is stored separately from the display and can be displayed on multiple platforms (web, app, screen) via the same content |
| E-commerce platform. | CMS specialised for products, cart and payment |
§Semantic code and accessibility
Semantic HTML means using the right elements for what they are made for — a heading as a heading a button as a button not just a box with text in it that looks like a button. It sounds like a detail but it is crucial for accessibility: a screen reader can only tell a sight-impaired user that 'there is a button here' if the code actually says it is a button.
§Cooperation with developers
The better you understand how a design becomes code, the easier the collaboration with developers. Design that accounts for how text can vary in length, how images should be cropped on different screen sizes, and what is technically realistic within the time frame saves both parties repeated corrections late in a project.
“A nice design that cannot be built within the deadline or does not work on a mobile is not a finished design — it is a good idea missing its final link.”
— Professional view on collaboration between design and development.