热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

我的前端入门经历

前言大致想来,接触前端已有两年左右的时间,也曾迷茫过,所幸坚持了下来,也终于入门了。两年来看过不少书,接触过不少新技术,随着知识边界的不断扩展,也越来越感觉到自己的不足,还有更多的知识点需要掌握。

前言

大致想来,接触前端已有两年左右的时间,也曾迷茫过,所幸坚持了下来,也终于入门了。两年来看过不少书,接触过不少新技术,随着知识边界的不断扩展,也越来越感觉到自己的不足,还有更多的知识点需要掌握。平时,有不少人问我怎么学习前端的,一般我是不回复这类问题,不是不愿意,而是回答不了。因为自己也才刚入门,没有什么能力指导别人,还有就是不同的人有不同的知识储备和编程基础,总的来说就是各有各的情况,我的学习方法或许只适合我本人。这篇文章并不是为了指引其他小伙伴入门,仅仅是一个个人的阶段性回顾。

初始接触

最初接触前端还是本科时候,是大二还是大三业已忘记,学了一些HTML/CSS,并没有深入了解,毕竟年轻嘛!不知道学什么,什么又都想了解一点。只是感觉,自己可以用程序写出来一张页面是很酷的事情,做页面远比写C++代码有趣多了。硕士阶段,一个项目需要一个完整登陆模块,那个网站是ASP.NET做的,为此就学习了两个月左右的ASP,做了一个完整的登陆注册模块,算是对web开发有了一个粗浅的认识。一位师兄是前端方向的,导师也让跟着他学点东西,看他拿到了网易的offer,就感觉到前端还是很有前途的,就转向了前端。当时也没想着毕业后从事前端工作,仅仅是为了学点东西而已,对于未来择业还是偏向于事业单位或研究所。没想到接触的越多,了解的越多,越就喜欢从事这个行业。

知识储备

本人接触或学习一门知识或者技术,一般先把背景知识了解后,知道其应用场景及意义后才会进行系统学习,学习前端知识也是这样。先去w3school学习了前端包括的几大核心知识HTML/CSS/Javascript,当然也把网站上所有的知识点都浏览了一遍,包括PHP、XML等等。对web开发有了一个大概认知之后,就开始系统的学习前端知识。

在学习基础的知识的过程中,并没有忘记拓展自己的知识边界,也看了不少其他相关书籍。下面是一些书籍列表:

  • 《Javascript基础教程》
  • 《Javascript基础与实例教程》
  • 《Head First HTML与CSS》
  • 《HTM5与CSS3权威指南》
  • 《响应式Web设计 :HTML5和CSS3实战》
  • 《网页设计与配色经典案例解析》
  • 《超人气网站是这样建成的》
  • 《网站设计解构 :有效的交互设计框架和模式》
  • 《Web 2.0界面设计模式》
  • 《CSS创意课 :全球优秀交互页面设计》
  • 《响应式Web图形设计》
  • 《Sass与Compass实战》

在学习的过程中,为了练习网站布局,大致重构了HTML5中国、京东等网站的网页。

在掌握了一定的前端基本知识后,感觉Javascript是前端里面最核心的一部分,就把学习重心放在了Javascript上,看了下列书籍:

  • 《Javascript高级程序设计》
  • 《Javascript启示录》
  • 《高性能Javascript》

高级程序设计本书无疑是一本经典之作,讲解的非常全面、细致,但个人感觉并不适合初学者,因为里面有不少知识点并不是初学者可以深刻理解的。同一句话的含义对于资深程序猿和菜鸟程序猿是不同的,高级程序设计本书适合有一定基础的人阅读,最好读多遍,这样才能深刻理解Javascript语言本质。

对高质量代码的不懈追求是一个优秀工程师必备的素质,要想写出高质量的代码就需要对web性能优化相关知识有一定的了解,我就阅读了以下书目:

  • 《高性能网站建设进阶指南 :Web开发者性能优化最佳实践》
  • 《Javascript设计模式》
  • 《编写可维护的Javascript》
  • 《Javascript函数式编程》
  • 《WEB性能权威指南》
  • 《WebKit核心技术揭秘》
  • 《Web前端黑客技术揭秘》

很多招聘前端工程师的职位要求往往都会对后端知识储备有所要求,LAMP是很多公司的后台技术选型搭配,就学习了最好的语言--PHP,看了:

  • 《PHP与MySql程序设计》

代码是写出来的,只有多写代码,才能养成良好的编程习惯,写出高质量、可维护的代码,在储备知识的过程中不要忘记动手实践,只有在不断的实践才能不断的提高自己的编程水平。

项目实践

