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

教练,我想学 web 前端。

  •  
  •   mushokumunou · 10 天前 · 4095 次点击

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

    个人暂时在学 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
        1
    DamienS   10 天前
    可以学 react
        2
    DamienS   10 天前
    java 为主,可以学学 go。api 一般 reset 也可以看看 graphql,我感觉 graphql 好用很多( apollo 吧,relay 有点麻烦)

    一般用 vscode 就可以写 web

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

    CSS 和 HTML 么...CSS 就是搭积木,HTML 就先用 DIV 一把梭完事儿。
        14
    wqzjk393   10 天前   ♥ 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 结构更加简介清晰,但是实际的前端逻辑还是那一套
        15
    Owenhe   10 天前
    需要每天规划好时间,我都没能一直坚持学,时间不太够用,要学的太多了。
        16
    wangyzj   9 天前
    html5+css+js
    试试 jq
    然后上 vue 或者 react
    后端语言也可以直接上 node
    这就达成一整个大礼包成就了
        17
    will1234   9 天前
    驰狼课堂 有免费的前端教程 还不错。
        18
    zppass   9 天前
    教练:你啥都想学,上回那个学的咋样了?
        19
    JerryCha   9 天前
        20
    root8080   9 天前
    零基础的话 还是网上找个好点的教程 花点钱也值得 有好的老师梳理和传授一些经验 比自己看书硬啃高效很多 当然只是入门 后期还是要靠自己
        21
    learnshare   9 天前
    设计转前端,核心是 CSS 及组件化( jQuery/React/Vue/Angular )
        22
    luoway   9 天前
    web 前端的话:
    小公司 php
    大公司 Nodejs,初级开发者了解 express 源码足以
    git 必知必会,最好所有项目都放 github 上,再攒点 star
    docker、linux 会也不要在简历上说,否则即使有幸进去了,做的可能就不是 web 前端了

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

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

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

    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
        29
    Elmer   9 天前
    测试:

    ![图片]( 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)
        30
    wangkun025   9 天前
    @Elmer 笑尿了
        31
    secondwtq   9 天前
    @Elmer 楼主玩过 Maya 应该早就习惯了,这都小菜一碟 ...
    Maya 这东西看心情,一般处于一天崩八次和一个小时崩八次的叠加态
    Chrome 起码八天很难崩一次 ...
        32
    Elmer   9 天前
        33
    netChen   9 天前
    @Elmer Thanks for the fuck javascript,你才是真正的大神,笑出翔了。
        34
    Elmer   9 天前
    @netChen 哈哈哈,转发的,能给你带来快乐就好
        35
    slanternsw   9 天前
        36
    slanternsw   9 天前
        37
    chenyu0532   9 天前
    难道练习 html css 不是做 ife 吗。。。
    话说这东西不简单啊。。。谁跟我说简单的!!!
        38
    Nzelites   9 天前
    react 天下第一 随便写写的话加 antd 贴贴贴就完事了 要什么自行车,想认真写再研究细节
        39
    Jaosn   9 天前
    @Elmer ...为什么我看不到图片,大佬换个图床
        40
    laravel   9 天前
    @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>
        41
    zaul   9 天前
    css 和 css3,重点 flex,js,html5,然后把 Vue 吃透就行了,记住是吃透
        42
    Elmer   7 天前
    @Jaosn
    @laravel 谢谢提醒,之前想用 Notion 做图床,现在发现不行,图片请求有过期时间

    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3497 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 25ms · UTC 05:22 · PVG 13:22 · LAX 21:22 · JFK 00:22
    ♥ Do have faith in what you're doing.