【文件属性】:
文件名称:crowdfunding-product-page:前端导师的前端挑战
文件大小:3.45MB
文件格式:ZIP
更新时间:2021-03-27 04:09:37
TypeScript
前端导师-众筹产品页面解决方案
这是的的解决方案。 前端导师挑战可帮助您通过构建现实的项目来提高编码技能。
目录
概述
挑战
用户应该能够:
根据设备的屏幕尺寸查看最佳布局
请参阅悬停状态以获取交互元素
选择要做出的保证
确认认捐后,查看更新的进度栏和基于认捐总额筹集的总资金
确认认捐后,总支持者数量增加一
切换产品是否已添加书签
截屏
链接
我的过程
内置
语义HTML5标记
CSS自定义属性
弹性盒
CSS网格
移动优先的工作流程
-JS库
-React框架
适用于样式
我学到的是
使用本节概述在完成此项目时的一些主要学习内容。 写出这些代码并提供要突出显示的区域的代码示例是增强您自己的知识的一种好方法。
要查看如何添加代码段,请参见下文:
进度栏组件
// What I learned: dynamically changing the width of the inner
【文件预览】:
crowdfunding-product-page-master
----style-guide.md(439B)
----.gitignore(29B)
----gatsby-config.js(665B)
----package.json(819B)
----package-lock.json(766KB)
----src()
--------components()
--------images()
--------styles()
--------pages()
----tsconfig.json(6KB)
----screenshots()
--------progress-bar.png(289B)
--------mobile.png(1.08MB)
--------desktop.png(1.04MB)
----README.md(4KB)
----design()
--------mobile-menu.jpg(18KB)
--------desktop-design-modal-completed.jpg(75KB)
--------mobile-design-modal-default.jpg(46KB)
--------active-states-modal-completed.jpg(76KB)
--------desktop-design-modal-selected.jpg(84KB)
--------desktop-design.jpg(147KB)
--------desktop-preview.jpg(78KB)
--------mobile-design-modal-completed.jpg(16KB)
--------active-states-modal-selected.jpg(85KB)
--------active-states-default.jpg(148KB)
--------active-states-modal-default.jpg(84KB)
--------desktop-design-modal-default.jpg(84KB)
--------active-states-bookmarked.jpg(149KB)
--------mobile-design.jpg(84KB)
--------mobile-design-modal-selected.jpg(56KB)