从零开始学习 Web 开发2：入门基础
2020-11-04 本文已影响0人
水之心
2 从零开始学习 Web 开发
下面将介绍如何进入 Web 开发的世界。
2.1 安装基础软件
本文推荐使用 Visual Studio Code 作为文本编辑器，且使用 Git 用于管理和共享文件。当然，也需要一些自动化构建工具，比如 Grunt 或 Gulp，用来自动完成代码压缩和运行测试等重复性任务。
在 vscode 下学习 Web 是很方便的。安装 Live Server 插件可以实时预览网页。
2.2 开发前需规划好网站的设计
首先，在开始创建一个网站之前，最好要做好规划：
- 网站的主题是什么？
- 基于所选的主题要展示哪些信息？
- 网站采用什么样的外观？
其次，将规划的网站使用纸笔展示出来，简单的画个草图。
最后，便可以准备草图中的文本（包含字体与颜色等细节）与图片。
关于颜色，可以打开 色彩选择器 挑选心仪的颜色。
关于图像，可以访问 Google 图片搜索 来搜索合适的图片。
请注意:：大多数网络图片（包括 Google 图片）都是受版权保护的。为了降低盗版风险，可以使用“Google 许可证过滤器”。点击“工具”按钮，然后在使用权限的选项下选择类似“标记为可再利用”的选项：
关于字体，访问 Google Fonts 或者 阿里字体素材平台 选择需要的字体。
2.3 Git 与 Github 创建有版本控制的工作区
详细内容参考 MDN: Git 和 GitHub。
本文使用 Git 作为版本管理工具，而与之关联的编程社区网站是 Github。为了使用 Git 和 GitHub，你需要：
还需要了解一些关于 Git 与 Github 的基础知识（有选择性的学习即可）：
- Hello World：在这里你可以学到 Git 的基础操作，例如：创建储存库 (Repository) 和分支 (Brunch) 、确认提交 (commit) 以及打开和合并拉取请求 (open/merge Pull Request)。
- Git Handbook：这个 Git 使用手册就稍微更深入一点了，它解释了什么是版本控制系统、什么是储存库 (Repository) 、 GitHub 模型如何运行、 Git 指令和示例等。
- Forking Projects：当你想要对别人的代码做出贡献时，复刻（fork，即服务端代码仓库复制）是必不可少的步骤。这个链接将告诉你如何操作。
- About Pull Requests：这是一个管理拉取请求的有用的指南：你所修改的代码需要通过拉取请求来让项目的管理者决定是否采纳。
- Mastering issues：问题区 (Issues) 就像是一个关于你这个 GitHub 项目的论坛，在这里人们可以提问题和报告错误，你可以管理更新（例如给人们分配需要解决的问题、澄清问题以及告知问题已经解决）。这篇文章会让你知道所需要的一些关于问题区的知识。
- Understanding the GitHub flow：理解 GitHub 流程。
- Git command list ：Git 指令列表。
-
Mastering markdown （在网页上、评论区常用的格式以及
.md文件所使用的格式，GitHub 中的介绍文件 (readme.md) 即用这种格式书写）。 - Getting Started with GitHub Pages：如何在 GitHub 上发布示例和网站。
- Learn Git branching：学习 Git 的分支结构。
- Flight rules for Git：在 Git 中实现特定功能的非常有用的方法介绍纲要，包括如何在出错时纠错等。
- Dangit, git!：一个十分有用的方法介绍纲要，特别是在出错的时候进行纠正的方法）。
2.4 创建网站的一些约定
创建网站，总是无法避免创建一些文件，而文件的命名需要遵循一些约定：
- 文件名大小写敏感；
- 使用连字符
-作为文件名的单词分隔符，不要使用空格或者下划线_。
