热门标签 | 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 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
  • 在使用 MUI 框架进行应用开发时,开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • Microsoft即将发布WPF/E的CTP(Community Technology Preview)和SDK,标志着RIA(Rich Internet Application)技术的新里程碑。更多详情及下载链接请参见MSDN官方页面。 ... [详细]
  • 本文探讨了前端包管理器的核心功能,包括注册机制、文件存储、上传下载、以及依赖分析等关键特性,并介绍了几种流行的前端包管理工具。 ... [详细]
  • Web App vs Native App:未来的移动应用趋势
    随着移动互联网的发展,Web App和Native App之间的竞争日益激烈。对于开发者而言,选择哪一种技术路径更为明智?本文将深入探讨两种应用模式的特点及未来趋势。 ... [详细]
  • 利用CSS3和React实现数字滚动动画组件
    在前端开发中,数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件,包括组件的代码实现和样式设计。如果您对HTML版本感兴趣,欢迎留言获取。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 在寻找轻量级Ruby Web框架的过程中,您可能会遇到Sinatra和Ramaze。两者都以简洁、轻便著称,但它们之间存在一些关键区别。本文将探讨这些差异,并提供详细的分析,帮助您做出最佳选择。 ... [详细]
  • springMVC JRS303验证 ... [详细]
  • 本文详细介绍了在使用Socket进行网络编程时,遇到链接器错误`undefined reference to WSAStartup@8`的解决方案,适用于多种开发环境。 ... [详细]
  • Vue 3.0 翻牌数字组件使用指南
    本文详细介绍了如何在 Vue 3.0 中使用翻牌数字组件,包括其基本设置和高级配置,旨在帮助开发者快速掌握并应用这一动态视觉效果。 ... [详细]
  • 本文详细介绍了 WebKit 内核中常用的 CSS 属性,包括文本大小调整、阴影效果和颜色渐变等,帮助开发者更好地理解和使用这些属性。 ... [详细]
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社区 版权所有