对于大部分在校学生来说,并没有多少好的项目让你去做,没有项目做也就不能积累项目经验。不少人做的第一个项目就是自己的个人博客,我也不例外。下面就是关于这个个人博客的一些经验:

这是一个闲来无事练手之作,也是对自己长时间学习前端知识的一个检验。从需求的分析、页面的设计,再到概要设计及编程实现,以及上线和测试,一个完整的流程走下来,对软件开发有了更深刻的认识,收获了很多。由后台管理系统和用户浏览页面两个部分构成。下面就详细的叙述一下这个博客所用到的一些编程语言和框架类库及收获。   

  • 前端实现

Javascript/HTML/CSS毫无疑问是必不可少的,在写Javascript代码时用的jQuery库,它是轻量级的js库,兼容CSS3和各种浏览器,jQuery使用户能更方便地处理HTML、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery给开发者提供了很大的便利,当然如果写的是一个复杂的应用或者调用很频繁的程序,最好还是用原生的JS写,毕竟最高效的还是原生的。推特的开源框架 BootStrap是一款很流行的前端框架,Bootstrap 让前端开发更快速、简单,本博客也使用了它。为对HTML进行更新时简化代码,提高代码利用率,还使用百度前端团队开发JS模板引擎。为了使博客的界面更加的漂亮,为博客注入一丝活力,也使用了粒子跟随插件。为了更好的管理博客,使用Datatables插件,以及一个所见即所得的基于BootStrap的富文本编辑器。

  • 后端实现

关于后端,本来准备学一点Node.js,把博客放在我们实验室自己的服务器上,但一想离开后就不容易维护了,就选择了PHP和MYSQL,这样方便在新浪SAE上发布。以前也看过一些PHP的教程,但没怎么使用过,很快也就把知识还给作者了。所以为了搭建后台,就选择了一款轻量级的框架-CodeIgniter。简单易学,很快就可以上手,对于新浪SAE上也有专门的优化。CodeIgniter 是一个小巧但功能强大的 PHP 框架,作为一个简单而“优雅”的工具包,它可以为 PHP 程序员建立功能完善的 Web 应用程序。这个框架很容易上手,想自己做一些网站的小伙伴可以学习一下,在学习之前最好对PHP和MYSQL有一些了解,从w3school可以了解一些基础知识。磨刀不误砍柴工,对基础知识有一定的了解之后,可以快捷高效的使用CodeIgniter框架,也可以避免一些低级错误。新浪SAE上的MYSQL版本较低,你在本地上创建的数据库可能不可以直接导入到SAE平台数据库中,这时候你就得自己动手从新创建了。 

还做一些其他的项目练手,比如老年卫视,钟表式日历插件,故事续写网站等。

新技术

一入前端深似海,有太多的知识需要学习,也有不少的新技术、新概念不断涌现。学习或者了解过less/sass、angular、node、react、grunt等,但于学生的我来说缺少一些应用场景,也仅仅停留在学过而已,只对其概念有所了解。

个人感觉对于新技术不要盲目,打好基础才是王道,无论是什么样的技术只有结合具体项目才有用武之地,不能人云亦云,一拥而上。我们要随着项目实践不断拓展自己的知识边界,而不是闭门造车。


推荐阅读
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • 本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ... [详细]
  • 在哈佛大学商学院举行的Cyberposium大会上,专家们深入探讨了开源软件的崛起及其对企业市场的影响。会议指出,开源软件不仅为企业提供了新的增长机会,还促进了软件质量的提升和创新。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • MySQL中枚举类型的所有可能值获取方法
    本文介绍了一种在MySQL数据库中查询枚举(ENUM)类型字段所有可能取值的方法,帮助开发者更好地理解和利用这一数据类型。 ... [详细]
  • 本文详细介绍了如何通过命令行启动MySQL服务,包括打开命令提示符窗口、进入MySQL的bin目录、输入正确的连接命令以及注意事项。文中还提供了更多相关命令的资源链接。 ... [详细]
  • 本文介绍了在Windows环境下使用pydoc工具的方法,并详细解释了如何通过命令行和浏览器查看Python内置函数的文档。此外,还提供了关于raw_input和open函数的具体用法和功能说明。 ... [详细]
  • 本文探讨了如何在编程中正确处理包含空数组的 JSON 对象,提供了详细的代码示例和解决方案。 ... [详细]
  • 本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本,并进行数据处理和保存。 ... [详细]
  • 高效解决应用崩溃问题!友盟新版错误分析工具全面升级
    友盟推出的最新版错误分析工具,专为移动开发者设计,提供强大的Crash收集与分析功能。该工具能够实时监控App运行状态,快速发现并修复错误,显著提升应用的稳定性和用户体验。 ... [详细]
  • andr ... [详细]
author-avatar
mobiledu2502924027
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有