入門前端開發學習-寫在開始之前


Web 前端開發完全入門



前端開發是建立以網頁為基礎的應用程式過程,以HTML標籤定義網頁內容,利用JavaScript撰寫邏輯程式碼開發網頁功能,包含使用者互動回應與資料處理,再藉由CSS的樣式套用,完成視覺介面的呈現。

過去網路應用並不發達,網頁介面支援簡單的互動功能即可滿足需求,網頁設計人員甚至不需要精通HTML與CSS,透過工具即能建立可用的網頁,而真正的程式化部份,則由後端開發人員進行實作整合。

隨著雲端環境的成熟與行動裝置的普及,網路應用出現爆炸性的成長,簡單的網頁介面已經沒有辦法滿足市場的需求,大量的程式化功能被導入網頁的開發中,而原來的設計人員與程式開發人員為了適應時代趨勢,都必須進一步的瞭解、甚至具備真正的前端開發技術能力,要達到這個目的,在學習上,我們將其分成兩個領域-「網頁設計」「程式開發」,涵蓋的技術項目,則是上述提及的 HTML、CSS 以及 JavaScript,以下來談談其中的概念。

  • 網頁設計
網頁設計師透過 HTML 與 CSS 建立網頁,過去這一部份通常藉由工具的輔助(例如 Dreamweaver)來完成,然大部份網頁設計師並不熟悉、甚至沒有能力撰寫 JavaScript 程式。

在這個前端開發盛行的時代,網頁設計師如果想要進一步具備前端開發人員的技能,必須考慮改變依賴工具的習慣,徹底瞭解各種 HTML 標籤與 CSS 樣式的意義與用法,徒手編寫網頁內容的能力愈來愈重要,藉助 Sublime 之類的文字編輯器或是 CodePen JSFIDDLE 等線上編輯工具,可以快速增進撰寫網頁內容的能力,當然,如果要跟著我們的教學逐步學習,建議直接採用 Visual Studio

HTML 與 CSS 僅能完成網頁內容與視覺化介面的定義,JavaScript 讓網頁有了生命,而這是一般的網頁設計師必須面對的最大障礙,一旦學會撰寫 JavaScript ,便能大幅提升個人職場價值。
  • 程式開發
開發人員擅於撰寫程式碼,學習 JavaScript 並不會有太大的問題,當然,各種API需要一些時間熟悉,至於 HTML 與 CSS 則是不小的挑戰,簡單的如標籤與樣式的意義,需要設計背景、甚至一些藝術天賦的視覺呈現技巧,例如版面的切割、色彩的配置以及圖片處理等等,對一名前端工程師而言,瞭解基本的設計原理並熟悉各種 HTML標籤以及樣式設計都是需要的。

除了HTML/CSS/JavaScript 這些技術本身,更重要的,開發人員習慣了PHP、ASP.NET或是JSP等伺服器端的開發模式,將伺服器端產生網頁內容的寫法視為理所當然,但在前端功能日益複雜的現代網路環境,愈來愈多的應用必須依賴大量的前端技術進行實作,再透過背景與伺服器環境進行溝通,因此精進 JavaScript 是開發人員最重要且必需的課題之一。

想要踏入這個領域的初學者須從最基礎的HTML標籤開始,瞭解網頁的基礎架構,再逐步熟悉 JavaScript 與 CSS ,而其中 HTML 與 CSS 合併學習會有比較好的效果,JavaScript則建議先獨立出來,將學習的過程單純化,從 Console 開始建立基礎的語法撰寫能力。

HTML 與 JavaScript 其實是相當古老的技術,HTML5 是 HTML 的最新版本,距離前一個版本 HTML 4.01 已超過了十年。CSS 目前主要的最新版本則是 CSS3。以下列舉HTML、CSS 與JavaScript 三項關鍵技術的入門學習要項。

HTML

HTML 是各種不同名稱的標籤,用來定義網頁,這是進入前端開發第一個必須瞭解的技術,HTML 標籤數量相當龐大,逐一學習各種標籤除了沒有效率之外且過程通常令人難以忍受,建議先對其進行分類,然後針對馬上會用到的標籤進行瞭解。

  • 內容配置
  • <html>/<head>/<title>/<meta>/<body> 等基本網頁架構標籤
  • <div>/<span>/<p>
  • 其它
  • <a>
  • <img>/<audio>/<video>
  • 輸入控制 <input> 
  • 清單與表格
  • <table>/<tr>/<td>/<th>
  • <ul>/<li>
表列者是比較常用且進入網頁編輯最常用到的幾個標籤,因此必須儘速理解,而當你學會這些標籤的用法,便能定義網頁內容,但僅止於定義,要讓網頁可以公開見人,接下來就必須套用 CSS 。

CSS

CSS 是一種樣式語法,除了語法格式之外,初學者理解各種樣式項目的用法(例如 width 表示寬度等等)才能將其應用在網頁的設計上面,但CSS樣式項目數量龐大,且應用複雜,先針對幾個常用的項目入門會比較好。
  • 方塊與位置配置
  • margin/padding/border
  • position/float/clear
  • overflow
  • 大小與配色
  • width/height
  • color
  • background
  • 清單與表格
  • 結合各種樣式項目的 <ul>與 <table>特定樣式設計
  • 字型與文字
  • font/font-family/font-size/font-weight/font-style/font-variant
  • h1~h6
經過多年的發展,現代網頁已不再是單純的靜態文件,反而進化成應用程式與使用者溝通最重要的媒介,以靜態文件的觀點進行網頁製作已顯得相當不合理,從HTML標籤、CSS樣式開始,徹底瞭解並學習網頁結構是成為入門前端最重要的事,具備了上述的概念,最後下圖列舉學習過程中建議瞭解的幾個階段。

其中最後一項結構化的CSS設計,也可以在具備基本的HTML與CSS能力之後直接導入,這有助於一開始建立結構化開發的概念,對於技術能力的提升擴展相當有用。

JavaScript 

前端唯一支援的程式語言只有JavaScript,以下的架構圖說明JavaScript內容以及入門重點,與一般程式語言的學習相同,JavaScript 必須從基本語法開始,以 console.log 模式輸出體驗並理解各種語法元素與程式流程,比較特殊的是物件資料的表示與函式的應用,當然最重要的還有支援各種功能的 API 。



熟悉 JavaScript 語言特性,並逐步理解各種 API ,才能有效的將 JavaScript 運用在各種網路應用的開發上面。

Web 前端開發完全入門


沒有留言: