iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 30

[Day 30] 阿嬤成為網頁前端工程師的下一步

阿嬤成為網頁前端工程師的下一步

儘管篇幅長短不一,我們在這 30 天當中討論了怎麼寫 HTML 標籤、CSS 樣式,以及如何使用 JavaScript 與 JQuery 操縱 DOM。到這邊,各位阿嬤應該有辦法獨力寫出一個單純呈現資料的網頁了。這是我們成為網頁前端工程師的第一步。

那麼,我們的下一步會是什麼呢?

在切版的部分,儘管我們已經在貼紙簿的練習中,學習了基本的版型;不過,我們是否能夠給出固定的格式,讓我們不用每次遇到切版,都重新寫一次樣式呢?格線系統 就是為此而生的規劃方式。我們在學習刻出格線系統時,也會對於整體網頁的布局規劃更加熟悉。

另外,如果我們想要更快速地開發出網頁常見的元件,例如蓋板橫幅,折疊式卡片,按鈕等等,都已經有人替我們開發好了。例如 Bootstrap 這個套件,就可以幫助我們快速寫出這些元件喔!假使需要些常見的 CSS 樣式,也可以使用 Tailwind 這個已經寫好的類型屬性庫。

值得一提的是,我們這 30 天中提到的 CSS 樣式並沒有條件判斷或迴圈的功能;因此,我們也有 SASS/ SCSS 這些工具,幫助我們模擬、也縮短與 DRY 化重複的 CSS 樣式。

網頁前端設計其實還有個分支是 CSS 動畫,這並非所有阿嬤都會需要用到;然而,隨著視覺互動網頁逐漸變成潮流,CSS 動畫也越來越普及,所以算是很有發展與投資潛力的一項技能。

我們在 JavaScript 的介紹中,其實只論及最簡單的皮毛。我們並未提及匿名函式、陣列的進階方法等等重要技巧,更不用說底層運作原理與物件導向--而這也是各位阿嬤在後續學習中應該領會精通的。

在網頁互動方面,我們經常會需要使用者輸入資料。因此,我們也需要學習網頁的表單該怎麼寫,以及使用者按下「送出」按鈕後,這些資料怎麼被傳到後端,又怎麼在傳送過程中,保持資料安全。

最後,我們在整個網頁渲染的過程中,可能會需要和後端要些資料來即時渲染。然而,由於神燈精靈在 JavaScript 這個方言下的習慣,它不會等待後端將資料回傳後,才開始渲染資料,所以就算我們順利拿掉資料,神燈精靈還是沒辦法把這些資料渲染出來。因此,我們必須用些方法請神燈精靈等待;這種方法叫作「非同步」,也是網頁前端工程師的基礎素養。

儘管 30 天的鐵人賽很長很操很想死,但是對於學習之路而言,也只是個非常非常小的階段。希望我在這 30 天的努力,能夠化作各位阿嬤開始學習網頁的小小助力,讓各位阿嬤覺得網頁或程式其實不難,只要有好的講解,任何人都可以享受寫網頁的樂趣!

那麼,就預祝各位阿嬤
活到老學到老!

Sincerely,
Logos


上一篇
[Day 29] 阿嬤都看得懂的 JQuery 怎麼寫
系列文
你阿嬤成為網頁前端工程師的第一步30
0
南國ㄟ安迪
iT邦新手 5 級 ‧ 2021-10-15 17:05:10

地方的阿罵恭喜完賽XD

感謝!也希望安迪順利追到小姐姐!

0
Ken Chen
iT邦新手 5 級 ‧ 2021-10-15 20:01:29

恭喜完賽、順利追到阿嬤工程師了大誤

哈哈哈,是說順利追到阿嬤工程師往前邁進的腳步對吧!

0

恭喜完賽!! 還有下一步 阿嬤很上進!/images/emoticon/emoticon30.gif

對啊,看明年是不是......(被拖走

0
Logos50607
iT邦新手 5 級 ‧ 2021-10-19 02:08:06

文章已更新囉~

我要留言

立即登入留言