fbpx

學習_都是自己的事

前端初學者的六個小疑問

2020 年 1 月 23 日

前端初學者

剛接觸前端時,總會看到一些讓你表示問號的相關名詞,而當你在google打上「XXX 是什麼」的時候,出現的可能會是更多你看不懂的專業術語 XD

今天~我們就來一起認識認識初學者對於前端,可能會產生的六個小疑問:

什麼是前端?

「前端設計師」、「前端工程師」、「WEB 前端」等關鍵字時常會出現在網路上,簡單來說,前端就像是你平常點入一個網站以後,呈現在眼前的美麗畫面。

一切元素、圖片、排版,或是一些互動、動態效果,這些就就是由前端工程師所負責的部分,就像是你進入店家後,店員把一件精緻、漂亮的衣服放在你面前的感覺。

什麼是切版?

通常在開始建置網頁前,會需要請UI設計師先製作出「網頁設計稿」,也就是業界俗稱的「Mockup」。而所謂的切版,其實就是把設計師的設計稿,轉換成呈現在瀏覽者面前的網頁。當然啦,在動手打 Code 之前,一定要先好好思考頁面該如何切割、規劃,而不是一拿到設計稿就開始瘋狂把版切下去,先釐清楚,才能夠符合程式的架構。

什麼是RWD?

響應式網頁

RWD 俗稱「響應式網頁設計」,簡單來說,就是會針對各種不同解析度的螢幕,而呈現不同排版、比例的介面。

在這個人手一機的時代,有60%的人都是使用手機在瀏覽網頁的(長輩就算不擅長操作電腦,使用手機還是666的😂)但是電腦和手機的螢幕比例、大小是相當有落差的,因此也不能把電腦版的網頁直接呈現在手機上,那樣太小了會看不清楚啦。

過去要解決這個問題時,也會特別撰寫兩種版本的網頁-手機版&電腦版,但當資訊一但要更新,就必須調整兩個地方,時常會有資訊漏掉的狀況發生,這時 RWD 的出現拯救了大家,只用一個網站,就可以解決多種裝置的頁面顯示問題。

什麼是開發者工具?

開發者工具,其實就是讓工程師可以在網站上測試、除錯的一個工具,就是來檢查網站的。
前端工程師或設計師最常用到的,應該就是用來「檢查樣式」或是查看 JS 是否有一些衝突、錯誤,好理解網站現在出現了什麼問題,能夠直接處理。 

更詳細的介紹,可以參考 Chrome 開發者工具:https://developers.google.com/web/tools/chrome-devtools?hl=zh-tw

什麼是跨瀏覽器?

跨瀏覽器

瀏覽器有百百種,但並不是當你寫好網站後,每一個瀏覽器對於程式碼的理解就一樣。
(就像同一句話說給三個人聽,每個人理解的不同,所以可能會聽到三種解釋XD)
相容性不同,就會導致在各個瀏覽器上會看到的樣子不盡相同,這時候就需要使用程式碼,來針對各個瀏覽器進行個別區塊的調整,才能確保所有使用者都能得到最佳的瀏覽體驗~

什麼是框架?

常常會聽到:你們是使用哪個前端框架呢?那對於框架的解釋,其實就是利用別已經製作好的library,加速開發的工具,而這些 library,集結了模組化的功能,因此使用它就像是站在巨人的肩膀上作業。以前端初學者來說,學習 Bootstrap 這個 HTML/CSS 框架,就可以更快速建置出一個具有響應式的網站了! 

=====

其實以上這六個「小」疑問,是多喜自己在初期學習時
在聽到的當下有覺得困惑的幾個名詞⋯(聽到切版時,還想說是要切什麼???)
那在這邊就用比較輕鬆的方式解釋給初學者看看,希望會對你有點幫助唷 😆 

也許你也會想看看 >>

Dohee

Dohee

Hi~我是多喜👻
徘徊在視覺設計和網頁前端中的學習者,目前也是整合行銷公司的網頁前端設計師,在這邊想分享、記錄下我的跨領域學習歷程,希望能夠對你帶來一些幫助!

聯絡我