Couresra课程《HTML, CSS, and Javascript for Web Developers》学习小结

虽然我是后端开发,但工作中也接触过一些前端开发技术, 也看过一两本前端书籍,但是总感觉知识点很零散,缺少实践, 写起代码来效率比较低下,需要频繁地查文档。

于是,决定在Coursera上找个在线课程,结合书籍进行学习, 最终选择了 《HTML, CSS, and Javascript for Web Developers》 这门课程。

此课程是全栈系列课程中的一部分,仅关注前端技术,分别介绍了HTML5、CSS和JavaScript, 每节课基本都写代码讲解,通俗易懂,是一门很不错的前端入门课程。 同时每周还有写代码的作业和同学互评,以检验是否掌握了相关知识,比较实用。

整个课程学习下来,我感觉有些收获,比之前更入门了点:)

HTML5

  • 元素类型

    在HTML5以前,最常用的两种元素类型是inline和block-level,典型的代表是span和div。 HTML5与之对应的两种类型可以粗略地认为是:phrasing content和flow content。

  • 语义元素

    常见的有header footer nav h1...h6 section article aside等, 从布局角度看,这些元素都可以用div、span替代,效果是一样的; 但是这些标签有其语义,使代码更易懂、更易维护,也有助于SEO。

  • 列表元素

    <li>列表项中包含<ol><ul>用于表示子列表

    列表常用于构造网站的导航栏。

  • character entity reference

    常见的有&lt; &gt; &amp; &copy; &quot; &nbsp;, 其中&nbsp;的作用是告知浏览器此处不能换行,其含义是non-break space。 这个经常被误用为往左右两边添加空白,我以前也这少干:(正确的做法是使用padding。

  • 其他

    <a>元素在HTML5中既可以是inline,也可以是block-level,取决于包含的内容, 后者可以方便地用于构造大块的可点击链接区域。 <a>还可以指定手机号码:<a href="tel:15012345678"></a>,提高了手机端的用户体验。

    <img>图片标签最好都指定宽度和高度,这样当图片无法加载时元素所占宽高仍然不变,整个网页的布局就不会乱掉。

CSS

  • specificity

    当有多个selector指定了同一个property时,需要有机制决定最终该采用哪一个。 浏览器通过计算不同selector的specificity来决定,大者胜出。

    specificity可以根据selector表达式粗略地计算为一个四位数:

    若内联样式则为1,ID个数,类个数,元素个数
    

    据此可以计算出以下property的specificity为0102

    h1 h2#foo {
        background-color: black;
    }
    

    详细介绍请看Specifics on CSS Specificity | CSS-Tricks

    另外在值后面添加!important会使得浏览器忽略specificity,最后一个指定了!important的property胜出。 但此实践会导致代码难维护,应尽量避免。

  • font-size

    值有多种表示方法,其中有一种是百分比的,比如120%, 基准是浏览器的默认字体大小,通常是16px。

    还有一种单位是em,也是相对单位,1em表示当前上下文中字母m的宽度, 比如1.2em表示放大20%。

    整个文档都尽量用相对单位,这样即使用户缩放页面也不会导致页面布局乱套。

  • box-sizing property

    默认值为content-box,CSS3新增了border-box,省去了很多content box,padding,border的计算工作。

    此property不能继承,若需要对所有元素指定,可以通过:

    * {
        box-sizing: border-box;
    }
    
  • vertical margin collapse

    竖直方向margin会折叠,最终为较大的margin值。 例如有上下两个div,margin值分别为10px和20px,那么上下两个div的border间距离为20px,而不是30px。

    而水平方向margin不会折叠,若两个div左右并排,则上例margin值的情况下两者border间距为30px。

    但是,float元素竖直方向的margin不会折叠。

  • overflow

    overflow property指定当框中的内容超出指定的宽高时如何处理, auto表示超出时显示滚动框,未超出时不显示滚动框。

  • float & clear

    设置了float的元素会被从正常流摘除,浮动到左边或者右边。

    clear用于指定当前元素的左和或右边不能有float元素。

  • element positioning

    一种方法是使用float进行浮动;

    另一种方法可以通过poition property指定,常用的有:

    • static

      默认值,所有HTML元素除了<html>是relative外,其他元素默认都是static。

    • relative

      相对其自己原来的位置进行偏移,保留其在正常流中的位置。

    • absolute

      相对某个position property为非static的祖先元素进行偏移, 而不是相对于屏幕进行绝对定位。元素会被从正常流中移除。

    • fixed

      相对viewport进行偏移,当页面滚动时对应元素固定不动。 元素会被从正常流中移除。

    有四个offset property,分别是top right bottom left,可以理解为from top/right/bottom/left, 比如top: 20px表示从上往下偏移20px。

  • Responsive design

    基于media query实现,最常见的media query是基于宽度的,如下所示:

    @media (min-width: 768px) and (max-width: 991px) {
        body {
            background-color: white;
        }
    }
    
    @media (max-width: 767px), (min-width: 992px) { /* 逗号表示或 */
        body {
            background-color: black;
        }
    }
    

    只要所有media query条件的宽度范围没有交集,那么在特定设备上就只有其中一个会生效, 因为设备的宽度是固定的;同时不同宽度的设备效果又可以不同的,从而实现了响应式设计。

    响应式网站的HTML页面记得添加<meta name="viewport" content="width=device-width, initial-scale=1">, 告知浏览器不要进行缩放。 详细内容可以看Responsive Meta Tag | CSS-Tricks

    有一句话很贴切地形容了响应式设计:Content is like Water

  • Bootstrap

    .container-fluid.container的差别是容器是全宽度的,内容会占满整个屏幕, 而后者因为宽度是固定px,所以一般左右两边会有margin。

    bootstrap的grid system有12列,通过float实现的,每个grid指定宽度为container的百分比。

    bootstrap可以为元素同时指定lg md sm xs等class,media query保证了这些class相互独立。

JavaScript

  • IIFE

    IIFE 是Immediately Invoked Function Express的缩写,用于表示(定义后)立即调用的(匿名)函数表达式。 是一种常见的JavaScript编程实践,一个显而易见的好处是避免污染全局命名空间,举个例子:

    (function(name) {
        console.log("hello " + name + "!");
     })("whatacold")
    
  • Primitives are passed by value, objects are passed by reference.

拜访客户

最接地气的是课程中还有实地拜访客户,并给了一些建议:

  • Most clients have NO IDEA what they want.

  • Find a way for the client to INVEST in the project.

    比如给产品相片付费,这样客户因为付出了代价,会更加重视。

  • Have client designate ONE person responsible for decision.

    一个接口人可以减少沟通成本,决策明确。

  • Limit number of revisions UPFRONT.

    限制改版次数可以控制工作量不失控,同时“逼迫”客户每次谨慎地提出改版意见。

  • Google for 'web development client questionnaire'

其他

除此之外,还从这个课程了解到了一些很实用的工具:

  1. Browsersync

    当监控的html/css/js等静态文件变更时浏览器会自动刷新页面,省去了开发过程中不断手动刷新的无聊操作。

  2. placeholder.it

    开发初期可以通过此网站嵌入任意长宽的图片,以占位先完成页面的整体布局。

最后,Coursera视频有时候会比较卡,可以尝试用非运营商的DNS服务器, 和使用Firefox观看,我感觉会相对流畅一些,虽然不知道是什么原因,不保证一定有效。

另外推荐一个下载课程的工具coursera-dl, 支持断点续传,可以下载视频和课程资料,支持通过pip安装。 我一般用以下几个参数:

$ coursera-dl -sl en --resume -u <username> -p <password> --path </path/to/download_dir>

social