udemy教程 | Build Responsive Real-World Websites with HTML and CSS

*** The #1 bestselling HTML and CSS course on Udemy! ***
Udemy上的#1最畅销的HTML和CSS课程！***

*** Completely re-built from scratch in July 2021 (35+ hours video) ***
2021 年 7 月从头开始完全重建（35+ 小时视频）***

“Having gone through other related courses on other platforms, I can say this course is the most practical and readily applicable course on web design and development I have taken.” — Bernie Pacis
“在其他平台上学习过其他相关课程后，我可以说这门课程是我参加过的最实用、最容易应用的网页设计和开发课程。”

Open a new browser tab, type in www.omnifood.dev, and take a look around. I will wait here…
打开新的浏览器选项卡，输入 www.omnifood.dev，然后环顾四周。我会在这里等着……

…

Amazing, right? What if you knew exactly how to design and build a website like that, completely from scratch? How amazing would that be?
太神奇了，对吧？如果您完全知道如何从头开始设计和构建这样的网站怎么办？那会有多神奇？

Well, I’m here to teach you HTML, CSS, and web design, all by building the stunning website that you just saw, step-by-step.
好吧，我在这里教你 HTML、CSS 和网页设计，所有这些都是通过一步一步地构建你刚刚看到的令人惊叹的网站。

So, after finishing this course, you will know exactly how to build a beautiful, professional, and ready-to-launch website just like Omnifood, by following a 7-step process. And it will even look great on any computer, tablet, and smartphone.
因此，完成本课程后，您将确切地了解如何按照 7 步流程构建一个美观、专业且随时可以启动的网站，就像 Omnifood 一样。它甚至可以在任何计算机、平板电脑和智能手机上看起来都很棒。

But what if you want to build a completely different website? Well, no problem! I designed the course curriculum with exactly this goal: to enable you to design and build any website that you can think of, not just copy the course project.
但是，如果您想建立一个完全不同的网站怎么办？好吧，没问题！我设计课程表的目的正是如此：使您能够设计和构建您能想到的任何网站，而不仅仅是复制课程项目。

So, in order to become a confident and independent developer, capable of building your own websites in the future, you will learn:
因此，为了成为一个自信和独立的开发人员，能够在未来建立自己的网站，您将学习：

• The fundamentals of modern and semantic HTML, CSS, and building layouts in a small separate project, which will prepare you for the main course project (www.omnifood.dev). This includes modern flexbox and CSS Grid!
  现代和语义HTML，CSS的基础知识，以及一个单独的小型项目中的建筑布局，这将为您准备主要课程项目（www.omnifood.dev）。这包括现代 flexbox 和 CSS Grid！

• How to design beautiful websites, by learning a web design framework I created just for this course. It consists of easy-to-use guidelines for design aspects like typography, colors, images, spacing, and more (this is like a small standalone course!).
  如何设计漂亮的网站，通过学习我专门为本课程创建的网页设计框架。它由易于使用的设计指南组成，例如排版、颜色、图像、间距等（这就像一个小型独立课程！

• How to use well-established website components and layout patterns in order to come up with professional-looking designs
  如何使用完善的网站组件和布局模式，以提出具有专业外观的设计

• How to make any website work on any mobile device, no matter the design and layout (responsive design)
  如何使任何网站在任何移动设备上运行，无论设计和布局如何（响应式设计）

• How to use the 7 steps of building a professional website in practice: planning, sketching, designing, building, testing, optimizing, and launching
  如何在实践中运用打造专业网站的7个步骤：规划、草图、设计、搭建、测试、优化、上线

• How to find and use free design assets such as images, fonts, and icons
  如何查找和使用免费的设计资源，例如图像、字体和图标

• Important developer skills such as reading documentation, fixing code errors on your own, and using professional web development tools
  重要的开发人员技能，例如阅读文档、自行修复代码错误以及使用专业的 Web 开发工具

