美文网首页
从零开始学习 Web 开发2:入门基础

从零开始学习 Web 开发2:入门基础

作者: 水之心 | 来源:发表于2020-11-04 10:21 被阅读0次

    2 从零开始学习 Web 开发

    下面将介绍如何进入 Web 开发的世界。

    2.1 安装基础软件

    本文推荐使用 Visual Studio Code 作为文本编辑器,且使用 Git 用于管理和共享文件。当然,也需要一些自动化构建工具,比如 GruntGulp,用来自动完成代码压缩和运行测试等重复性任务。

    在 vscode 下学习 Web 是很方便的。安装 Live Server 插件可以实时预览网页。

    2.2 开发前需规划好网站的设计

    首先,在开始创建一个网站之前,最好要做好规划:

    1. 网站的主题是什么?
    2. 基于所选的主题要展示哪些信息?
    3. 网站采用什么样的外观?

    其次,将规划的网站使用纸笔展示出来,简单的画个草图。

    最后,便可以准备草图中的文本(包含字体与颜色等细节)与图片。

    关于颜色,可以打开 色彩选择器 挑选心仪的颜色。

    关于图像,可以访问 Google 图片搜索 来搜索合适的图片。

    请注意::大多数网络图片(包括 Google 图片)都是受版权保护的。为了降低盗版风险,可以使用“Google 许可证过滤器”。点击“工具”按钮,然后在使用权限的选项下选择类似“标记为可再利用”的选项:

    关于字体,访问 Google Fonts 或者 阿里字体素材平台 选择需要的字体。

    2.3 Git 与 Github 创建有版本控制的工作区

    详细内容参考 MDN: Git 和 GitHub

    本文使用 Git 作为版本管理工具,而与之关联的编程社区网站是 Github。为了使用 Git 和 GitHub,你需要:

    1. 安装 Git
    2. 使用 vscode 作为文本编辑器;
    3. 注册一个 GitHub 账户

    还需要了解一些关于 Git 与 Github 的基础知识(有选择性的学习即可):

    1. Hello World:在这里你可以学到 Git 的基础操作,例如:创建储存库 (Repository) 和分支 (Brunch) 、确认提交 (commit) 以及打开和合并拉取请求 (open/merge Pull Request)。
    2. Git Handbook:这个 Git 使用手册就稍微更深入一点了,它解释了什么是版本控制系统、什么是储存库 (Repository) 、 GitHub 模型如何运行、 Git 指令和示例等。
    3. Forking Projects:当你想要对别人的代码做出贡献时,复刻(fork,即服务端代码仓库复制)是必不可少的步骤。这个链接将告诉你如何操作。
    4. About Pull Requests:这是一个管理拉取请求的有用的指南:你所修改的代码需要通过拉取请求来让项目的管理者决定是否采纳。
    5. Mastering issues:问题区 (Issues) 就像是一个关于你这个 GitHub 项目的论坛,在这里人们可以提问题和报告错误,你可以管理更新(例如给人们分配需要解决的问题、澄清问题以及告知问题已经解决)。这篇文章会让你知道所需要的一些关于问题区的知识。
    6. Understanding the GitHub flow:理解 GitHub 流程。
    7. Git command list :Git 指令列表。
    8. Mastering markdown (在网页上、评论区常用的格式以及 .md 文件所使用的格式,GitHub 中的介绍文件 (readme.md) 即用这种格式书写)。
    9. Getting Started with GitHub Pages:如何在 GitHub 上发布示例和网站。
    10. Learn Git branching:学习 Git 的分支结构。
    11. Flight rules for Git:在 Git 中实现特定功能的非常有用的方法介绍纲要,包括如何在出错时纠错等。
    12. Dangit, git!:一个十分有用的方法介绍纲要,特别是在出错的时候进行纠正的方法)。

    2.4 创建网站的一些约定

    创建网站,总是无法避免创建一些文件,而文件的命名需要遵循一些约定:

    1. 文件名大小写敏感;
    2. 使用连字符 - 作为文件名的单词分隔符,不要使用空格或者下划线 _

    相关文章

      网友评论

          本文标题:从零开始学习 Web 开发2:入门基础

          本文链接:https://www.haomeiwen.com/subject/isowvktx.html