Part 1-1

1- Getting started

1-1 Introduction

Welcome to the first part of the ultimate HTML and CSS series. In this series I’m going to take you on a journey and teach you all the skills you need to build fast and beautiful websites that look great on all kinds of devices.

In the first part, we’re going to talk about the fundamentals of web development with HTML and CSS.

In the second part, we’ll explore advanced concepts.

And in the third part, we’ll put everything together and build a beautiful, responsive and blazingly fast website for an imaginary cloud hosting company called Moshify.

If you want to play with this website, just head over to moshified.com and see for yourself. This is what you’re going to build in this series. (I won’t show you here for now)

---

课程分三节：

第一节：

1. 引导
2. Web基础
3. HTML基础
4. CSS基础

第二节：

1、引导

2、布局

3、排版

4、图片

5、表格

6、变换、过渡、动画

7、编写干净、可维护的CSS

第三节：

1、构建网站（moshified.com）

1-2 Who This Course Is For

I’ve carefully designed this course so it can be used by both absolute beginners, as well as people with some experience in HTML and CSS who want to fill the missing gaps. If you already know the basics and want to learn about specific topics, you’re welcome to jump to those parts. But I highly encourage you to watch the course thoroughly from the beginning, because I’m going to share a lot of tips and tricks along the way and I don’t want you to miss out on them. Trust me, I’m not going to waste your time by over explaining things.

Alright, next we’re going to talk about tools you need to take this course.

---

课程适合初学者和有部分经验的程序员

1-3 What You Need

Alright, let’s talk about the tools you need to take this course.

For the starter, you need a code editor. There are so many code editors out there, like Visual Studio Code, or VS code, or Sublime Text, atom, and so on.

In this course, I’m going to use VS code, along with a few extensions for starting a web server, and formatting our code.

You’re welcome to use your favorite code editor if you know what you’re doing. But otherwise, head over to https://code.visualstudio.com and download the latest version of VS code.

Here inside VS code, we’re going to install a couple of extensions.

So let’s open the extensions panel and search for prettier. Here’s the extension we can install prettier code formatter, with this extension, we can format our code and make it pretty. This is a very popular extension.

Next, we’re going to install another extension called live server. With this extension, we can launch our website inside a development web server. Again, this is a very popular extension.

Now, in addition to this, we’re going to use a browser to view and test our webpages. Again, you can use your favorite browser.

But in this course, I’m going to use Google Chrome and I encourage you to use the same browser so you can easily follow the course.

---

需要安装Visual Studio Code ，及插件prettier、live server

1-4 Getting Help

If you get stuck, you can post your questions on our forum at:

https://forum.codewithmosh.com

Unfortunately, due to the volume of messages I receive, I’m not able to personally answer your questions. But I highly encourage you to participate in discussions, as they can help you better understand and remember the course materials.

---

有遇到学习问题，可以在博客上和我沟通

1-5 Learning Paths

https://codewithmosh.com/p/learning-paths

---

Moth推荐的学习路线，仅供参考