許多人會認為前端技術語言就是 HTML/CSS/Javascript ，沒錯瀏覽器能認得的語言就是 HTML/CSS/Javascript ，不過前端工作為了縮短工作流程，又產生了許多工具以及預處理語言來處理許多重複的東西縮短工作流程。
HTML 是屬於標記語言（Markup Language），擁有許多標籤與屬性，為了加速撰寫，有 Haml, Slim, Jade 語言，這幾種語言都可以讓你寫得更少寫得更快。
HTML
<html lang="en">
<meta charset="UTF-8">
<title>Document</title>
Slim
html lang="en"
head
meta charset="UTF-8"
title Document
body
由此可以發現，Slim 語言利用強制縮排的語法，讓 HTML 的結尾標籤都取消了。在撰寫 HTML 時常常會用到 id 與 class ，在 Slim 語言中也會簡化成 #idName 與 .className。
CSS 是負責樣式的部分，隨著 CSS3 的出現，CSS 能做到的事情非常多，動畫、形狀、漸層、背景等等...。也因為這樣一個網站很容易有上千行的 CSS 樣式，變得難以管理，因此產生了 Sass 語言來方便樣式的管理。
CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
SCSS
$font-stack: Helvetica, sans-serif;$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
通常我們學習 Sass 會從 SCSS 開始撰寫，因為語法部分跟 CSS 是一模一樣的，但是有能使用變數、巢狀等 Sass 的特有功能。
因為 HTML5 還沒有正式定案，所以在轉寫 CSS3 效果時，會需要依照不同瀏覽器撰寫不同的前綴，就會發生一個功能，要寫四倍的程式碼才能做好。Compass 是利用 Sass 裡面的 mixin 功能來幫你把 CSS3 常用的瀏覽器都寫好，讓你可以快速的撰寫，例如：
Compass
#box-shadow-custom {
@include box-shadow(red 2px 2px 10px);
}
CSS
#box-shadow-custom {
-moz-box-shadow: red 2px 2px 10px;
-webkit-box-shadow: red 2px 2px 10px;
box-shadow: red 2px 2px 10px;
}
Compass 還有非常多的功能，都是可以大量幫助前端開發時縮短工作流程的好功能。
初學者在學習 Javascript 時，我會建議從 jQuery 開始，因為 Javascript 是屬於規範 ECMAScript 的一種，在使用上可能會因為各個瀏覽器而有不同的寫法。如果是從 jQuery 開始寫就可以避免掉跨瀏覽器的問題，同時語法也會比較簡潔，這也是 jQuery 的精神 Whrite Less, Do More.
因為現在網頁越來越應用程式化，使用上要像應用程式一樣複雜與順暢，也是 AJAX 技術被提出後，網頁也可以實現這樣的體驗。所以大部分與伺服器資料的交換都會透過 AJAX ，網站的邏輯，則是依靠在 Client 端的 Javascript 來執行，因此前端開發上就需要使用 MVC 框架來讓如此大型複雜的網站可以方便維護開發。現在較多人使用的框架有：
其中又以 Google 維護開發的 AngularJS 是社群上最多人討論與使用的，最近由 Facebook 開發的 ReactJS 也是廣泛地受到社群的討論。
除了前端 MVC 之外，Javascript 也有預處理語言例如： CoffeeScript, LiveScript ，前端開發有非常多的東西可以學習討論，這裡提供給大家一些趨勢與資訊，可以作為自己學習與工作的判斷。
iThome鐵人賽
看影片追技術