学习前端半年的感悟 --- 大坑

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3000 天前的主题，其中的信息可能已经有所发展或是发生改变。

好多坑

html 和 css

比如一个 div 的width设为100px, 加个border: 2px solid black, 宽度就变成了104px

比如弄个导航栏, ul下有几个li, 如果你给li设置为 inline-block, 好了, 每个'li'之间很有可能会有空隙, 去网上找答案竟然有人告诉你在 html 写的时候, 每个<li>不能换行, 还不告诉你原因!

ps: 当然最后都弄明白了啊

js

es6 大法好啊! 但是, 麻烦先用 babel 转换, 不然 chrome 也看!不!懂! 配完 babel 你以为完了? 不, 你要开始考虑调试的问题了, 人家跟你说, 用 sourcemap 啊. 等你真的用上了 sourcemap 就发现, 怎么单步调试一卡一卡的? 有时候还跳错地方了! 然后又要回到配置文件的深渊....

另外, js 没有变量类型, 比如说, 修改 style 的时候, 它需要一个字符串, 你传个数字, 他照样工作不报错, 我已经忘了多少次忘记加px而调试调半天

学习难度

说前端简单了给我站出来. 先不说那几本可以砸死人的经典, 前端要学好, 英语必须先好啊. 遇到问题, 往往是用英文搜索更容易得到解答.

如果你死活要用中文? 举个例子, w3cschool.com.cn是李鬼, 真正的 w3cschool 是w3cschools.com, 纯英的, 要翻墙才能上, 当然也有翻译版本

再比如说慕课网上的视频教程, 要用 js 做一个轮播图, 作者用 dw 作为编辑器, 然后还用 setTimout 实现动画, 这我不多说, 毕竟年代有点远. 但是让我无法接受的是, 作者连续点击下一张按钮, 结果图片转换动画不正常, 作者对此的解释是:"内存不足", excuse me? 不是你点太快了结果两个动画效果重叠到一块了么?

用纯中文学前端真心是地狱难度, 被各种带偏.....

此外, 前端要学的东西, 太多太多太多了. 不是说新框架, 而是基础知识多而杂, 我就学了半年, leanote 记下的笔记都超过 100 了, 而且大部分都是长笔记.(嗯...好像也不算多, 一天一篇都没有)

工作与薪酬

并不高! 至少应届毕业生里面, java 招的人多, 而且工资高多了.

半年后我总算明白了你们口中靠谱的前端是什么意思了, 即: 有工作经验能打能扛得资深前端, 至于新手从来就不缺, 所谓前端火, 真的和我这种小透明没个卵关系.......

半年收获

要静下心才能做技术, 抱着浮躁的心情转来学前端(导师的之前接活的方向是图像处理), 在阿里面试的时候被鄙视在知道自己学得有多肤浅, 一定要深究啊
终于学会了读文档学习, 比如说, 要学习 vuejs, 以前是搜索: vue 入门教程或者vue 实例教程, 现在去 vue 官网看着 example 对着 document 学, 前期基础积累够了, 然后静下心, 自然就能做到了.

如果你要入前端坑

找个人带你
学好英文还有舍得花钱买书
还是个菜鸡就不要碰 webpack, babel, 一知半解浪费自己的人生
要有爱, 分分钟那个相对路径绝对路径都分不清的同学都能拿到碾压你的 offer

疑惑

暑假私人原因没有出去实习, 没有具体项目经验是不是找工作很吃亏?
没有项目机会, 阅读框架代码是否可以为我简历增色?
文中内容是否很肤浅, 让你很有教育下年轻人的冲动?

背景: 跨专业 211 小硕, 本科四年浑浑噩噩, 硕士三年还债中.

ps: github 就不放了, 当初扔简历上被鄙视了一番, 哎......

第 1 条附言 · 2016-08-27 15:41:41 +08:00

文中吐槽的内容都弄懂了, 只是第一个月真的一脸懵逼

谢谢大家的好意 [笑cry]

第 2 条附言 · 2016-08-27 18:59:49 +08:00

更正: 经 @est 提醒, 真正网址应该是 www.w3schools.com

前端

babel

Vue

教程

47 条回复 • 2016-09-10 20:41:26 +08:00

ChiangDi

2016-08-27 11:25:27 +08:00

w3cschool 纯英的也很垃圾。。。建议看看 MDN

VVJiao

2016-08-27 11:35:31 +08:00

英语好直接上官网学还是挺快的，懒得话到 youtube 看个视频，有问题就上 stackoverflow 。
> 要有爱, 分分钟那个相对路径绝对路径都分不清的同学都能拿到碾压你的 offer
这个说的很现实

ericls

2016-08-27 11:38:17 +08:00 via iPhone

HTML 和 css 不是前端吧

zog

2016-08-27 11:40:23 +08:00

哈哈. 学习前端需要强大的内心, 和丰富的动手能力.

TangMonk

2016-08-27 11:41:46 +08:00

哪个技术不是这样，后端更坎坷

fulvaz

2016-08-27 11:45:23 +08:00

