search
HomeWeb Front-endHTML Tutorial关于前端的思考与感悟_html/css_WEB-ITnose

万事开头难。

当我想要认真写一篇文章向大家分享我对前端的认识与感悟的时候,突然就深刻的体会到了这句话确实太有道理了。

最近几年对于web前端的传闻很多,比如人才稀缺,简单易学,待遇丰厚,整体势头发展良好等等。遇到过一个不太熟搞后台开发的同事跑来问我学习前端需要掌握哪些内容,也听说过一个搞IOS开发准备自学前端半个月然后要去找前端工作,也曾看到过有人对前端市场人才的稀缺这样吹捧过:

现在,几乎整个互联网行业都缺前端工程师,不仅在刚起步的创业公司,对上市公司乃至巨头这个问题也一样存在。没错,优秀的前端工程师简直比大熊猫还稀少。... ...

不仅在国内的互联网行业,在国外,前端工程师一样是需求旺盛、供不应求的香饽饽。

对于这样的吹捧,不反对也不支持。因为由于每个人的位置,经历的不同,对事总会有不同层面的理解。而作为一个从成都的菜鸟,蜕变成一名北京的菜鸟,也来谈谈自己对于前端的理解。

一、地域差异

在成都的大部分公司,有一种专门负责切图排版的网页工程师。他们需要懂一些PS,然后会使用HTML与CSS排版。而这类人往往是刚参加工作不久的毕业生,响应式布局对他们来说是一种高大上的技能。很荣幸,我也曾经是他们的一员,也正因为如此,我掌握着熟练的切图技巧,而这个层次,可能就是外人认为的入门容易吧,然而实际上还差很远很远。

另外一种,就是比较厉害一点的程序员。他们会js+一门后端语言,比如php,jsp。但是他们会会更加偏向后端一点,他们将html,css,js当成一种很基本的东西,更多的逻辑都使用后端语言来处理,并不会那么清晰的将html页面与后端语言分离开来。所以我们常常会看到有的页面以.php,.jsp结尾。

来了北京之后,才算是见识了真正的web前端。以至于常常会有一种恨自己为什么不早一点来的感觉,恍如隔世。随着学习的慢慢提升,会感觉到北京的前端更加具有明确的方向。

我们会真正的注重用户体验,所以每个页面都会响应式布局,从PC端适配到最小320px宽度的移动端,更加注重html5/css3的相关知识的运用,也会为了用户体验做很多功能之外的更加合理的处理。会真的很认真的考虑面试中常常会问的如何优化前端性能。因此我们使用gulp+require来构建前端代码,压缩,打包,上传cdn。

总的来说,在北京,前端更加专业与明确一点,发展更加好一点。

二、兴趣是否重要?

我曾经很认真的思考过这个问题,很多前辈大神告诉我,“兴趣很重要。”

可是我经过仔细分析自身的情况之后,却得出了一个相反的结论。

因为我并没有发现什么东西是我感兴趣、并且能让我能够混口饭吃的。然后现在我也觉得只要我能够这样慢慢努力下去,在前端这个行业里,还是能够拥有一席之地。现实一点来说,只要你能够进下心来不排斥它,你就可以选择它。毕竟人都是要吃饭,要养活自己的,我想大多数人都是没办法指着自己的兴趣过活的。

《一万小时天才理论》告诉我们,在某一个方向专注一万小时,你就能够成为这个方向的专家。我认为,这个道理,在前端也同样适用,专注,比兴趣更加重要。

三、什么心态会影响自己的进步?

不坚定。

至少我现在可以肯定的是,前端方向,并不是一个糟糕的选择。在最初的时候,时常会在UI设计与前端之间摇摆不定。我认为我对UI设计更加感兴趣一点。特别是参与了电信一个视频播放app的设计之后,更是认为自己未来是有机会成为一名优秀的UI设计师。但是我另外又觉得自己在前端方向会更加快一点提升自己。于是在很长一段时间里就纠结在这个问题上摇摆不定,停滞不前。其实不管坚定的选择哪一个方向,在目前的互联网行业里,都是很热门的选择,都有出头之日。而最大的错误就在于,犹豫不决。

浮躁。

如果我最终没能成为一名优秀的前端工程师,那么最大的原因肯定就是心态的浮躁。

