CSS进阶实战1：项目资源与架构

参考课程：Build Responsive Real-World Websites with HTML and CSS
视频 | 源码

基于React的响应式单页应用开发、优化和部署

• 项目地址：https://github.com/luryZhu/omnifood
• 在线demo：https://omnifood-lury.netlify.app/

---

工具/资源

免费素材网站

背景：unsplash

人像：UIfaces

字体：Google fonts

前端设计

亮色阴影色：Tints and Shades

响应式网站：Media Queries

浏览器支持：Can i use

VScode插件

高亮颜色：Color Highlight

第三方库

style-resource：配置less全局变量

react-scroll：实现平滑滚动

优化

LightHouse

图像压缩：Squoosh

项目架构

技术栈：React + React Hooks + Less

响应式布局：rem + grid + media query

部署：netlify

实现组件

• Header 导航
• Hero 介绍
• How does it work 原理
• Testimonials 案例
• Meals 食谱
• Pricing 定价
• Call to action 登录
• Footer 相关链接