Girls Coding Day Tutorial
  • 介绍
  • KickOff Party
    • 1.1 教学目的
    • 1.2 软件和工具
    • 1.3 教学方法
    • 1.4 WEB基本知识和历史
    • 1.5 课前自学
  • Intro to HTML
    • 2.1 初识HTML
    • 2.2 HTML常用术语
    • 2.3 解剖网站
    • 2.4 动手 - 修改更多HTML
  • Intro to CSS
    • 3.1 初识CSS
    • 3.2 CSS常用术语
    • 3.3 CSS盒子模型
    • 3.4 使用Chrome开发者工具调试样式
    • 3.5 动手 - 修改更多CSS样式
  • Intro to Bootstrap
    • 4.1 布局
    • 4.2 基础Bootstrap CSS
    • 4.3 组件
  • 大作业
  • 分享
Powered by GitBook
On this page
  1. KickOff Party

1.2 软件和工具

Previous1.1 教学目的Next1.3 教学方法

Last updated 5 years ago

Cooking time: 30min active / 30-45min passive

  • 下载并安装

  • 下载并安装

    • 你是否好奇「文本编辑器」是什么?那么赶紧用搜索引擎搜索一下关键字「文本编辑器」吧。

    • 略读

  • 注册

    • Github能用来做什么?请略读

  • 安装

    • 阅读并操作

    • 按照阅读内容,配置好 的帐号信息

    • 注意:如果你是 Windows 32位系统,可能无法安装Github Desktop,请下载安装 方法与Github Desktop雷同,如有疑问请咨询教练。

Tasks For Tutors: 请教练介绍一下这些软件。tips:尽量使用类比方法,让学员快速理解这些软件的用途。

Github Desktop 配置

  1. 下载,解压缩保存在桌面(或者是你想要放代码的文件夹)。

  2. 打开Github Desktop,在桌面上(或者是你想要放代码的文件夹中)创建一个名为GirlsCodingDayDemo的文件夹。

    a. 填写Name信息为GirlsCodingDayDemo b. local Path选择你的桌面(或者是你以后想要放代码的文件夹) c. Initialize this repo with a Readme的选项打钩 d. git ignore保持none e. license保持none f. 点击create repository

  3. 现在你的桌面上(或者是你想要放代码的文件夹中)会出现一个叫做GirlsCodingDayDemo的文件夹。

    把下载的免费Bootstrap模板解压后,把模板内的文件拷贝到GirlsCodingDayDemo这个文件夹中。

  4. 提交commit到master分支,(注意changes)

  5. 发布到Github

一直往下拉到Github Pages部分,进行设置

  1. 使用Visual Studio Code编辑器打开桌面的文件夹GirlsCodingDayDemo。找到index.html文件,修改其中两处HTML代码, 然后保存(一定要保存!)。

  2. 使用chrome浏览器打开 index.html预览修改效果

  3. 回到Github Desktop,可以看到修改的内容。提交commit,再点击Push origin同步到Github Pages。

  4. 打开第六步当中github pages的链接,可以看到自己刚刚修改的内容。

访问 网站,你可以看到你刚刚通过Github Desktop软件在github.com 网站新建了一个仓库。点击Settings

https://github.com/
浏览器 Chrome
文本编辑器 Visual Studio Code
文本编辑器 - 维基百科
GitHub
怎样使用 GitHub? - 知乎
GitHub Desktop
Authenticating to GitHub
github.com
SourceTree
Bootstrap模板