谁都想要在短期内成为一名学识渊博,经验丰富,德高望重的前端工程师。我也想,这是很难避免的一个心态问题,别人高额的薪水与自己的困境总是那么轻易的扰乱心神。所以一个月从入门到精通,3个月从入门到精通之类的宣传标语,都是非常受欢迎。然而事实上,这并不可能。打着这些宣传标语的培训机构,最多只能带你入门。甚至很有可能一位在前端行业沉浮好几年的老同学都不敢说自己已经在这个行业算得上优秀了。并不是说几年的时间没办法变得优秀,而是能够静下心来潜心修炼的人确实凤毛麟角。所以其实实际情况是 慢慢来,才最快

毕业几年,感觉自己前进道路上最大的阻碍就是这两个心态问题。这也正是我开公众号的初衷所在,我希望能够静下心来,将自己学到的东西整理出来,分享给大家,一来慢慢竖立自己的个人品牌,让别人能够更加简单直接的了解自己,二来也锻炼自己的心态。在这里也谢谢大家的关注与支持。

公众号会主要分享一些前端的技术知识与职场吐槽,欢迎大家搜索微信号 isreact关注我,让我们一起成长!^_^

四、 如何应对新技术层出不穷的现状

很多时候我都会觉得前端对于新人来说其实挺过分的。

想要学习一门ui框架,有什么easyui,bootstrap,Foundation等等。想要搞一个自己的静态博客,有什么wordpress,jekyll,hexo等等

想要学构建工具,有什么grunt,gulp,webpack等等

还有好多传说中都很厉害的库,jQuery,angular,vue,react等等

真的眼花缭乱,刚开始怎么分得清谁比谁好啊。一不小心就走一大堆的弯路。

所以这个时候我们就必须明白一个道理。基础的重要性在于,他能够提高我们的学习能力。

bootstrap,angularjs最初于我如传说中的存在,高不可攀。而且很多公司招人都希望员工能够掌握这些技术。所以在基础很薄弱的时候就开始尝试去学习。很显然,效果是几乎没有的。反而会减少我对于前端的自信,会很容易产生动摇,觉得自己不适合。

可是随着基础的慢慢提升,我发现要掌握bootstrap与angularjs似乎也没有那么难。我甚至能够看着文档就有模有样的将这些技术运用起来。这对于以前的我来说,简直就是不可思议。因此,从以前的高不可攀,到现在的触手可及,让我明白了基础的重要性。

而对于最近非常火的react,webpack等,掌握起来也没有当初那种无法触及的感觉。这些技术之所以能火,就说明能够学会的人很多,他并不存在特别难以掌握的瓶颈。如果你的基础够牢靠,你就是这些技术的弄潮儿。

五、前端并没有那么简单

前端不简单的地方,并不在于知识点的掌握,技术的实现,而在于寻找更优解。即使是最简单的页面布局,也存在层出不穷的优秀解决方案,比如在大学的时候,常用table元素来实现几乎所有的页面布局,到现在理解文档流,会运用浮动,各种盒模型,BFC等来实现布局这中间的差距对于一个新人来说是非常巨大的。

从最初的写一大堆js代码,实现一个页面的小功能,到后来发现有的人只需要用几行代码配合html/css就可以控制整个页面的所有动画,这中间的差距,也是非常巨大的。所以前端并不是外界认为的那么简单,甚至并不比掌握好一门后端程序语言那么容易。所以我们要保持敬畏之心。

六、其他

学习方法

在我这个阶段的认识来看,我认为学习最靠谱的方法就是积累。有一个很普遍的假象是,互联网时代似乎获取知识越来越容易,很多人都在担忧所谓的信息过剩的问题。然而实际情况却是,我们更加难以捕捉到对我们来说真正有用的信息。而前端的知识相对而言更加零散与碎片化,并且越来越多样化,所以知识的积累则是一个非常重要的过程。

英语很重要

英语很重要的原因是因为国外的技术比我们发达,我们常常需要阅读国外的文章来提升自己,也常常需要在google搜索上找到自己问题的答案

总的来说,在前端的道路上,遇到过动摇,困惑,迷茫。也因为浮躁的心态停滞不前。好在都一步一步的走了过来。并且可以很把握的告诉自己,这个方向,不会亏待我的付出与努力。

花了很多时间,终于把这篇文章写完了,泪奔!写文章对于一个程序员来说真的是超级大的挑战。感悟就是 万事开头难,中间难,结尾也难。

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input?How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What are the best practices for cross-browser compatibility in HTML5?What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How to efficiently add stroke effects to PNG images on web pages?How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What is the purpose of the <datalist> element?What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element?What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

How do I use the HTML5 <time> element to represent dates and times semantically?How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <meter> element?What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),