Does this sound like fun? Then join me and 200,000+ other developers and start building websites today!
这听起来很有趣吗？那就加入我和 200,000+ 其他开发人员，今天就开始构建网站吧！

Or are you not sold yet and need to know more? No problem, just keep reading…
或者您还没有出售并需要了解更多信息？没问题，继续阅读……

[01] Why should you learn HTML and CSS in the first place?
[01] 为什么要首先学习HTML和CSS？

Building websites allows you to do fun and creative work, from anywhere in the world, and it even pays well. Web development is one of the most future-proof and highest-paying industries in the world. And HTML and CSS is the entry point to this world!
建立网站可以让您在世界任何地方进行有趣和创造性的工作，甚至报酬丰厚。Web 开发是世界上最面向未来和收入最高的行业之一。HTML和CSS是这个世界的切入点！

But you already know all this, that’s why you want to learn HTML and CSS too. Well, you came to the right place!
但是你已经知道了这一切，这就是为什么你也想学习HTML和CSS。好吧，你来对地方了！

This is the best and most complete course for starting your web development journey that you will find on Udemy. It’s an all-in-one package that takes you from knowing nothing about HTML and CSS, to building beautiful websites using tools and technologies that professional web developers use every single day.
这是您可以在 Udemy 上找到的开始您的 Web 开发之旅的最佳和最完整的课程。这是一个多合一的软件包，可让您从对 HTML 和 CSS 一无所知，到使用专业 Web 开发人员每天使用的工具和技术构建漂亮的网站。

[02] Why is this course so unique and popular?
[02] 为什么这门课程如此独特和受欢迎？

Reason #1: The course is completely project-based
原因#1：该课程完全基于项目

Simple demos are boring, and therefore you’re gonna learn everything by building actual projects! In the final project (www.omnifood.dev), together we hand-code a beautiful and responsive landing page for a fictional company that I made up just for the course.
简单的演示很无聊，因此您将通过构建实际项目来学习所有内容！在最终项目（www.omnifood.dev）中，我们一起为一家虚构的公司手工编写了一个漂亮且响应迅速的登录页面，我只是为了这门课程而编造的。

Reason #2: You will not just learn how to code
原因#2：你不仅会学习如何编码

Coding is great, but it’s not everything! That’s why we will go through the entire 7-step process of building and launching our website project.
编码很棒，但不是全部！这就是为什么我们将经历构建和启动我们网站项目的整个 7 步过程。

So the huge Omnifood project will teach you real-world skills to build real-world HTML and CSS websites: how to plan projects and page layouts, how to implement designs using HTML and CSS techniques, how to write clean and organized code, how to optimize websites for good speed performance, and many more.
因此，庞大的 Omnifood 项目将教您构建真实世界的 HTML 和 CSS 网站的实际技能：如何规划项目和页面布局，如何使用 HTML 和 CSS 技术实现设计，如何编写干净有条理的代码，如何优化网站以获得良好的速度性能，等等。

On top of that, this course has a huge focus on beautiful design. In fact, this is the only course on the market that focuses on both coding and designing, together.
最重要的是，本课程非常注重精美的设计。事实上，这是市场上唯一一门同时关注编码和设计的课程。

Reason #3: I’m the right teacher for you
原因#3：我是适合你的老师

With the right guidance and a well-structured curriculum, building websites can be quite easy and fun to learn. With a bunch of random tutorials and YouTube videos? Not so much. And that’s where I come in.
有了正确的指导和结构良好的课程，构建网站可以非常容易和有趣地学习。有一堆随机教程和 YouTube 视频？没有那么多。这就是我的用武之地。

My name is Jonas, I’m an experienced web developer and designer, and one of Udemy’s top instructors. I have been teaching this bestselling course since 2015 to over 200,000 developers, always listening to feedback and understanding exactly how students actually learn.
我叫 Jonas，是一位经验丰富的 Web 开发人员和设计师，也是 Udemy 的顶级讲师之一。自 2015 年以来，我一直在向超过 200,000 名开发人员教授这门畅销课程，始终倾听反馈并准确了解学生的实际学习方式。

