入门小白如何学习前端,又有哪些常见的编辑工具

作者:乐于分享的小团体
浏览数:
时间:2020-03-17

作为一个前端初学者,应该如何有计划的学习前端开发呢?前端开发涉及很多内容,html/css、JavaScript、Vue.js、jQuery等等,今天我们主要了解下html/css下面是小编作为一个初学者的一点点的小建议,大家可以参考一下。


作为一个刚入门的代码小白,应该把学习重点放在CSS和html基础知识上。需要了解以下相关知识点:HTML的相关概念,HTML标签,表单标签,css字样式,格式化排版,css选择器,css盒模型,布局模型等等。网上有很多这种相关课程的网站,小编最常看的是慕课网(https://www.imooc.com),里面有很详细的关于css和html的相关课程,感兴趣的朋友有空不妨看看。


这些都是相关课程,初级到高级全都有,非常详细。




每章课程里除了相关介绍,还有实战操作,下面的网友问答和同学笔记更是可以学到很多东西,解答疑难问题,相互探讨。



如果css和HTML都看完学完了,小编建议大家有空可以尝试学着写一个完整的静态页面,这样可以更清楚地看出自己哪里不足,可以回头深入仔细的研究学习,打好基础才能为以后学习之路做铺垫。说到实战上手写页面,就少不了用到编辑工具,对于前端开发工作者来说编写代码是一种艺术,在使用多种多样的编程语言编写代码时都离不开代码编辑工具。因此编辑工具对于前端开发工作者来讲是非常非常重要的,今天就推荐一款小编常用的编辑器。

Visual Studio Code(官网:https://code.visualstudio.com)



Visual Studio Code集成了所有一款现代编辑器所应该具备的特性,包括语法高亮(syntax high lighting),可定制的热键绑定(customizable keyboard bindings),括号匹配(bracket matching)以及代码片段收集(snippets)。这款编辑器也拥有对 Git 的开箱即用的支持。以上就是对Visual Studio Code的简单介绍。下面就简单介绍下Visual Studio Code的操作使用


第一步,官网下载https://code.visualstudio.com

下载下来是英文版的,如果想使用中文的,可以在拓展里面搜索 Chinese,点击Install,重启后就会是中文版本的


(图片源于网络)


第二步,安装插件

beautify格式化代码工具,美化javascript,JSON,CSS,Sass,和HTML在Visual Studio代码。(安装方法同安装中文的步骤一样)



Auto Rename Tag,自动完成另一侧标签的同步修改(安装方法同安装中文的步骤一样)



Code Spell Checker,识别单词拼写是否有误,并给出提示(安装方法同安装中文的步骤一样)



guides,显示代码对齐辅助线,很好用


(图片源于网络)


安装完这些插件,在使用上面又大大方便许多


常用快捷键


  • Ctrl+Shift+P,F1 展示全局命令面板
  • Ctrl+P 快速打开最近打开的文件
  • Alt + up/down 移动行上下
  • Shift + Alt up/down 在当前行上下复制当前行
  • Ctrl + Shift + K 删除行
  • Ctrl + Enter 在当前行下插入新的一行
  • Ctrl + Shift + Enter 在当前行上插入新的一行
  • Ctrl + / 添加关闭行注释
  • Shift + Alt + F 格式化代码


以上内容就是小编对于基础入门学习的相关建议。当然对于初学者来说,想要完全理解以上基础内容可能还比较困难,所以如果想系统的的全面了解学习,小编建议大家去网上进行相关视频学习,包括Visual Studio Code在网上也是有很详细的介绍,相信有了小编的简单介绍和网上视频的学习,大家即使是零基础也可以轻轻松松的入门。