V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
mushokumunou
V2EX  ›  程序员

教练,我想学 web 前端。

  •  
  •   mushokumunou · 2019-12-02 01:50:15 +08:00 · 6329 次点击
    这是一个创建于 1817 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有推荐的技能树展开方式吗?

    个人暂时在学 html5+css,简单学习一点 wordpress,了解些 php。

    简单尝试 js,ide 用的 WebStorm。

    数据库暂时没有接触。

    linux 的话主要 centos,稳定为主,ubuntu 玩不来。尝试会装一些环境练手。 py 会一些,之前接触过 py for maya。

    git,docker 也有所了解。

    以前是完全做 cg 的,由于不是前端,所以在转 web 设计中很多转代码的时候,让前端设计师头疼不已。 最终还是沟通和技术实现矛盾严重,结果不理想,所以想自己学前端,自己把控代码,也好了解 web 的设计思路。

    移动端,主要 ios 开发也想涉足。

    不知道我现在的方向对不对呢,希望能补充,我打算尽可能的学习框架,提高效率为主。

    42 条回复    2019-12-04 18:26:33 +08:00
    DamienS
        1
    DamienS  
       2019-12-02 02:58:06 +08:00
    可以学 react
    DamienS
        2
    DamienS  
       2019-12-02 03:00:22 +08:00
    java 为主,可以学学 go。api 一般 reset 也可以看看 graphql,我感觉 graphql 好用很多( apollo 吧,relay 有点麻烦)

    一般用 vscode 就可以写 web

    移动端可以看看 react-native 或者 flutter
    DamienS
        3
    DamienS  
       2019-12-02 03:00:35 +08:00   ❤️ 2
    没注意是前端
    alw
        4
    alw  
       2019-12-02 08:23:02 +08:00   ❤️ 3
    放弃 php、花少许时间在 HTML、JS 与 CSS 入门后,学习 Vue。
    villivateur
        5
    villivateur  
       2019-12-02 08:35:36 +08:00 via Android
    同上,学习 vue.js
    weixiangzhe
        6
    weixiangzhe  
       2019-12-02 09:07:15 +08:00 via Android
    先放弃移动端 php,主攻 web 前段,之后再上
    grewer
        7
    grewer  
       2019-12-02 09:35:34 +08:00
    学得太杂了
    a4854857
        8
    a4854857  
       2019-12-02 09:40:31 +08:00
    由于你之前主要做 cg 的..然后其实是一个设计师..我觉得就先专心学 html + css 就好了..学熟悉了你就知道你平常设计的那些页面和特效为什么让人头疼了
    icedwatermelon
        9
    icedwatermelon  
       2019-12-02 09:43:23 +08:00
    这个情况需要掌握的主要还是 CSS
    lneoi
        10
    lneoi  
       2019-12-02 10:01:58 +08:00
    原因是设计让前端头疼而学习的?那只要重点学 css3/html,了解一些原生的 js、canvas 就行。
    如果是想转前端,有在接触 php,就简单了解一下前后端的数据传输方式,然后专心搞 css/js,再 react、vue 选一好好学。其他的可以等前端熟练后再发展
    isRealLeven
        11
    isRealLeven  
       2019-12-02 10:04:39 +08:00
    读大几了?
    bzj
        12
    bzj  
       2019-12-02 10:07:05 +08:00
    这个情况需要掌握的主要还是 html+css+jquery
    xutao881
        13
    xutao881  
       2019-12-02 10:07:52 +08:00
    MDN 把 JS 的 Array 和 Object 两个模块好好看看,然后把阮一峰的 ECMAScript6 撸一遍,再挑一门框架,vue 或者 react 都可以,angular 看自己的情况,有兴趣就学学,基础打牢了,万变不离其宗。

    CSS 和 HTML 么...CSS 就是搭积木,HTML 就先用 DIV 一把梭完事儿。
    wqzjk393
        14
    wqzjk393  
       2019-12-02 10:24:49 +08:00   ❤️ 6
    少看 3cschool 菜鸟学院之类的语法教学,都太零碎了跟个 menu 一样。建议直接找个网站页面做仿站,学习时候用来填充的数据就全部自己造一点就好了,毕竟项目里数据都是后端 api 给你的你考虑数据的来源是没太大意思的。
    基本上就是 html 写个骨架,然后通过样式类 class 到 css 里去定义样式,然后通过 js 去处理数据。前端其实就是这个逻辑,前期不要纠结于 css 那么多样式 html 那么多标签要怎么学怎么记,你只要理解了 html、css、js 在前端里的作用,然后需要什么查什么就好了。
    例如 v 站,上面一个导航栏,下面一个 bottom,中间主体框架。你 html 就在 body 里直接分三个 div,然后中间的 div 可以看到有帖子内容主体,右边的广告栏、右上的个人信息,然后你一样跟着分 div。然后在主题内容里面又用许多个 div 包裹了每一条回复信息,这每一个 div 里面有个人头像 img 标签、有个人信息链接的 a 标签,有回复时间对应的 span 文本标签等等,简单说就是用你的设计稿把框架搭起来。
    然后你需要修改样式吧,就像头像显示的大小,文字的大小。这就要通过 css 来分别确定了。其实简单的写写 css 并不难,难的是各种布局和样式的叠加经常会出现奇奇怪怪的 bug,不过样式这种东西慢慢调总是能调出来的
    最后是 js,如果你是自己创建的数据拿来学习那 js 就没啥太大的作用。但是实际上项目中你的数据是从 api 拿到的,你需要做 request 请求获取数据,也需要做 post 提交表单等等。api 的数据是后端通过数据库查询返回来的,因此不同地方的数据格式和请求方式也会有区别,例如内容详情可能就是 title、content、comments、userid、username、userimg 等等这几个字段,主页的请求结果可能就是 title、url、comment_count 等等。不同格式的数据就需要不同的处理方式,因此就有了前端经典的 mvc 结构,model(m)就是起到了这个对不同格式数据不同需求进行统一处理的作用。js 基本上就是做这个用的,处理请求,格式化数据,然后 html 通过 src 等指定到这个格式化好的数据就可以显示页面了。

    我没仔细学过 vue,但是学的是小程序开发,估计差不多。这些都是组件化编程,其实说白了还是包装,把各个部分进行抽象包装,然后在 html 里和原生组件(例如 img)一样调用这个组件,这样能让 html 结构更加简介清晰,但是实际的前端逻辑还是那一套
    Owenhe
        15
    Owenhe  
       2019-12-02 10:26:48 +08:00
    需要每天规划好时间,我都没能一直坚持学,时间不太够用,要学的太多了。
    wangyzj
        16
    wangyzj  
       2019-12-02 13:44:24 +08:00
    html5+css+js
    试试 jq
    然后上 vue 或者 react
    后端语言也可以直接上 node
    这就达成一整个大礼包成就了
    will1234
        17
    will1234  
       2019-12-02 13:46:53 +08:00
    驰狼课堂 有免费的前端教程 还不错。
    zppass
        18
    zppass  
       2019-12-02 16:02:02 +08:00
    教练:你啥都想学,上回那个学的咋样了?
    JerryCha
        19
    JerryCha  
       2019-12-02 16:21:34 +08:00
    root8080
        20
    root8080  
       2019-12-02 16:22:57 +08:00
    零基础的话 还是网上找个好点的教程 花点钱也值得 有好的老师梳理和传授一些经验 比自己看书硬啃高效很多 当然只是入门 后期还是要靠自己
    learnshare
        21
    learnshare  
       2019-12-02 16:26:50 +08:00
    设计转前端,核心是 CSS 及组件化( jQuery/React/Vue/Angular )
    luoway
        22
    luoway  
       2019-12-02 17:03:32 +08:00
    web 前端的话:
    小公司 php
    大公司 Nodejs,初级开发者了解 express 源码足以
    git 必知必会,最好所有项目都放 github 上,再攒点 star
    docker、linux 会也不要在简历上说,否则即使有幸进去了,做的可能就不是 web 前端了

    web 开发基础是 http 协议的运用,了解前后端分离的思路,接下来就是经验与工程问题了。
    框架建议学 react。( vue 太容易上手,以至于招聘没要求)

    楼主做 CG 的本身也是优势,是很多在职前端都没接触过的领域,建议记录到个人博客里。
    f056917
        23
    f056917  
       2019-12-02 17:25:08 +08:00
    orzorzorzorz
        24
    orzorzorzorz  
       2019-12-02 17:28:16 +08:00
    既然有设计经验,那就不要去学那些乱七八糟的东西。核心就是 js 跟 css 的基础,你要做的是把设计经验结合到代码的实现效果里,而不是学什么库。比如一个 button,它在什么样的情况下等于 2,它在各种情形下给人的体验都是不一样的。不如从这块入手。
    secondwtq
        25
    secondwtq  
       2019-12-02 19:23:57 +08:00
    “完全做 cg 的”楼主这个“CG”指的是“Graphics”这一 discipline 还是 CGI/VFX 行业?
    secondwtq
        26
    secondwtq  
       2019-12-02 19:26:31 +08:00
    哦看到 Maya 了 ... 那就是 VFX 啊
    那先提醒下楼上这个“设计经验”到前端的可转移性并不高
    一般这行里面说搞原画的算是做“设计“的还行,做 3d 的并不完全算是
    secondwtq
        27
    secondwtq  
       2019-12-02 19:46:08 +08:00
    ”自己把控代码“不应该是”沟通和技术实现矛盾严重“的解决方案
    当然对于设计师而言,”了解 web 的设计思路“确实更好,但不至于到”自己把控代码“的程度

    学技术不管学什么,都绕不过一个实践
    然后就是,楼主是想转成专职前端还是只是想解决”结果不理想“的问题
    如果是后者的话,那就先自己做点项目,比如尝试把“不理想”的“结果”自己实现出来(不需要数据逻辑),边做边学,用什么技术无所谓的
    Elmer
        28
    Elmer  
       2019-12-02 20:23:15 +08:00
    你确定要学前端吗?

    https://s3.us-west-2.amazonaws.com/secure.notion-static.com/eb98f30c-0f43-4167-950c-c1b4765aff17/75421E84-EC8E-4639-B0F3-27DD40BA0D77.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45BGF5HDPO%2F20191202%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20191202T122256Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEMr%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJHMEUCIQCIz2N9nZbBspfDrl74L%2FwKoRo3wxVKcFzqNFMw00UpmQIgC7whe2H0lyeq4qayrFCfHgrwooZFZuHfVsuNYOnTz6Mq0gIIEhAAGgwyNzQ1NjcxNDkzNzAiDG75bqXkzoiqa%2BWgNyqvAkxlYPGBhvVsCmfOplSM1I5PT%2BU7yCdEgVgDE9fFkaNIi4k4J91bAdLrayOsfGPkbsao72qgu9V%2FdZ8atkiVWWKO%2Bsj0laYbj8jOkM%2BY7Mf6WoKUqDa84AJqn6n8LHE8Me5S4F6flA%2BDYjznoNm%2FN4oBFiHXHHbsVD13A%2FK3KQfX%2Fzh2JQnWuJMLVdsQVDlDj2%2BcrwucFosGYvSr%2F5LKJnGcnGp4Qkr9wxsXwsn07I5Y7ulQd6g4jadKk0bRfDEGhQMQ5sjL8zbXcdrBvBBgZQRMO0wobP4Nv3LIFqo%2FriR1jmOk0JGZNsRI8%2FF5gJHG8T8XjVtfVKfHXo%2F5Kq%2FqHLVLdDZz6kgaphroHKF3pV2w%2BXilqLsn0myLJBkr%2B6IlESBA4yk%2BqHQSsLuAw90gLTDfrpPvBTrNAhp80sPRKc2gmOvSxf2cj7blfS7CTSOPVZn6OscjVAd74hNx5GRDbRugnrX4Or6nPdB24X%2BVypYvR7%2BTDftAGtNNwWwYKwXYnZT5T1%2FbHynp5LyCFbZP%2BKE8tn7qoAbZJEKjTjBV3%2F%2F4T3qI6UkzXPsrc1cPJv%2BMMEhIYT6YCtgxP1oafY2V0vpJ%2F6RgfPYJadUil86M8O3Slj3YylhKLrRxZBV5UxNEAHfKYWhH0xxsq7o5lSR0syxeVFpds%2FSBO7EXiCl7hx3qxcmCDUkFp8oQcM3Ksbf7qrP%2F0dpJ0hWlMqF2nfkvzwdgkbOwobqgVxtomb%2BnK6LW95%2BkzkQFHPrlRm%2B0zxFum5rITz9KytGp%2B%2B9VOLagqrKtaeMQVvZIc6GR%2BUeJ68o%2Fi19O5l4sjyw8wPzYCzIadx5hRfBOYwfOHkAcRKU%2Fny9NJeR5yA%3D%3D&X-Amz-Signature=8aa6e70e7075e7f901cd1cd52bcfa001af6eb6142af35a7f9521f0557fc4e0dc&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%2275421E84-EC8E-4639-B0F3-27DD40BA0D77.jpeg%22
    Elmer
        29
    Elmer  
       2019-12-02 20:33:51 +08:00
    测试:

    ![图片]( https://s3.us-west-2.amazonaws.com/secure.notion-static.com/eb98f30c-0f43-4167-950c-c1b4765aff17/75421E84-EC8E-4639-B0F3-27DD40BA0D77.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45MIVUIAWQ%2F20191202%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20191202T123031Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEMv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJIMEYCIQDeVXA1M4a%2FbdZMb%2FFqyHfVeeFz22Oho117KaEI93%2FoLAIhAL9Sy5YoB5MR8hbigtTCywIpbxFR3APhNLLkkEv4S97HKtACCBQQABoMMjc0NTY3MTQ5MzcwIgyObLJLH01LbtxahSoqrQJkHvqrCw17AbbOt2JyIXLnYvc44C6DcZ%2FsTuuQ4PsQvLqTK%2FWlj4balj%2FIiMGODbdbCzn%2B05tQptOcI6YUodvpUz6PHT4fHv3FnuZOtHFvscy6lNabHTXIERyCJB%2FLDP%2B2s2SDRKYkSNSIBNVcQ7J7B90WBC76O2UwzNYRMe01s1tmsXVol9Amsd8nYhFlzYmY0o6AUVpbZIw%2FDey2QL1BsMsLIV4Zu2cl2tgblNoejZU6m%2FJU8HD3D7wjgo2MaJiYB4%2ByQQrrqx4xKDQZRBPlvFvKk%2B6SclEt2MAO60qUI313wad%2FXerjtc93k4yNGbS7o8DMmajay1iPDWR6aHh29wvnX29q%2BHX5ZaD5Rkri7mmNy2oG%2Fu33jqd83G2kwT9VmuvCQ6b878DW%2BxadMJLik%2B8FOs4CirJIqpLGuBl8f3kt6jQc%2FRkSh8%2FIcqLWobrir0dPQ1DVB%2ButgzMWRk9vGa37qGCtlHcxTi2MDO7C2KMLShyexj07%2B4GnYmpmJWZ0Ex%2Fi9vvWVlA%2BpTnurZbilY7jpbgvdjQt5G1LDXaG4c7YTS5ao4fTB%2Bb9aiLKUSHywB9vDmi5etCU4AqfIMxTz%2FukWNrDQ2LhCjqX46BpZFNyuGNv41PEyyeErcAIhOSopqfz5Z10ciBKRClu63yPwPPO8%2BF6WhoUdz1VO8G6P1QO8EuSYPDz2v5aA1mCgBJlwzoE8JqKfOCPVFwgtIbKiJW3arR6u9NjET6CJqXXflHZdiizDKs2GLx3AY%2Fg7WHRnkqLn061hSGGgAgdthlvu66P2FftGcjmy1pb9%2FD19Fe6y8CMTjsasCR9P5ZxM5YFRTs6YLksjEkxWPqe1liASUzRvg%3D%3D&X-Amz-Signature=97cded9a67c390f5e83998f0a10ec77b4a5e15a73613203cfc25d15bfb080ec2&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%2275421E84-EC8E-4639-B0F3-27DD40BA0D77.jpeg%22)
    wangkun025
        30
    wangkun025  
       2019-12-02 20:34:16 +08:00
    @Elmer 笑尿了
    secondwtq
        31
    secondwtq  
       2019-12-02 20:34:31 +08:00
    @Elmer 楼主玩过 Maya 应该早就习惯了,这都小菜一碟 ...
    Maya 这东西看心情,一般处于一天崩八次和一个小时崩八次的叠加态
    Chrome 起码八天很难崩一次 ...
    Elmer
        32
    Elmer  
       2019-12-02 20:43:53 +08:00
    netChen
        33
    netChen  
       2019-12-02 21:04:39 +08:00
    @Elmer Thanks for the fuck javascript,你才是真正的大神,笑出翔了。
    Elmer
        34
    Elmer  
       2019-12-02 21:24:36 +08:00
    @netChen 哈哈哈,转发的,能给你带来快乐就好
    slanternsw
        35
    slanternsw  
       2019-12-03 00:49:26 +08:00
    slanternsw
        36
    slanternsw  
       2019-12-03 00:51:31 +08:00
    chenyu0532
        37
    chenyu0532  
       2019-12-03 09:43:51 +08:00
    难道练习 html css 不是做 ife 吗。。。
    话说这东西不简单啊。。。谁跟我说简单的!!!
    Nzelites
        38
    Nzelites  
       2019-12-03 09:54:47 +08:00
    react 天下第一 随便写写的话加 antd 贴贴贴就完事了 要什么自行车,想认真写再研究细节
    Jaosn
        39
    Jaosn  
       2019-12-03 10:18:12 +08:00
    @Elmer ...为什么我看不到图片,大佬换个图床
    laravel
        40
    laravel  
       2019-12-03 10:28:16 +08:00
    @Elmer

    <Error>
    <Code>ExpiredToken</Code>
    <Message>The provided token has expired.</Message>
    <Token-0>
    IQoJb3JpZ2luX2VjEMv//////////wEaCXVzLXdlc3QtMiJIMEYCIQDeVXA1M4a/bdZMb/FqyHfVeeFz22Oho117KaEI93/oLAIhAL9Sy5YoB5MR8hbigtTCywIpbxFR3APhNLLkkEv4S97HKtACCBQQABoMMjc0NTY3MTQ5MzcwIgyObLJLH01LbtxahSoqrQJkHvqrCw17AbbOt2JyIXLnYvc44C6DcZ/sTuuQ4PsQvLqTK/Wlj4balj/IiMGODbdbCzn+05tQptOcI6YUodvpUz6PHT4fHv3FnuZOtHFvscy6lNabHTXIERyCJB/LDP+2s2SDRKYkSNSIBNVcQ7J7B90WBC76O2UwzNYRMe01s1tmsXVol9Amsd8nYhFlzYmY0o6AUVpbZIw/Dey2QL1BsMsLIV4Zu2cl2tgblNoejZU6m/JU8HD3D7wjgo2MaJiYB4+yQQrrqx4xKDQZRBPlvFvKk+6SclEt2MAO60qUI313wad/Xerjtc93k4yNGbS7o8DMmajay1iPDWR6aHh29wvnX29q+HX5ZaD5Rkri7mmNy2oG/u33jqd83G2kwT9VmuvCQ6b878DW+xadMJLik+8FOs4CirJIqpLGuBl8f3kt6jQc/RkSh8/IcqLWobrir0dPQ1DVB+utgzMWRk9vGa37qGCtlHcxTi2MDO7C2KMLShyexj07+4GnYmpmJWZ0Ex/i9vvWVlA+pTnurZbilY7jpbgvdjQt5G1LDXaG4c7YTS5ao4fTB+b9aiLKUSHywB9vDmi5etCU4AqfIMxTz/ukWNrDQ2LhCjqX46BpZFNyuGNv41PEyyeErcAIhOSopqfz5Z10ciBKRClu63yPwPPO8+F6WhoUdz1VO8G6P1QO8EuSYPDz2v5aA1mCgBJlwzoE8JqKfOCPVFwgtIbKiJW3arR6u9NjET6CJqXXflHZdiizDKs2GLx3AY/g7WHRnkqLn061hSGGgAgdthlvu66P2FftGcjmy1pb9/D19Fe6y8CMTjsasCR9P5ZxM5YFRTs6YLksjEkxWPqe1liASUzRvg==
    </Token-0>
    <RequestId>6BC66C36C5AD1F05</RequestId>
    <HostId>
    L8NBmd/CchtzOUwFstxnEsUyaRZl8TtA7QSWW6LF0ttzQcctVS4shglFjguFsBtpMb8uJ7ksrP0=
    </HostId>
    </Error>
    zaul
        41
    zaul  
       2019-12-03 11:14:01 +08:00
    css 和 css3,重点 flex,js,html5,然后把 Vue 吃透就行了,记住是吃透
    Elmer
        42
    Elmer  
       2019-12-04 18:26:33 +08:00
    @Jaosn
    @laravel 谢谢提醒,之前想用 Notion 做图床,现在发现不行,图片请求有过期时间

    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2302 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 16:02 · PVG 00:02 · LAX 08:02 · JFK 11:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.