Using that feedback, I recently rebuilt this course from scratch and designed the ideal course curriculum for every type of student. It’s a unique blend of projects, deep explanations, theory lectures, and challenges. I’m sure you’re gonna love it!
利用这些反馈，我最近从头开始重建了这门课程，并为每种类型的学生设计了理想的课程。它是项目、深刻解释、理论讲座和挑战的独特融合。我相信你会喜欢的！

[03] Why is this course so long?
[03] 为什么这个课程这么长？

Reason #1: I take time to explain every single concept that I teach, so that you actually learn, and not just copy code from the screen (this is a course, not a tutorial)
原因#1：我花时间解释我教的每一个概念，这样你就可以真正学习，而不仅仅是从屏幕上复制代码（这是一门课程，而不是教程）

Reason #2: I go into topics that other HTML and CSS courses shy away from: professional web design, component and layout patterns, some CSS theory, website planning in theory and practice, and developer skills. I believe you need all of this to be successful!
原因#2：我进入了其他HTML和CSS课程回避的主题：专业的网页设计，组件和布局模式，一些CSS理论，理论和实践中的网站规划，以及开发人员技能。我相信你需要所有这些才能成功！

Reason #3: There is a lot of repetition, so that you actually assimilate and practice what you learn. Practice is the single most important ingredient to learning, and therefore I provide plenty of opportunities for you to sharpen your skills
原因#3：有很多重复，这样你才能真正吸收和实践你所学的东西。练习是学习中最重要的因素，因此我为您提供了很多提高技能的机会

[04] Here is what’s also included in the package:
[04] 以下是软件包中也包含的内容：

• Up-to-date HD-quality videos, that are easy to search and reference (great for Udemy Business students)
  最新的高清质量视频，易于搜索和参考（非常适合 Udemy Business 学生）

• Professional English captions (not the auto-generated ones)
  专业英文字幕（不是自动生成的字幕）

• Downloadable design assets + starter code and final code for each section
  每个部分的可下载设计资源 + 起始代码和最终代码

• Downloadable slides for 20+ theory videos (not boring, I promise!)
  20+理论视频的可下载幻灯片（不无聊，我保证！

• Access to countless free design and development resources that I curated over many years
  访问我多年来策划的无数免费设计和开发资源

• Free support in the course Q&A
  课程问答中的免费支持

• 10+ coding challenges to practice your new skills (solutions included)
  10+ 编码挑战来练习您的新技能（包括解决方案）

[05] This course is for you if…
[05] 本课程适合您，如果…

• … you are a complete beginner with no idea of how to build a website.
  …你是一个完全的初学者，不知道如何建立一个网站。

• … you already know a bit of HTML and CSS from some tutorials or videos, but struggle to put together a good-looking, complete website.
  …您已经从一些教程或视频中了解了一些 HTML 和 CSS，但很难将一个好看、完整的网站放在一起。

• … you are a designer and want to expand your skills into HTML and CSS, because all your designer friends are learning how to code (they are smart!).
  …你是一名设计师，想把你的技能扩展到HTML和CSS，因为你所有的设计师朋友都在学习如何编码（他们很聪明！

Basically, if you are an HTML and CSS master, and build the most beautiful websites in the world, then DON’T take the course. Everyone else: you should take the course, today.
基本上，如果你是一个HTML和CSS大师，并且建立了世界上最漂亮的网站，那么就不要参加这门课程。其他人：你今天就应该参加这门课程。

So, does all of this sound great? Then join me and 200,000+ other developers and start your web development journey today!
那么，这一切听起来都很棒吗？然后加入我和 200,000+ 其他开发人员，立即开始您的 Web 开发之旅！