让别人看见你的代码

部署代码到免费的服务器：GitHub上

创建新项目仓库

  • Repositories New 左上角
  • Create a new repositories :Repositories name * 可以和项目名称不一样 一般一样
  • 选Public 其他先不管
  • 点击Create repository
  • creating a new file: index.html

复制代码进去

  • Ctrl + A全选
  • Ctrl + C加 Ctrl + V
  • 保存成index.html
  • 提交（Commit new file）

开启GitHub Pages

源代码—>页面展示：

  • Setting>GitHub Pages
  • None 改选成master branch
  • 给出一个网址，会默认访问index.html
  • 有延迟，等三分钟，或者手动加路径/index.html
  • 复制链接，访问这个链接就可以看到你写的页面了
  • 这是我的demo页面

其他

  • 买域名，配进Custom domain
  • 在主网站（用户名.github.io）配了，默认所有网站自动都配了
  • 加描述（mardown语法）：创建README.md
1
2
3

# 一个简单的项目

我学会使用HTML和CSS3画八卦图了。
  • 贴心一点，在Description里写“预览请点击：”
  • 复制链接到Website里
  • 点击Save
  • 添加Topic Tag 技术栈:·HTML5 ·CSS3 ·Moblie

回顾：

  1. 创建新项目
  2. 代码放到index.html里
  3. 开启GitHub Pages
  4. 点选Master
  5. 点开链接
  6. 等三分钟
  7. 还有问题，加路径/index.html

重点

不要用Chrome直接预览

  • 只能在本地浏览
  • 会有很多bug
  • 推荐使用http-server/parcel等工具的预览方式

有问题，搜关键字 MDN

  • HTML 标签怎么用
  • CSS 属性怎么用

搜animation mdn切Language成中文

  • 直接看范例，敲代码

CSS Border 调试大法

学CSS唯一需要了解的调试方法

  • 快速显示元素的位置，层次

另一个有用的工具就是Chrome开发者工具 错误提示

技巧

  • 随时格式化自己的代码
  • Formate On Save
  • Auto Save
  • 马上写反括号的习惯

注意别少写反括号}，写了{，没有自动补全的话，马上手动补上}，再写里面的代码

项目目的

  • 此项目目的不是把东西做出来，写的稀烂也无所谓
  • 目的是在失败中求生，用以致学
  • 此项目还有很多bug，但不重要

掌握知识，重复练习，对资料记忆，写篇博客，总结

  • 这样学的好处
  • 面试有干货
  • 就算忘了，也有痕迹
  • 分散的知识点，通过项目进行覆盖，博客输出，再串联起来进行体系化学习

总结

  • 如果想做一个网页

没有必要系统学习

  • 想通过面试

必须要系统学习

  • 到底怎么学？
  • 先以项目为中心学
  • 等做了足够多的项目，再总结
  • 最坏的学习方法
  • 先系统学（看书，照本宣科）不动手
  • 动手时，全忘了
  • 最重要的是没留下痕迹
  • CRN法 eg. :nth-child(n)

抄示例

运行

改一改

重复迭代

问题

？元素 爆炸图实现？：原型图爆炸图拆解 八卦图：几个圆形的重叠 图层

参考文章

  • 无

相关文章

  • 无
  • 作者： Joel
  • 文章链接：
  • 版权声明
  • 非自由转载-非商用-非衍生-保持署名
  • 河 掘 思 知 简