html css js速成
I'm excited to share this four hour course on HTML and CSS with you (<– link to course).
我很高兴与您分享有关HTML和CSS的这四个小时的课程 (<–指向课程的链接)。
If you're curious about web development, but don't know where to start, this is the perfect course for you!
如果您对Web开发感到好奇，但是不知道从哪里开始，那么这是适合您的完美课程！
There are absolutely no prerequisites for it, and you don't even need to install a code editor! Scrimba will cover you there.
绝对没有先决条件，您甚至不需要安装代码编辑器！ 斯克林巴会在那里掩护你。
The instructor of the course is the brilliant Kevin Powell. He's a big CSS fan, a very popular YouTube instructor, and he also teaches HTML and CSS in classrooms. In other words, you're in good hands.
该课程的讲师是才华横溢的凯文·鲍威尔。 他是CSS的忠实粉丝，是一位非常受欢迎的YouTube老师，并且还在课堂上教HTML和CSS。 换句话说，您处于良好状态。
During the course, you're going to learn the basics of HTML and CSS and start building your very first web pages. All the lessons are going to be hands-on and start writing actual code straight away.
在课程中，您将学习HTML和CSS的基础知识，并开始构建您的第一个网页。 所有课程将动手操作，并立即开始编写实际代码。
Once you've completed this course, and are ready for more challenges, you can check out Kevin's responsive web design bootcamp as well. It's a massive 15-hour course that teaches you advanced CSS and how to build responsive websites on a professional level.
完成本课程并准备迎接更多挑战之后，您还可以查看Kevin的自适应Web设计新手训练营 。 这是一门耗时15小时的大型课程，可教您高级CSS以及如何在专业水平上构建响应式网站。
But for now, let's have a closer look at the lessons in the intro course.
但是现在，让我们仔细看一下入门课程中的课程。
1.简介 (1. Introduction)
In the first lesson, Kevin gives a little introduction to what you can expect for the course, and some tips for learning as much as you can from it.
在第一堂课中，Kevin简要介绍了您对本课程的期望，并介绍了一些从中学习的窍门。
2.什么是HTML和CSS？ (2. What are HTML and CSS?)
In the second cast, Kevin introduces us to HTML and CSS, what these acronyms stand for and how both HTML and CSS are closely intertwined.
在第二个演员表中，Kevin向我们介绍了HTML和CSS，这些缩写词代表什么，以及HTML和CSS如何紧密地交织在一起。
3.基本术语和语法 (3. Basic Terminology and Syntax)
Kevin uses a book as an example of how HTML markup works and introduces such concepts as elements and tags, and how to use them.
Kevin用一本书作为HTML标记的工作方式示例，并介绍了elements和tags等概念以及如何使用它们。
4.让我们写一些HTML！ (4. Let's write some HTML!)
In this screencast, Kevin introduces <!DOCTYPE html> to let browser know that the content is HTML and we write our first HTML webpage and learn some fundamental elements along the way!
在此截屏视频中，Kevin介绍了<!DOCTYPE html>以使浏览器知道内容为HTML，我们编写了第一个HTML网页，并在此过程中学习了一些基本元素！
<!DOCTYPE html>
<html>
<head>
<title>My first website</title>
</head>
<body>
<h1>My very first webpage</h1>
<h2>Websites are built with HTML</h2>
<p>HTML is a markup language that tells the browser what everything is</p>
<h2>They also use CSS</h2>
<p>I can't wait to start learning CSS!</p>
</body>
</html> 5. strong和emphasis (5. strong and emphasis)
We can use <em> to add emphasis to our text and <strong> to add importance.
我们可以使用<em>来强调文本，并使用<strong>来增加重要性 。
6.文件命名和组织 (6. File naming and organization)
In this part, Kevin teaches us some good practices around file naming and gives good advice on how to organise our files.
在这一部分中，Kevin教我们一些有关文件命名的良好做法，并就如何组织文件提供了很好的建议。
7.锚点和属性 (7. Anchors and Attributes)
We can use anchor <a> element to link to a different location on the same page or to another page. To tell <a> where to link, we use attributes, and for anchors, it's href.
我们可以使用anchor <a>元素链接到同一页面上的不同位置或另一个页面。 为了告诉<a>链接位置，我们使用attributes ，对于锚点，它是href 。
<a href="https://scrimba.com">Link to Scrimba</a>8. CSS简介 (8. Intro to CSS)
Kevin introduces us to CSS syntax and the notion of properties and values in CSS. How using property: value syntax we can style our webpages and introduces inline styling to make individual elements look good on the page.
Kevin向我们介绍了CSS语法以及CSS中的属性和值的概念。 如何使用property: value语法，我们可以为网页设置样式，并引入内联样式以使单个元素在页面上看起来不错。
9. CSS基础 (9. CSS Basics)
In this video, we're going to learn about font size, colours, background colours and text alignment. Kevin will introduce us to four different ways of specifying colours in CSS, using keywords, hex, rgb and hsl values.
在本视频中，我们将学习字体大小，颜色，背景颜色和文本对齐方式。 Kevin将使用关键字hex ， rgb和hsl值向我们介绍四种在CSS中指定颜色的方法。
10.练习时间！ (10. Practice time!)
Ok, time for some individual practice. Kevin sets us a task to create a page about ourselves and sets us some HTML/CSS challenges along the way.
好的，是时候进行一些个人练习了。 凯文(Kevin)为我们创建了一个关于自己的页面的任务，并为我们设置了一些HTML / CSS挑战。
<!--
HTML
- h1 (the title of the page)
- An introductory paragraph
- Two h2s, each followed by a few paragraphs
- Inside the paragraphs, use strong and emphasis tags
- If you are feeling adventurous add a second page and link to it
CSS
- Change the color of the h1
- Change the text alignment of the h1
- Change the color of the h2s
- Change the font-size of the paragraphs
- If you added a link, change the color of it
-->11.总结一下 (11. Recap up until this point)
In this cast, we quickly go over everything we've learned about HTML and CSS up until this point. Repetition is the mother of learning!
在此演员表中，我们将快速介绍到目前为止所学到的有关HTML和CSS的所有内容。 重复是学习之母！
12.清单 (12. Lists)
Now, Kevin shows us how to create lists in HTML using <ol> for ordered lists and <ul> for unordered lists.
现在，凯文(Kevin)向我们展示了如何在HTML中使用<ol>表示有序列表，使用<ul>表示无序列表。
<ol>
<li>List item one</li>
<li>a second list item</li>
</ol>
<ul>
<li>bullet point</li>
<li>another bullet</li>
</ul>13.图片 (13. Images)
Images are self-closing and both <img> are valid <img />. Kevin also explains how to use src and alt attributes and how alt helps improve accessibility.
图像是自动关闭的，并且两个<img>都是有效的<img /> 。 Kevin还解释了如何使用src和alt属性，以及alt如何帮助改善可访问性。
<img
src="images/dog-in-blanket.jpg"
alt="a dog wrapped in a blanket sitting on the road"
/>14.练习时间！ (14. Practice time!)
Alright, time for our second practice screencast. Kevin sets us a challenge to convert some markdown files to HTML/CSS webpage. No worries if you're not sure what markdown is because in this practice session Kevin will walk us through the completion of the task.
好了，我们第二次练习的时间到了。 凯文(Kevin)向我们提出了将一些markdown文件转换为HTML / CSS网页的挑战。 如果您不确定markdown是什么，请不用担心，因为在本练习中，Kevin会指导我们完成任务。
15.内部CSS (15. Internal CSS)
In this chapter, Kevin introduces internal CSS, an alternative to writing inline CSS.
在本章中，Kevin介绍了内部CSS，这是编写内联CSS的替代方法。
Internal CSS is written in the same file as HTML, but within a separate <style> tag
内部CSS与HTML编写在同一文件中，但在单独的<style>标记内
<!DOCTYPE html>
<html>
<head>
<title>All about Earth and Mars</title>
<style>
h1 {
font-size: 60px;
}
p {
font-size: 24px;
color: steelblue;
}
</style>
</head>
<body>
<h1>Earth and Mars</h1>
<p>Earth and Mars are two planets within our solar system.</p>
</body>
</html>16.外部CSS (16. External CSS)
External CSS is another approach to managing CSS. This time Kevin shows us how we can extract CSS into a separate file and how to link CSS stylesheets to our HTML files with a <link> tag
外部CSS是管理CSS的另一种方法。 凯文这次向我们展示了如何将CSS提取到一个单独的文件中，以及如何使用<link>标签将CSS样式表链接到我们HTML文件。
<link href="css/style.css" rel="stylesheet" />17.类和ID (17. Classes and IDs)
In this screencast, Kevin focuses on three types of selectors in CSS and when you might want to use which.
在此截屏视频中，Kevin重点介绍了CSS中的三种选择器以及何时使用它们。
/* Element selector */
a {
color: darksalmon;
}
/* Class selector */
.intro {
font-size: 24px;
}
/* ID selector */
#earth-title {
color: lightgreen;
}18. HTML和CSS中的注释 (18. Comments in HTML and CSS)
We can add comments in HTML:
我们可以在HTML中添加注释：
<html>
<head>
<title>Comments!</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>Comments!</h1>
<!-- My comment goes here -->
</body>
</html>And in CSS:
在CSS中：
/* TODO: change the color of the text to white */
body {
background: #333;
color: white;
}
/* Some more comments */
h1 {
color: red;
}19.您唯一需要知道的标签(暂时) (19. The only tags you need to know (for now))
In this part of the course, Kevin reminds us that we don't need to know everything at this point and at this stage we really need to know only the following tags:
在课程的这一部分中，Kevin提醒我们，我们现在不需要了解所有内容，而在此阶段，我们实际上只需要了解以下标签：
h1 -> h6
p
strong and em
a
ul, ol, li
imgAnd it would be good if we can tell the difference between the following tags:
如果我们能分辨出以下标记之间的区别，那就太好了：
header
main
section
footer
nav
div20.盒子模型简介 (20. Intro to the box model)
It's now time to discover the box model.Most elements are block elements, which means they are 100% width of their parent and have a height of 0.
现在是时候发现盒子模型了。大多数元素都是块元素，这意味着它们是其父元素的100％宽度，高度为0。
This is a brilliant cast, where Kevin not just simply and succinctly explains how the box model works, but also saves us from the common pitfalls that even experienced developers fall into from time to time.
这是一个出色的演员表，凯文(Kevin)不仅简单，简洁地解释了盒子模型的工作原理，还使我们摆脱了即使是经验丰富的开发人员也不时陷入的常见陷阱。
21.保证金和填充 (21. Margin and Padding)
Up next are margins and paddings.Margins are used to control the position of an element relative to those around it, while padding is used to control the positioning of content inside our element.Kevin does a great job explaining many different ways padding and margins can be set in CSS.
接下来是边距和边距。边距用于控制元素相对于元素周围的位置，而边距用于控制内容在元素内部的位置.Kevin很好地解释了填充和边距的许多不同方式在CSS中设置。
/* */
padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px;
/* Shorthand version would be */
padding: 20px 30px 40px 50px;
margin-top: 500px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 10px;
/* Shorthand version would be */
margin: 500px 100px 10px;22.边界 (22. Borders)
The last piece in the box model - borders. Borders are added around your elements. And they can be set in a similar way to margins and padding.
盒子模型的最后一块-边框。 在元素周围添加了边框。 它们的设置方式与边距和填充类似。
border-color: yellow;
border-width: 20px;
border-style: solid;
/* Shorthand version would be */
border: solid yellow 20px;23.盒子模型包装 (23. Box model wrap up)
In this chapter, Kevin helps us review CSS box model and provides a nice visualisation for future reference.
在本章中，Kevin帮助我们回顾了CSS盒模型，并提供了很好的可视化效果，以备将来参考。
24.基本布局 (24. A basic layout)
We are now ready to create a very basic layout.
现在，我们准备创建一个非常基本的布局。
Kevin will guide us through creating a page about dinosaurs, where we will be able to put everything we've learned so far to practice.
凯文(Kevin)将引导我们创建一个有关恐龙的页面，在这里我们将能够将到目前为止所学到的所有知识付诸实践。
25.基本布局-在页面上居中放置元素 (25. A basic layout - centring an element on the page)
In this chapter, Kevin shows us how to centre the main element. It's not too difficult, but there are a few tricky bits to it.
在这一章中，凯文向我们展示了如何使主要元素居中。 这不太困难，但是有一些棘手的地方。
26.用flexbox创建列 (26. Creating columns with flexbox)
We are doing pretty well, so far.
到目前为止，我们做得不错。
Over these last cast, Kevin introduces a mini-capstone project to create this HTML layout from scratch.
在这些最后的演员表中，Kevin引入了一个迷你帽子项目，从头开始创建此HTML布局。
Oftentimes, a lot of designs use columns in the footer. In this cast, Kevin shows us how to use display: flex to create this neat layout.
通常，许多设计在页脚中使用列。 在此演员表中，凯文(Kevin)向我们展示了如何使用display: flex创建这种整洁的布局。
27.从头开始创建布局-HTML (27. Creating the layout from scratch - the HTML)
In this screencast, Kevin slices the design into manageable pieces and walks us through the HTML implementation.
在此截屏视频中，Kevin将设计切成易于管理的部分，并引导我们完成HTML实施。
In this screencast, we are creating the HTML markup.
在此截屏视频中，我们将创建HTML标记。
28.创建布局-CSS (28. Creating the Layout - The CSS)
And in the final part of this course, we're writing CSS to create the final layout.
在本课程的最后部分，我们将编写CSS来创建最终布局。
29.接下来是什么？ (29. What's next?)
If you reach all the way to this cast, then give your self a pat on the back. Congratulations on finishing the course! We've covered a LOT, and you have every reason to be proud of yourself.
如果您能一路实现这一目标，那么请轻拍自己的背部。 恭喜您完成本课程！ 我们已经介绍了很多，您有充分的理由为自己感到骄傲。
Where can you go from here? Kevin's first recommendation is to install a text editor. Any of them at this stage would be good and you can always change later. VS Code is very popular and for a good reason.
你可以从这里去哪里？ Kevin的第一个建议是安装文本编辑器。 在这个阶段，任何一个都很好，您以后可以随时进行更改。 VS Code非常受欢迎，这是有原因的。
You should also keep an eye on Kevin's upcoming advanced course on how to build responsive websites, so be sure to sign up for Kevin's newsletter.
您还应该关注Kevin即将发布的有关如何构建响应式网站的高级课程，因此请务必注册Kevin的时事通讯 。
Happy coding :)
快乐的编码:)
Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.
谢谢阅读！ 我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。 如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营 。
html css js速成
756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
