iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
5

村長 : 請輸入您的島的名稱...
: ...「前端學到暈島」
/images/emoticon/emoticon09.gif

各位當你踏上這個島你就要注意到幾件事情~

  1. 前端是一個肥大的東西,當你想要學一個工具~你就要繼續學很多東西
  2. 前端通常是比較低薪的工作~ 因為他比較好入門嗚嗚 (看看這次各個組別報名數哈哈)
  3. 但是卻是每個資工人必備的生活技能~走投無路時至少還可以接接小專案賺點泡麵錢...
  4. 不要只想著只學前端!! 這個系列雖然會教你很多工具讓你巧妙避開後端~但是該學的後端跟database還是要學

島上公約 (如何閱讀本系列文):

這是一座前端小島~ 島民是你、我、還要各位前端技術們 (之後會請他們自己出來介紹),一定要跟島民們相處融洽喔呵呵

先跟各位說這是一個真正從無到有的系列,前端一路走來發現缺少一些前端開發技術的中文資源,希望能藉由這個平台讓你我一起為中文社群盡一份心力!!

  1. 這個系列文會涵蓋一個小專案,教各位如何使用一些前端常用的工具來製作
  2. 一開始的概念會比較多,但之後就會利用這些概念來打code 囉~
  3. 歡迎各位可以在底下留言區討論,也麻煩各位指正我文章上的缺失~謝謝各位大神
  4. 這座島是一個非常和藹可親的島~ 有想要學甚麼技術的也都可以在底下敲碗,我....斟酌哈哈哈
  5. 這隻是我~名稱叫獅瓜湯包,也歡迎到ig追蹤他 (@lionnddragon)

https://ithelp.ithome.com.tw/upload/images/20200901/20129730eRtqQuLHx2.jpg


接下來講講甚麼是前端~

要來解釋前端~勢必就要講到後端跟他的差異,用最簡單的話講:

前端就是customer看的到的頁面,後端則是拿來處理customer的需求~

雖然這樣講很不專業,但是大致上就是這樣的概念,你看到的網站、圖片、連結、按鈕都是屬於前端的範疇

舉個例子

假設你現在要做一個【註冊】的功能

(1) 做一個 log in button 放在網站一進去的導覽列上

https://ithelp.ithome.com.tw/upload/images/20200901/20129730GQ6lKlQMRB.png

(2) 顧客在點擊按鈕之後會成功進入到登入頁

https://ithelp.ithome.com.tw/upload/images/20200901/20129730dNWuRDuNpJ.png

(3) 輸入完資料之後成功回到主畫面

請問 (1), (2), (3) 哪一個是前端哪一個是後端呢?

.

.

.

答案:

都是前端,但(3)有包含後端的運作

輸入完資料後,前端會把資料傳到後端,後端會進行驗證並確認之後就會告訴前端~成功囉! 可以把頁面導回主畫面了,而蒐集顧客資料以及頁面之間的轉換就是屬於前端的範疇~


好啦知道了啦~那我要怎麼學啦

我雖然說前端會需要很多工具~ 但注意了: 只是工具,而不是語言!!

其實你只要學會HTML, CSS, JavaScript 就可以了,因為像是之後會講到的框架(Vue) 都是一個規範HTML, CSS, JS怎麼寫的東西,但本質是一樣的

在那之前~ HTML/CSS/JS是甚麼?

但他其實概念是很簡單的~ 再用白話文講一下

HTML

這個網頁會包含甚麼內容? 要顯示甚麼圖片、文字?

CSS

要怎麼讓網頁排版? 顯示不同顏色字體?

JavaScript

要怎麼讓網頁動起來? 怎麼跟顧客互動?

其實HTML, CSS根本不是程式語言,他是標記語言的範疇,就是我在哪標記,他就會在哪出現~ 這個我會在明後天示範一次給各位看,如果你是HTML/CS大師~ 那明天放假一天!!


今天可以請我們的島民回家睡覺了

今天大概就是先講講前端是甚麼~後端是甚麼,我介紹上有稍微提到我這次不會帶到後端,反而是用一些便利小工具帶領大家巧妙避開後端哈哈 (但是還是會提到API一下~

為了讓大家可以心裡有個底~我可以先透露一下接下來30天你會學到的工具跟技術有甚麼

  1. git
  2. HTML/ CSS
  3. JavaScript/ ES6
  4. API
  5. VueJS
  6. EmailJS
  7. Firebase
  8. Bootstrap
  9. Vuex
  10. Netlify

當然侯有很多很多~ 也歡迎各位在底下留言妳想要學甚麼技術,我可以找幾天額外主委加碼一下。

那今天就先這樣吧,我要蓋上被子睡覺了

各位島民~明天見~


下一篇
【D2 - 前端島生存守則】先拿好你的地圖
系列文
到底要怎麼開始開發網站? --- 從入門到使用Vue, Firebase製作老闆交代的網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言