2 从零开始学习 Web 开发
下面将介绍如何进入 Web 开发的世界。
2.1 安装基础软件
本文推荐使用 Visual Studio Code 作为文本编辑器,且使用 Git 用于管理和共享文件。当然,也需要一些自动化构建工具,比如 Grunt 或 Gulp,用来自动完成代码压缩和运行测试等重复性任务。
在 vscode 下学习 Web 是很方便的。安装 Live Server 插件可以实时预览网页。
![](https://img.haomeiwen.com/i1114626/d7b7b0414c7f4891.png)
![](https://img.haomeiwen.com/i1114626/420479d466a85575.gif)
2.2 开发前需规划好网站的设计
首先,在开始创建一个网站之前,最好要做好规划:
- 网站的主题是什么?
- 基于所选的主题要展示哪些信息?
- 网站采用什么样的外观?
其次,将规划的网站使用纸笔展示出来,简单的画个草图。
![](https://img.haomeiwen.com/i1114626/1d7fc576484a049d.jpg)
最后,便可以准备草图中的文本(包含字体与颜色等细节)与图片。
关于颜色,可以打开 色彩选择器 挑选心仪的颜色。
关于图像,可以访问 Google 图片搜索 来搜索合适的图片。
请注意::大多数网络图片(包括 Google 图片)都是受版权保护的。为了降低盗版风险,可以使用“Google 许可证过滤器”。点击“工具”按钮,然后在使用权限的选项下选择类似“标记为可再利用”的选项:
![](https://img.haomeiwen.com/i1114626/1092d503cda929ad.png)
关于字体,访问 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 创建网站的一些约定
创建网站,总是无法避免创建一些文件,而文件的命名需要遵循一些约定:
- 文件名大小写敏感;
- 使用连字符
-
作为文件名的单词分隔符,不要使用空格或者下划线_
。
网友评论