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

[思客教学公开课] - 从 0 到 1 实现响应式个人网站

  •  4
     
  •   hayeah · 2015-05-11 10:51:34 +08:00 · 9828 次点击
    这是一个创建于 3471 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这是一个免费公开课,报名请发邮件到 [email protected]


    对于很多不擅长前端的程序员来说,写 CSS 是一件很痛苦的事情。虽然你了解了 CSS 的基本原理,真的去实现一个设计却发现其实不是那么简单,毕竟还是 too young。

    CSS 有很多坑。同样的属性在不同的环境,或者使用在不同的元素上,都有可能产生完全不同的效果。 明明设定了间隔,为什么在某些情况却不生效?为什么 float 把我的布局打乱了?为什么 text-align: center 不能居中某个元素?

    很多时候写 CSS 感觉像是在碰运气。浏览器渲染出来不是你要的效果,也不知道为什么,就只能瞎调属性。姿势就对了,浏览器就会给我们正确的效果。

    前端大牛工作的方法不一样。他们不在个别属性的层面思考。看到一个需求,他们能直接匹配一个适用的 “CSS Design Pattern”。用设计模式,他们能更快的实现一个页面,减少浪费在调试的时间。

    在这个 CSS 课程,我们要实现一个响应式个人网站:

    该页面可以在此访问: http://profile-sample.strikingly.com/

    这个课程和其他教程不一样,我们不提供可以工作的代码。我们会按需求介绍 “CSS 设计模式” 给你认识,而你必须自己去尝试把这些概念应用在一个真正的页面上。请你打开你忠实的编辑器,边看边做!

    本次教学活动由 思客教学Strikingly 联合举办。Strikingly 是第一个 YCombinator 学成回国的创业公司。世界很大,可以 去 Strikingly 看看!

    我们对你的要求:

    • 了解 HTML 和 CSS 基础
    • 能阅读英文文档

    这是一个免费公开课。

    想学前端的小伙伴, 请发邮件报名: [email protected]

    邮件里请你简单地说一下自己前端的经验。

    最后,我们在准备一个前端课程,你会想学什么呢?在帖子里说说~

    第 1 条附言  ·  2015-05-12 11:33:27 +08:00
    谢谢大家的支持~ 现在报名的人数有点多,我们没把握照顾好各位。所以我们计划分成两个梯次来邀请大家,来保证教学质量。

    第一梯次邀请:明天发邀请(05/13/2015)
    第二梯次邀请:下周五发邀请 (05/20/2015)

    第二梯次持续接受报名 :)
    77 条回复    2016-06-14 08:30:35 +08:00
    init
        1
    init  
       2015-05-11 11:03:52 +08:00
    常年后端c++ 能不能学啊。。。。
    franklight
        2
    franklight  
       2015-05-11 11:08:22 +08:00
    挺好,开始了以后参加
    hayeah
        3
    hayeah  
    OP
       2015-05-11 11:11:36 +08:00
    @init 可以啊~ 了解 HTML/CSS 基本语法就可以了。概念上还是挺简单的,主要还是应用比较困难
    ericls
        4
    ericls  
       2015-05-11 11:13:38 +08:00
    你们的工作地点是国内还是国外啊?
    hayeah
        5
    hayeah  
    OP
       2015-05-11 11:14:18 +08:00
    @franklight 发一下邮件报名呗~
    hayeah
        6
    hayeah  
    OP
       2015-05-11 11:15:06 +08:00
    @ericls 我们是远程团队。武汉,大理,绵阳。
    ipconfiger
        7
    ipconfiger  
       2015-05-11 11:15:34 +08:00
    不错,学一学来把自己的blog修缮修缮
    hayeah
        8
    hayeah  
    OP
       2015-05-11 11:21:01 +08:00
    @ipconfiger 拉上贵厂的前端渣~ 哈哈哈
    zonghua
        9
    zonghua  
       2015-05-11 11:21:36 +08:00 via iPhone
    还是bootstrap算了,没精力去做前端
    WildCat
        10
    WildCat  
       2015-05-11 11:36:33 +08:00 via iPhone
    已经申请~
    dfguo
        11
    dfguo  
       2015-05-11 11:46:57 +08:00   ❤️ 1
    Hello,我是 Strikingly 的 CTO,也是团队前端的负责人。课程安排我们也 review 过。这个课程可以教你响应式网页的前端思维和框架。做得比较系统化,非常值得一学。
    mopig
        12
    mopig  
       2015-05-11 11:52:42 +08:00
    已发邮件...
    sennes
        13
    sennes  
       2015-05-11 11:58:32 +08:00
    已报名
    其实我们团队想设计个网站用于展示成果的。
    可是团队都是搞软硬件的,只有我有一点点的前端基础。
    我想的是做一个只有一个页面的、简洁一点的网站。
    shoto
        14
    shoto  
       2015-05-11 11:59:59 +08:00
    已报名。
    虽然能写简单的静态页面,但是对于CSS更深层次理解还是不行。
    terax
        15
    terax  
       2015-05-11 12:07:11 +08:00 via iPhone
    已报名~
    loddit
        16
    loddit  
       2015-05-11 12:13:02 +08:00   ❤️ 1
    howard 已经做过好几期教学活动啦,居然每次都是不同的领域
    littlewey
        17
    littlewey  
       2015-05-11 12:21:46 +08:00
    已报名
    VincentZhou
        18
    VincentZhou  
       2015-05-11 12:23:28 +08:00
    已报名
    Honwhy
        19
    Honwhy  
       2015-05-11 12:33:46 +08:00
    支持,我想跟读你们提出来的相关链接,related links。
    hakulamatata
        20
    hakulamatata  
       2015-05-11 12:39:55 +08:00
    光讲前端的话太枯燥了,至少有点功能吧。比如配合表单提交啥的。。。
    zjgsamuel
        21
    zjgsamuel  
       2015-05-11 12:46:13 +08:00
    已报名 +1
    baozijun
        22
    baozijun  
       2015-05-11 12:47:30 +08:00
    已报名 ,谢谢!
    iLtc
        23
    iLtc  
       2015-05-11 12:47:30 +08:00
    过来支持一下我们老大,这个课程的第一期我试做了一下,很好玩的~
    KoleHank
        24
    KoleHank  
       2015-05-11 12:50:55 +08:00
    已报名,准备去学习一下看看。
    v2014
        25
    v2014  
       2015-05-11 12:50:55 +08:00
    已报名
    我写的页面总是那么土,希望能去去土
    renzhe
        26
    renzhe  
       2015-05-11 13:00:03 +08:00
    已报名,虽然会写HTML+CSS,但是不美观,想学习一下怎么设计出美观的网页
    wosuopu
        27
    wosuopu  
       2015-05-11 13:06:59 +08:00
    已报名
    funky
        28
    funky  
       2015-05-11 13:16:53 +08:00
    已报名,做web的对前端这块很弱,希望能提高下
    ljcarsenal
        29
    ljcarsenal  
       2015-05-11 13:27:35 +08:00
    已报名
    Dongdong36
        30
    Dongdong36  
       2015-05-11 13:29:47 +08:00
    请问是怎样的学习方式
    Anybfans
        31
    Anybfans  
       2015-05-11 13:33:44 +08:00
    学习方式呢?视频?还是?
    stgzr
        32
    stgzr  
       2015-05-11 13:34:42 +08:00
    土问在时间上怎么安排?一点前端知识都没有可以尝试吗>.<
    charliestras
        33
    charliestras  
       2015-05-11 13:38:20 +08:00
    已报名,比较好奇课程会以怎样的方式进行
    cloudbeyond
        34
    cloudbeyond  
       2015-05-11 13:48:01 +08:00
    已报名~很期待分享呀~
    penjianfeng
        35
    penjianfeng  
       2015-05-11 13:49:59 +08:00
    已报名,同好奇课程时间以及方式
    pythonee
        36
    pythonee  
       2015-05-11 14:05:39 +08:00
    后端程序员的福利哈
    ywm8812
        37
    ywm8812  
       2015-05-11 15:46:17 +08:00
    已报名~
    fashioncj
        38
    fashioncj  
       2015-05-11 16:31:28 +08:00
    报名~
    cvmax
        39
    cvmax  
       2015-05-11 17:11:38 +08:00
    bootstrap可破
    zld
        40
    zld  
       2015-05-11 18:00:50 +08:00
    老大我又来报名啦:D
    ghosrt
        41
    ghosrt  
       2015-05-11 18:16:30 +08:00
    已发邮件报名。
    young7657
        42
    young7657  
       2015-05-11 19:38:11 +08:00
    已经报名
    hayeah
        43
    hayeah  
    OP
       2015-05-11 20:14:22 +08:00
    @Anybfans 没有视频。自己动手操作
    hayeah
        44
    hayeah  
    OP
       2015-05-11 20:14:50 +08:00
    @zld 欢迎回来 :)
    WildCat
        45
    WildCat  
       2015-05-11 20:25:37 +08:00
    @hayeah 这个课程多久开始呀?持续几期(几周)?

    关于前端,自己的一点想法(非常不专业):
    1. 尽量不要教 Angular
    2. React 挺新,不知道合适不合适,如果能选择其他的框架也很欢迎,比如 Ember/Backbone
    3. gulp/grunt 的花式玩法是否可以涉及一些?
    4. 一些通用库对于自己 App 的封装思路是否可以介绍下? 比如 superagent ,怎么为自己 App 封装一下比较合适?
    5. 如果能涉及把 Origami 的原型转换为 JavaScript 动画就更赞了(主要期待 Sketch 课程的原型设计能填满坑。。。)
    hayeah
        46
    hayeah  
    OP
       2015-05-11 20:30:00 +08:00
    @WildCat 这个只是一个试验课程而已,看看前端要以什么形式来教。

    1. 我个人看好 React,看衰 Angular。
    1. 我超讨厌 gulp & grunt, 完全不可忍。用 make 或者 webpack 吧 =。=
    1. 用 make 的话用 browserify 封装。要不然用 webpack
    1. Origami 还可以转 JS!!!!! 真的假的
    zixincao
        47
    zixincao  
       2015-05-11 20:31:20 +08:00
    报名了!
    chendeshen
        48
    chendeshen  
       2015-05-11 20:48:05 +08:00
    已报名
    chendeshen
        49
    chendeshen  
       2015-05-11 20:49:57 +08:00
    已报名~!!!
    WildCat
        50
    WildCat  
       2015-05-11 21:40:34 +08:00
    @hayeah
    1. React 只是 view 啊, 其他层最好有大牛指导下~
    1. 好吧,只用过 gulp, webpack, grunt
    1. 额
    1. 嗯嗯,的确可以,不过只是看了看转换后的代码没有实现过。
    dragonszy
        51
    dragonszy  
       2015-05-11 21:48:33 +08:00
    已报名!
    wuyazi
        52
    wuyazi  
       2015-05-11 21:59:36 +08:00
    已报名
    shuiniushushu
        53
    shuiniushushu  
       2015-05-11 22:06:13 +08:00
    我以前是做后端服务器,工作中常常接触前端,慢慢就喜欢上前端了。今年找了一份前端全职工作,算是半路出家了,我想看看牛人是怎么做前端的,好好学习一翻
    GeekGao
        54
    GeekGao  
       2015-05-11 22:11:03 +08:00   ❤️ 1
    Sketch 那次课程参加了,现在可以轻松做UI原型啦,非常赞!
    Phoinikas
        55
    Phoinikas  
       2015-05-11 22:17:32 +08:00
    课程设置是怎样的呢?什么时间什么方式得介绍下吧。。。
    timothyye
        56
    timothyye  
       2015-05-11 22:19:34 +08:00
    赞一个,已发邮件报名
    BenX
        57
    BenX  
       2015-05-11 22:24:04 +08:00
    发mail报名
    mingyun
        58
    mingyun  
       2015-05-11 23:11:00 +08:00
    报名
    ywm8812
        59
    ywm8812  
       2015-05-11 23:33:29 +08:00
    已发mail报名~
    ob
        60
    ob  
       2015-05-11 23:41:42 +08:00 via Android
    关注了
    little_cup
        61
    little_cup  
       2015-05-12 00:05:30 +08:00
    已报名~再次支持~
    mianju
        62
    mianju  
       2015-05-12 00:15:56 +08:00
    作为前端才入门的人已报名> <
    freezhan
        63
    freezhan  
       2015-05-12 01:01:09 +08:00
    前后端蒟蒻已报名~
    hayeah
        64
    hayeah  
    OP
       2015-05-12 09:26:07 +08:00
    @Phoinikas 周五开始吧~ 形式比较特别,不太好解释。反正不看视频
    lj6684
        65
    lj6684  
       2015-05-12 10:31:55 +08:00
    已报名+1
    robinshi2010
        66
    robinshi2010  
       2015-05-12 11:15:55 +08:00
    支持!!!!已报名!
    hayeah
        67
    hayeah  
    OP
       2015-05-12 11:33:46 +08:00
    谢谢大家的支持~ 现在报名的人数有点多,我们没把握照顾好各位。所以我们计划分成两个梯次来邀请大家,来保证教学质量。

    第一梯次邀请:明天发邀请(05/13/2015)
    第二梯次邀请:下周五发邀请 (05/20/2015)

    第二梯次持续接受报名 :)
    PeteHenry
        68
    PeteHenry  
       2015-05-12 13:32:29 +08:00
    赞,一直没系统的学过前端,以发邮件报名
    jacob
        69
    jacob  
       2015-05-12 13:51:41 +08:00
    我没看懂这个课程的形式是什么,是不是就是在线视频的形式(mooc,公开课),如果是这样的话,为什么需要报名呢,是想统计下有多少人有兴趣吗?
    peterwtu
        70
    peterwtu  
       2015-05-12 14:24:18 +08:00
    一直对前端很感兴趣,这次找到福音了,已报名
    XiangNan
        71
    XiangNan  
       2015-05-12 14:52:14 +08:00
    已报名
    hayeah
        72
    hayeah  
    OP
       2015-05-12 14:55:44 +08:00
    @jacob 不是在线视频。我们需要控制人数。。。
    too
        73
    too  
       2015-05-12 22:49:19 +08:00
    对课程很有兴趣,已发邮件报名。

    前端的话,我比较想学的就是如何将 UI 设计变成 HTML + CSS,比如Sketch做好的界面,如何高效的转化成真正的 HTML 页面代码。呃,这个比较偏向 UI 设计吧。
    vose
        74
    vose  
       2015-05-13 23:21:31 +08:00
    已报名~
    iambic
        75
    iambic  
       2015-05-14 00:16:12 +08:00
    赞 已报名
    smithtel
        76
    smithtel  
       2015-06-02 18:15:26 +08:00
    第二期报名已结束?
    sunsh1ne
        77
    sunsh1ne  
       2016-06-14 08:30:35 +08:00
    报名已经结束?不管,先举手报名呐(厚颜无耻脸)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2743 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 09:25 · PVG 17:25 · LAX 01:25 · JFK 04:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.