Your profile card
Web Basics — HTML & CSS Lesson 21 2:19 English narration · English + 中文 subtitles burned in
Chapters
Transcript
Last lesson, and it is a project rather than a new idea.
最后一课，而它是一个项目，不是一个新概念。
You are building a profile card: a picture at the top, a name in a colour you choose, and one line about you — all inside a box that is padded, bordered and centred on the page.
你要做一张个人名片： 顶部一张图片，中间一个用你自己选的颜色写的名字， 再加一句关于你的话—— 全都装在一个有内边距、有边框、并且在页面上居中的盒子里。
It is small, it is real, and it is entirely made of things you already know.
它不大，但很真实，而且完全由你已经会的东西组成。
Look at the finished CSS and you can point at where every line came from.
看看写完的 CSS，你能指出每一行都出自哪里。
The div with a class is lessons eight and eleven.
带 class 的 div 来自第 8 课和第 11 课。
The padding is the box model, lesson sixteen.
padding 来自盒模型，第 16 课。
Margin zero auto centred it, in lesson nineteen.
margin: 0 auto 让它居中，那是第 19 课。
And the rule that colours the name is selectors and colours, lessons twelve to fourteen.
而给名字上色的那条规则，来自选择器和颜色，第 12 到 14 课。
Nothing here is new — the card is your own course, arranged into a page.
这里没有任何新东西—— 这张卡片就是你自己的这门课，被排成了一个页面。
Build it in three passes, which is what the three tasks are.
分三次来做，这也正是那三道题。
First the words: a heading with your name, a paragraph with one line about you.
先是文字：一个写着你名字的标题，一个段落写一句关于你的话。
Then add the picture above the name, with alt text, because you always write alt text.
然后在名字上方加上图片，并带 alt 文字，因为 alt 你总是要写的。
Then a splash of colour on the heading.
再给标题加一点颜色。
And press play after each one — a small mistake is obvious immediately, and almost impossible to find if you write everything first.
每做完一步就按一下播放—— 小错误会立刻暴露， 而如果你把所有东西一次写完，它几乎不可能被找到。
And that is the course.
这门课到这里就结束了。
On the HTML side you have headings, paragraphs, lists, links, images, tables, forms and page structure.
在 HTML 这边，你掌握了标题、段落、列表、 链接、图片、表格、表单和页面结构。
On the CSS side, selectors, colours, text, the box model, spacing, sizing, display and flexbox.
在 CSS 这边，是选择器、颜色、文字、盒模型、 间距、尺寸、display 和 flexbox。
That is not an introduction to web pages — it is the real foundation of every one of them.
这不是"网页入门"—— 这就是每一个网页真正的基础。
You can build things now.
你现在可以动手做东西了。
Four things to carry away from the whole course.
从这整门课里带走四点。
One: HTML is the content and CSS is how it looks — keep them separate.
第一：HTML 是内容，CSS 是外观——让它们各归各位。
Two: a page is boxes inside boxes, with space between them.
第二：页面就是盒子套盒子，中间留出空间。
Three: build one piece at a time and press play often.
第三：一次做一块，并且经常按播放。
Four: twenty-one lessons, and a page of your own at the end of it.
第四：二十一课，最后你有了一个属于自己的页面。
Go and make the card yours.
去把这张卡片做成你自己的样子吧。