要知道你比較適合前端工程師還是後端工程師,繼續看下去就知道了!
有許多接觸網頁開發的新手，或是想要轉行，成為網頁開發工程師的人，都會有這個疑問：什麼是
前端工程師、什麼是
後端工程師，以及他們到底是需要哪些語言或者是技術呢？今天就讓我們來簡單介紹一下。
前端工程師
網頁前端開發一般指的是我們看到的網頁，包括裡面靜態的介面、一些酷炫的動態效果，以及用戶的交互操作等。
網頁前端開發一般由那些技術構成呢？首先是 HTML 這個超文本標記語言，它主要用來展示一些文本，圖片，表格，連結等。
其次是CSS，它中文翻譯為層疊樣式表，CSS 不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
最後一門重要的技術叫做 JavaScript，一種直譯式腳本語言，常用來為網頁添加各式各樣的動態功能，為用戶提供更流暢美觀的瀏覽效果。
學習曲線：先易後難，也就是說入門比較簡單，但是後期深入就比較困難了！
後端工程師
網頁後端開發，一般就是指我們網站的伺服器程序，他們決定了我們網站的運行邏輯，業務核心，我們通過它來處理業務，操作資料庫（增刪改查等）
主要技術有：
Java ：Java 是一種跨平台的語言，它已經走過了 20 個年頭，見證了 PC 網際網路、移動網際網路、大數據、雲計算等網際網路浪潮，如今依然是使用最多最為廣泛的後端語言，這不僅是因為 Java 語言在發展過程中不斷的優化，更因為在發展的過程中不斷產生的優秀的框架，形成了一個龐大的java生態圈，全世界的軟體和網際網路公司絕大多數都是
Java 的用戶。Java 適合於開發大型的應用系統，應用的前景比較廣闊，系統易維護、可復用性較好。數學運算和資料庫訪問速度來講，Java 的性能也很優秀。實際上，Java 對於跨平台的大型企業之應用系統來講，幾乎已成為唯一選擇。
PHP：PHP 是一種解釋執行的腳本語言，語法和 C 語言類似，易學又易用。PHP 適合於快速開發一些中小型應用系統，開發成本較低，能夠對變動的需求作出快速的反應，也可以節省開發周期，幫助項目儘快上線試錯。一般剛開始創業的網際網路公司，更適合使用 PHP 開發。
GO：GO 語言由 Google 開發，其中負責人員包括了開發 Java 、UNIX 以及 C 語言的各個技術大牛，他們總結吸收了之前語言的一些優點並對缺點進行了改良，這樣出身的 GO 不得不讓人羨慕。近年來它也確實成為了開發市場的新寵，從語言排行上來看也是上升最快的語言。可以說未來是前途無限的。GO 語言現在也確實占有了一定量的後端市場，一些公司專門招人學習GO 並使用，但畢竟GO 在程式語言中還是個初生之犢，還有一段路要走。
學習曲線：Java 曲線較穩定，且業界需求量很高。PHP 相對 Java 較容易上手。而 GO 語言又更簡單些。
延伸閱讀：
前端工程師要如何將字體單位學得好?看這就對了!-絕對單位篇
前端工程師要如何將字體單位學得好?看這就對了!-相對單位篇前端工程師之"盒子模型"大解密!(上)-邊界達內教育就是要幫你把不可能變可能
網路行銷課程沒特色,網頁淪為蚊子館? 什麼!?人工智慧竟淪為假新聞寫手?達內教育開幕 培養台灣IT人才進入全球企業布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(5)
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(60)
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(114)
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(149)
你以為背景位置的設定只能靠前端工程師嗎?靠這篇文章,你自己也做得到!前端工程師可用CSS background-position 用來定義背景圖片位置，它是 CSS background 的屬性之一，常與 背景圖樣屬性 (background-image)、背景重複參數 (background-repeat)搭配做網頁設計，來決定網頁背景圖片顯示位置，可調整背景圖片靠上(top)、下(bottom)、左(left)、右(right)或是置中(center)。設計時需下水平位置與垂直位置的參數，可以以數字、百分比或方向等為單位，前端工程師便能順利使圖片在正確的位置呈現。 各種方向參數：水平方向：left - 靠左對齊、center - 置中對齊、right - 靠右對齊垂直方向：top - 靠上對齊、center - 置中對齊、bottom - 靠下對齊 CSS background-position 基本語法如下：background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ;通常使用水平方向與垂直方向的組合，來定義背景圖片呈現的位置。例如「background-position:left top;」這樣代表背景圖片靠左上角對齊。除此之外，還可以微調「靠左與靠上的距離或百分比」來設計，範例如以下所示：background-position:right top; // 靠右靠上對齊
background-position:right center; // 靠右置中對齊
background-position:right; // 靠右置中對齊(如果您僅定義了一個參數，那麽第二個參數將會默認為「center(置中)」。)
background-position:right bottom; // 靠右靠下對齊
background-position:left top; // 靠左靠上對齊
background-position:left center; // 靠左置中對齊
background-position:left; // 靠左置中對齊(如果您僅定義了一個參數，那麽第二個參數將會默認為「center(置中)」。)
background-position:left bottom; // 靠左靠下對齊
background-position:top center; // 靠上置中對齊
background-position:bottom center; // 靠下置中對齊
background-position:center; //背景圖片水平位置與垂直位置均置中對齊
background-position:30px 60px; //靠左 30px 靠上 60 px 的位置(第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)
background-position:10% 50%; // 靠左 10% 靠上 50% 的位置(第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。)
background-position:10%; // 效果同上一行，靠左 10% 靠上 50% 的位置 (如果您僅規定了一個值，另一個值默認為 50%。)
其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)
|
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(137)
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(153)
前端工程師盒子模型的學習終於完整了!今天第二篇的出爐讓我放下心中的大石頭! 複習：在盒子模式中，內容 (content) 是最內層的部分，接下來依序為留白 (padding)、邊框 (border)、以及邊界 (margin)。邊界是用來設定各個元素之間的距離。相關的 CSS 指令由外至內依序為 邊界 (margin)、邊框 (border)、以及 留白 (padding)。這篇主要介紹邊框及留白：
目錄
1. 邊界 (margin)
2. 邊框 (border)
3. 留白 (padding) |
邊框Border 是邊框，介於外側的邊界 (margin) 與內側的留白 (padding) 之間。不須特別設定，CSS 碼如下：border: 邊界值 實線或是虛線 顏色;邊框設定範例如下：border: 1px solid #000000;See the Pen margin：上下左右; (一個值) by Tedutw (@Tedutw) on CodePen. 如以上前端工程師課程的範例，我們得到一個外層包了一層黑色 (色碼為 #000000) 實線 (solid)、寬度1px的框。 border的數值只需要用空格分開即可，屬性不需要一個一個下，如:border-width、border-style、border-color 等等。 留白padding(留白)外側緊鄰邊框 (border)、內側緊鄰內容 (content)。如果沒有設定 padding，內容的部分就會黏著邊框。padding 就會吃到背景色。 以下是沒有設定 padding 的例子，可以看見內容的字緊鄰黑色的邊框 以下是有設定 padding 的例子, 可以看見內容的字與邊框有一段距離.這一段距離就是所謂的「padding」。padding會吃到背景色。See the Pen margin：上 左右 下; (三個值)-加上邊框 by Tedutw (@Tedutw) on CodePen. Padding 的上下左右調整，語法跟 Margin 一樣，已身為前端工程師的同學特別強調，順序很重要。列舉如下： padding:[上面留白值] [右邊留白值] [下面留白值] [左邊留白值] padding:[上面留白值] [左邊與右邊留白值] [下面留白值] padding:[上面與下面留白值] [左邊與右邊留白值] padding:[上面與下面與左邊與右邊留白值] 布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(25)
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(59)
布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(143)
CSS的字體單位讓身為前端工程師的你頭昏腦脹?今天用兩篇來鋪好你的字體基礎之路! 在 CSS ，字體單位可以分為兩大類：絕對 (absolute) 單位以及相對 (relative) 單位：（本篇介紹主要介紹絕對單位） 分別介紹如下：
目錄
1. 絕對單位
px (pixel 畫素)
cm / pt / in / pc / mm
large, medium, small
2. 相對單位
em
rem
%
larger, smaller |
前端工程師必知的字體單位：絕對單位
px (pixel 畫素)
px 為 CSS 最常用的單位。無論字體大小、區塊或其他元素的尺寸設定，都少不了它的蹤影。一般認為：px 會依據螢幕解析度而變化、平時被歸類為相對尺寸。但為何在 CSS 裡面就變成絕對尺寸呢？因為在 CSS 裡面，絕對尺寸的定義是「不會繼承上層父元素的設定」的尺寸。在 CSS 中，無論設定多少 px，它就會精確的呈現，他都不會繼承沿襲上一層的父元素的尺寸。如以下例子所示，就是若使用 px 這個單位來設定大小，那麼不管頁面上其他的尺寸設定，都不會影響到他。
而 px 的定義，理論上就是：一個像素 px 意思就是螢幕上最小的一點：16 px 就是 16 點大小。
See the Pen #demo-px by Tedutw (@Tedutw) on CodePen.
cm、pt、in、pc、mm
這些單位比較適用於印刷的排版軟體，在 CSS 比較少用。分別解釋如下：
- in：英吋，在 96 dpi 的系統上 1 in = 96 px。
- cm：公分，在 96 dpi 的系統上 1 cm = 37.795275593333 px。
- mm：公釐，在 96 dpi 的系統上 1 mm = 3.7795275593333 px。
- pt：印表機的每個「點」，定義為 1 pt ＝ 1/72 in，如果在 72 dpi 的系統上 1 px = 1 pt，但如果在 96 dpi 的系統上 1 px = 0.75 pt ( 72/96 = 0.75 )。
- pc：picas，定義為 1 pc ＝ 12 pt。
- in：英吋，在 96 dpi 的系統上 1 in = 96 px。
See the Pen #demo-cm、pt、in、pc、mm by Tedutw (@Tedutw) on CodePen.
large, medium, small
字體大小的屬性有七種如下：
- xx-small：對應 h6 的標籤文字大小，為 medium 字體的 3/5 倍。
- x-small：沒有對應的標籤文字大小，為 medium 字體的 3/4 倍。
- small：對應 h5 的標籤文字大小，為 medium 字體的 8/9 倍。
- medium：對應 h4 的標籤文字大小，，根據 W3C 的規範，以 medium 預設 16px 為基礎
- large：對應 h3 的標籤文字大小，為 medium 字體的 6/5 倍。
- x-large：對應 h2 的標籤文字大小，為 medium 字體的 3/2 倍。
- xx-large：對應 h1 的標籤文字大小，為 medium 字體的 2/1 倍。
由上方看出，除了 x-small 沒有對應的標籤文字大小外，其餘六種分別對應 h6~h1 的標籤文字大小。而 medium 根據 W3C 的規範，大小為預設的 16px 為基礎 (除非另有自行設定預設字體大小，則不再此限)。所有的 large 與 small 屬性都是使用固定的倍數乘上 medium 的大小。
See the Pen #demo-large, medium, small by Tedutw (@Tedutw) on CodePen.
而別忘了前端工程師還有另一種不能不知道的字體單位，下集見分曉!
延伸閱讀：
前端工程師要如何將字體單位學得好?看這就對了!-相對單位篇
為了成為前端工程師,我一定要成功-認識Class選擇器
為了成為前端工程師,我一定要成功-認識ID選擇器台灣人工智慧在加護病房當守護天使,預測敗血症成功率達八成五!全球最大賣場人員自從有了這款人工智慧玩具,每個人都笑顏逐開了?!還在看惡評達內PTT? 有判斷力的你直接來達內試試就知道!!達內課程先就業再付款- 中時電子報 布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(146)
延伸閱讀：
