分享一些免费的前端学习课程

原创我是哥飞 2023-12-10 22:13:14

收录于话题

大家好，我是哥飞。

今天给大家推荐一些谷歌官方出的免费前端课程。

目录如下：

1. 学 HTML

2. 学 CSS

3. 学表单

4. 学响应式设计

5、学网页图片优化

1. 学 HTML

网址：https://web.dev/learn/html

这个教程提供了一个全面的 HTML 学习课程，适合从初学者到高级开发者。

课程内容包括 HTML 的基本概念介绍、文档结构、元数据使用、语义 HTML 的使用、正确使用标题和分区元素、不同全局属性以及特定 HTML 元素的属性、文本基础、链接、列表、导航、表格、表单、图片、音频和视频等内容。

此外，还涵盖了 HTML 的模板、插槽、影子 DOM、HTML API、焦点管理、其他内联文本元素、详细信息与摘要元素、对话框元素等高级主题。

这个教程是为那些希望在 Web 开发中深入理解 HTML 的人们准备的。

2. 学 CSS

网址：https://web.dev/learn/css

这个教程提供了一个全面的 CSS 学习课程，旨在提高你的 Web 样式专业知识。

课程内容包括 CSS 的基础知识，如盒模型、选择器、层叠、特定性、继承、颜色、尺寸单位、布局、Flexbox、Grid 布局等。

除此之外，还有关于逻辑属性、间距、伪元素、伪类、边框、阴影、焦点管理、z-index 和堆叠上下文、CSS 函数、渐变、动画、滤镜、混合模式等高级主题。

这是一个旨在帮助网页开发者理解和应用 CSS 的综合性教程。

3. 学表单

网址：https://web.dev/learn/forms

这是一个关于 HTML 表单的详尽课程，课程内容包括使用表单从用户获取数据的基础知识，各种表单元素的概述，如何帮助用户避免在表单中重复输入数据，如何在前端验证表单，以及如何设计用户友好的表单。

此外，还涉及表单的可访问性、国际化和本地化、安全性和隐私、自动填充、如何对表单进行可用性测试、跨设备和平台测试表单等高级主题。

这是一个全面的资源，适合希望深入了解 HTML 表单的开发者。

4. 学响应式设计

网址：https://web.dev/learn/design

这个教程专注于教授响应式设计的各个方面，旨在帮助学习者创建既美观又适用于所有用户的网站。

课程内容涵盖了响应式设计的引入、媒体查询的使用、国际化准备、宏观和微观布局设计、排版、响应式图片、使用 picture 元素、图标、主题设计、可访问性、交互、用户界面模式、媒体特性、多屏配置等多个方面。

这是一个全面的资源，适合希望深入了解响应式设计的开发者。

5. 学网页图片优化

网址：https://web.dev/learn/images

这是一个深入的网页图像课程，涵盖了网页图像的历史、关键的性能问题、向量和光栅图像、不同图像格式（如GIF、PNG、JPEG、WebP、AVIF）的详细介绍。

以及响应式图像、使用 srcset 和 sizes 的描述性语法、使用 picture 元素的规定性语法、自动压缩和编码、网站生成器、框架和 CMS 在响应式图像中的应用，当然也包括图像内容交付网络（CDN）。

这是一个全面的资源，适合希望了解如何在网络上有效使用图像的开发者。

以上课程不需要大家全部从头到尾全学一遍，建议先随便翻一翻目录，了解一下大概，然后当作字典，有需要用到什么，就去查什么。

再配合 ChatGPT ，不懂就问，还是很容易学会如何制作出一个我们需要的网页的。

先尽快解决做网页这个基础问题，然后我们就可以基于哥飞之前教的各种教程来挖掘需求，做网站赚美元，养网站防老了。