渐进式 Web 应用简介
在本课程中,您将开始开发首个渐进式 Web 应用,该应用能够利用原生应用所享受的诸多功能。您还会有更多经验来创建使用 Service Worker 离线工作的 Web 应用。最后,您将使用 Web 应用清单文件,将应用设置为可以安装到用户的主屏幕上。
这是通过 Udacity 提供的免费课程
学习课程网络无障碍功能
在本课程中,您将亲身体验让 Web 应用变得易于使用。您可以了解用户需要无障碍功能的时机和原因。然后,您将深入了解“方式”:如何借助屏幕阅读器使页面正常运行,以及如何管理输入焦点(例如,在填写表单时使用 Tab 键看到的突出显示效果)。您将了解“语义”和“语义标记”对网页的意义,并添加 ARIA 标记以便在界面中使用一系列辅助设备进行导航。最后,您将学习样式设置技巧,帮助视力不好的用户轻松可靠地浏览您的网页。
这是通过 Udacity 提供的免费课程
学习课程浏览器呈现优化
性能对用户至关重要。Web 开发者需要构建能够快速响应且流畅呈现的应用。Google 性能专家 Paul Lewis 会帮助您消除卡顿并创建能够保持每秒 60 帧性能的 Web 应用。本课程将介绍通过分析应用以及确定卡顿原因所需的工具。您将探索浏览器的渲染管道,并探索可助您轻松构建高性能应用的模式。
这是通过 Udacity 提供的免费课程
学习课程自适应设计
在本课程中,您将学习有关 Google 的 Pete LePage 的自适应网页设计的基础知识!您可以自行创建自适应网页,使其适用于任何设备(手机、平板电脑、桌面设备或其他任何设备)。
首先,您需要探索如何让网站具备自适应能力,以及一些常见的自适应设计模式如何在不同设备上发挥作用。之后,您将了解如何使用视口标记和 CSS 媒体查询创建自己的自适应布局。在学习过程中,您将尝试使用主要断点和次要断点,并优化文本以获得更好的阅读效果。
这是通过 Udacity 提供的免费课程
学习课程关键渲染路径
您将深入了解有关移动浏览器和桌面设备浏览器如何呈现网页的详细信息,了解如何优化任何网站以提高速度。
您将了解关键渲染路径,或者浏览器为将 HTML、CSS 和 JavaScript 转换为生动逼真的网站而必须执行的步骤。然后,您将开始探索和试用各种工具来衡量性能,并采用简单的策略尽早将第一个像素传递到屏幕上。您将了解如何通过 PageSpeed Insights 和 Google Chrome 开发者工具的“时间轴”视图深入探索建议,找到实现即时性能提升所需的数据!
这是通过 Udacity 提供的免费课程
学习课程自适应图片
您知道吗?加载网页平均需要 60% 以上的字节才能加载图片。
在本课程中,您将学习如何在现代网页上处理图片,使图片看起来很棒,并且可在任何设备上快速加载。
在此过程中,您还将掌握一系列技能和方法,将自适应图片无缝集成到开发工作流中。学完本课程后,您将使用图片进行开发,以适应不同的视口尺寸和使用场景。
这是通过 Udacity 提供的免费课程
学习课程离线 Web 应用
本课程重点介绍用户体验,旨在帮助开发者了解离线优先是确保应用在所有场景(而不仅仅是理想场景)下实现性能的最佳方式。您将学习如何为用户区分正常连接、不良连接、间歇性连接和缺失连接,以及如何让应用轻松适应这些情况。
最后,运用您在本课程中学到的技能,您将构建一个同时适用于在线和离线应用,并会在可能的情况下加载新数据的应用。您的 Web 应用将如同原生应用一样与网络进行交互。这将带来更好的用户体验,即使是在传统挑战性连接场景中,如卡在火车隧道中、不得不依赖拥挤的会议 Wi-Fi 或穿过移动网络“死区”!
这是通过 Udacity 提供的免费课程
学习课程