让别人看见你的代码

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

创建新项目仓库

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

复制代码进去

  • Ctrl + A全选
  • Ctrl + CCtrl + 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)

抄示例

运行

改一改

重复迭代

问题

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


·未完待续·

参考文章

相关文章