@TangMonk 其实差不多, 只是觉得收入和产出不成正比, 前端要有一颗坚强的心, 哈哈哈

loading

2016-08-27 11:48:23 +08:00 via Android

现在入门好很多了，以前资源没这么多，第一次遇到双倍 margin ，我都开始怀疑我的代码了……那时浏览器基本没太多好用的调试工具。

TangMonk

2016-08-27 11:51:52 +08:00

@fulvaz 应届毕业生还要求什么收入与付出？在这个阶段付出也是收入

dabpop139

2016-08-27 11:52:16 +08:00

编程技术很大程度上要装逼，在你没有其它选择之前，就你只能继续装逼，前端技术可以关注一下我坚持装逼的系列视频，不啰嗦，不拽概念， http://space.bilibili.com/36072651/#!/index

还有英语是必需过的关，自认识英语很烂的我也没有放弃治疗，不是坚持继续慢慢学习，贵在坚持。

depress

2016-08-27 11:52:43 +08:00 via Android

楼主确定初级前端比初级 java 工资低？我们是不是生活的不是一个星球。

jasonslyvia

2016-08-27 11:52:46 +08:00

如果有 bat 员工付费一对一指导，有没有人有兴趣……

hustlike

2016-08-27 11:53:45 +08:00

java 都烂大街了。。然而各个公司都缺前段。。

XhstormR

2016-08-27 11:59:35 +08:00

说实话国内的资料或者说博客非常坑，通常是一个人写了个错的，然后许多人都是转载复制到自己的博客上，然后也不验证对错，就这样错误的东西全网都是了，碰到好几次都怀疑自己还是 Bug 了，烦躁。

所以啊，真的要学好英文啊，国内真是水深火热。

fulvaz

2016-08-27 12:06:37 +08:00

@depress 低 10%-20%啊, 对了, 坐标广州

fulvaz

2016-08-27 12:08:01 +08:00

@jasonslyvia 很有市场啊. 但我个人是过了那道坎, 不太需要, 哈哈

lovedebug

2016-08-27 12:08:41 +08:00

真正带偏的是 - 前端很简单，前端的各类框架。
初学者，一定要打好基础，先把 ES6 和 ES5 搞懂再去弄框架

buckyRRRR

2016-08-27 12:19:23 +08:00

我觉得你学习方式很有问题，学到遇到问题知道去哪里找到解决方式的程度就可以了

Phariel

2016-08-27 12:22:19 +08:00

"比如一个 div 的 width 设为 100px, 加个 border: 2px solid black, 宽度就变成了 104px"

box-sizing: border-box;

tabris17

2016-08-27 12:24:40 +08:00

如果 LZ 知道 box-sizing 还有盒模型，岂不是更崩溃

shenqi

2016-08-27 12:34:57 +08:00 via iPhone

学了半年，白学了

scnace

2016-08-27 12:35:21 +08:00 via Android

后端也不容易。。。

(我怎么觉得最好的语言初级工资比较高)

laobubu

2016-08-27 12:36:40 +08:00 via Android

只能说还是太年轻， naïve ，先多看看理论

Perry

2016-08-27 12:40:10 +08:00 via iPhone

box-sizing 可解决
不推荐 inline-block <li>，现在 flexbox 比较适合了。你说的那个解决方法，发帖第人都说了只是一个投机取巧的方法。
浮躁的话学不好前端

whwq2012

2016-08-27 12:45:02 +08:00 via Android

请问下你遇到那些一时无法解决的问题是怎么办的

Vicia

2016-08-27 12:49:57 +08:00 via iPhone

楼主没有实际项目的机会，可以看看有没有自己感兴趣的东西，做些个人项目。有作品肯定要比阅读框架代码更让人容易了解你的水平。
英语确实很重要，能看原文就尽量少看译文。

CTO

2016-08-27 13:24:27 +08:00

bootstrap.min.css 就是 box-sizing: border-box 2333333

gouflv

2016-08-27 13:28:50 +08:00 via iPhone

哈哈，半年时间可惜了

fulvaz

2016-08-27 15:39:31 +08:00

@buckyRRRR 有些问题是很难描述的, 必须问人, 自己找不到答案......

@lovedebug 对对对! 几个月前我看 react 和现在看 react 感觉完全不一样

@tabris17 @Perry @Phariel 我当然知道 box-sizing, 导航栏应该用 float 或者 flexbox 啊.......我都故意写说弄懂了呀... 但是我知道你们是好意, 哈

@shenqi 能不能详细说说白学的问题?

@whwq2012 看书, 看文档, google 找案例, 换搜索的关键词, 实在不行找擦边的概念文档, 也许会能够找到相关内容需要的, 最快的话... 那自然是直接扔 v2, 不过总觉得会被人说没诚意, 所以基本没在 v2 问过, 实在不行只能靠缘分了, 比如通用选择符 `~` , 我是某天想到不如把 css 选择器重新梳理一遍, 然后在 mdn 看到了这个

@gouflv 额, 我吐槽的问题其实都弄懂了........