- Jul 11 Thu 2019 15:00
-
人工智慧運用在國防軍事上是帶來保護還是危險?(上)
- Jul 11 Thu 2019 10:00
-
讓人好奇的人工智慧大小事(四)特斯拉的平反
- Jul 10 Wed 2019 16:00
-
自學前端工程師課程一點也不難?人人都可上手簡單學?
想自學前端工程師課程卻擔心太難無法辦到嗎?先了解基本概念大家都可以簡單上手喔~
今天小編要跟大家分享的文章是關於零基礎如何自學成前端工程師。目前網路發展迅速，前端也成了很重要的崗位之一，前端開發是很簡單的程式設計，甚至都不能叫做程式設計，因為它真的很簡單，很多想要轉行進入 IT 行業的新手會選擇前端工程師。那要怎麼自學?下面就來和小編一起來看一看文章吧~首先我們學習前端，要知道前端的三個大內容，HTML、CSS、JavaScript，其中 HTML 和 CSS 是相互結合著學習，掌握了這兩個了以後我們就算真正入門了，然後再深入學習 JavaScript 等等。
一、首先我們要理解 HTML、CSS、JavaScript 分別是什麼?
HTML 就相當於一個人，CSS 相當於一個人穿著的衣服，JavaScrip t相當於讓這個人做什麼動作，這樣一形容呢，我們就很好理解了，這個人就是網站，需要有 header 頭，body 身體，footer 腳……而網站所呈現給我們各種各樣的樣子就是我們寫的 CSS 樣式，網站裡的動態效果就都是我們的 JavaScript 去實現的。
二、零基礎學前端工程師難學嗎?
想知道前端工程師技術難不難學的新手可以跟著下面的步驟一起來設計製造一個專屬的網頁，相信你就會知道。我們用到的軟件呢，對於入門級來說我們一般推薦大家用 DreamWeaver，新建一個 HTML 後，出現的界面是這樣的，
下面我們開始輸入原始碼，我們可以看到這裡有這樣的原始碼<body></body>，這個就是我們網頁的身體，我們接下來要輸入的內容都是在這中間輸入的，這個括號表示的標籤，標籤都是一前一後的，成對兒出現的，除了一些特殊的標籤，隨後我們再一一給大家講解。現在我們輸入點內容，看看效果。
我們輸入一個標籤<div><div>，點擊右上角的地球瀏覽一下，會發現彈出了一個空網頁，什麼也沒有，那是因為我們現在只書寫了HTML，還沒有寫CSS，簡單來說就是，我們創建了一個東西在頁面裡，但是還沒有設置這個東西長什麼樣子，現在我們在設置它的樣子，
CSS">
1、我們為了給這個 div 設置樣式，所有先給它起個名字不然，電腦不知道我們要給誰加樣式，class="aaa" 的意思是起名為aaa
2、在<head></head>裡寫入這樣一組標籤<style></style>這個style的意思就是CSS，我們整個網站要加的所有樣式都是寫在這個中間的。
3、我們在style裡寫樣式，電腦首先要知道我們給誰加樣式，所有我們寫個.aaa 這個.(點)的意思是我要給aaa加樣式，電腦會自動把.(點)後面的名字，跟下面body裡的名字做一個匹配，這樣電腦就知道，哦~原來你是要給這個div加樣式呀，
4、然後我們把要給這個div加的樣式寫在大括號裡，Width:100px; 意思是這個div的寬是100像素，height:100px; 意思是高是100像素，background-color:#FF0000;意思是背景顏色是#FF0000這個顏色，
注意：
(1)這裡我要給大家解釋一下，大家別看這麼多原始碼，這麼多專有名詞，其實軟件有提示，像下面這樣，直接輸入第一個字母後面的專有名詞就出現了，直接選中就行了，連專有名詞都不用背，前端真的很簡單，
輸入 W 和輸入 h，會自動彈出名詞下拉選單
(2)每一個專有名詞都有提示，說到這裡，不會英語的同學就不要給自己找藉口說英語不好，學不會程式設計了。雖然說很簡單，但是要想真真的把前端學好是需要下功夫的，主要就是要堅持。
下面我們繼續，設置好了以後，我們就可以在 Dreamweaver 狀態列中按一下「即時預覽」。若你看到了紅色正方形的畫面，那恭喜你，你成功了！
其他閱讀
若前端工程師還只會用RWD的話就太不專業了!!你還可以用這個~
RWD和AWD不知該如何選擇嗎?前端工程師請一定要讀這篇啊!!
讓前端工程師與網頁設計師成為溝通無障礙的關鍵就是這個!!
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
- Jul 10 Wed 2019 11:00
-
讓人好奇的人工智慧大小事(三)愛迪生用交流電殺貓狗
- Jul 09 Tue 2019 22:53
-
前端工程師不能錯過的HTML5(下):關於SVG動畫
上一篇重磅回歸的HTML5入門課你看了嗎?下篇要介紹的是SVG路徑動畫!!趕快學起來!!
SVG 路徑動畫
前端工程師可以使用
HTML5裡的<path> 元素來定義路徑。
HTML5 中的 SVG Path 的基本指令列表如下
See the Pen SVG Path 基本指令-L by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-H by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-Y by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-C by Tedutw (@Tedutw) on CodePen.
(圖片取自：iT邦幫忙)
<path D="M0 0 C40 40,60 40,100,0 S150 -40, 200 0" stroke="black" fill="none"/>
See the Pen SVG Path 基本指令-Q by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-T by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-Z by Tedutw (@Tedutw) on CodePen.
起始點的 x,y 座標 (move to)
從「目前的點」的座標畫直線，到指定點的 x,y 座標 (line to)
從「目前的點」的座標畫水平線，到指定的 x 座標 (horizontal line to)
從「目前的點」的座標畫垂直線，到指定的 y 軸座標 (vertical line to)
從「目前的點」的座標，畫條貝茲曲線，到指定點的 x,y 座標。向下面圖中的曲線，C 的部分會有三組 x,y 座標：其中第一組以及第二組 x,y 座標為控制曲線的形狀用，最後一組則是終點座標。
S 可以從「目前的點」之後，再建立一個座標。這個新增的座標帶有一條貝茲曲線與「目前的點」連結。神奇的是，這個貝茲曲線的形狀，就是這個「目前的點」的鏡射線。聽起來很難理解，前端工程師們看下面的例子就會明白了。
Q 就是起點和終點的貝茲曲線共用同一個控制點，只需要有貝茲控制點的座標和終點座標就可以了。
T 只有一組參數 x,y ，表示終點的座標，所以 T 的前方要接上 Q 才能畫出對應的座標線。
關閉路徑，將「目前的點」的座標與第一個點的座標連接起來 (closepath)
其他閱讀
前端工程師不能錯過的HTML5:SVG簡介
前端工程師不能錯過的HTML5(上):關於SVG動畫
AI人工智慧系統進駐醫院,快速偵測敗血症提高病患存活率!!
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
- Jul 09 Tue 2019 11:00
-
讓人好奇的人工智慧大小事(二)耍賴的愛迪生
- Jul 08 Mon 2019 22:53
-
前端工程師不能錯過的HTML5(上):關於SVG動畫
深受前端工程師們喜愛的HTML5教學課程重出江湖啦!!超實用的SVG動畫千萬不要錯過喔~
SVG 基本圖形動畫
前端工程師們可以使用 <animate> 元素來繪製 SVG 動畫。
今天我們首先要來繪製一個方形，並且將動作設定在三秒鐘內往右移動，然後會重複相同的動作 3 次。
HTML5 原始碼與結果就會向下面所表示的那樣：
See the Pen SVG 基本圖形動畫 by Tedutw (@Tedutw) on CodePen.
以上所有的 HTML5 標籤說明如下：
屬性名稱，就是當前端工程師指定了這個屬性，就會以這個屬性去做動作。在本例中指定紫色方塊要水平位移，水平移動的座標為 x，所以該例中 attributeName 為 x。如果為垂直移動的話，attributeName 則為 y。
動畫開始時的屬性值。
結束動畫時的屬性值。
動畫持續時間。
動畫重複次數。在本例中重複 3 次所以 repeatCount 設為 3；如果要動畫無限重複的話， repeatCount 則設為 indefinite。
這裡的 fill 不代表填色，而是指定動畫結束時的屬性，屬性可選 freeze 或是 remove，remove 是預設值，也就是動畫結束之後，圖形返回原本的狀態，而 freeze 則是在動畫結束後，固定在結束的狀態
其他閱讀
前端工程師不能錯過的HTML5:SVG簡介
前端工程師不能錯過的HTML5(下):關於SVG動畫
AI人工智慧系統進駐醫院,快速偵測敗血症提高病患存活率!!
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
- Jul 08 Mon 2019 07:00
-
讓人好奇的人工智慧大小事(一)最接近神的男人
- Jul 05 Fri 2019 22:00
-
麥當勞引進人工智慧系統能讓點餐取餐更快速!?
- Jul 05 Fri 2019 08:00
-
人工智慧小故事(四)特斯拉的平反
- Jul 04 Thu 2019 22:52
-
超級實用的HTML5入門課程(十一)下:關於SVG動畫
承上篇的HTML5入門課~下篇要來跟大家說說SVG的路徑動畫!!要好好學起來喔~
SVG 路徑動畫
前端工程師可以使用
HTML5裡的<path> 元素來定義路徑。
HTML5 中的 SVG Path 的基本指令列表如下
See the Pen SVG Path 基本指令-L by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-H by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-Y by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-C by Tedutw (@Tedutw) on CodePen.
(圖片取自：iT邦幫忙)
<path D="M0 0 C40 40,60 40,100,0 S150 -40, 200 0" stroke="black" fill="none"/>
See the Pen SVG Path 基本指令-Q by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-T by Tedutw (@Tedutw) on CodePen.
See the Pen SVG Path 基本指令-Z by Tedutw (@Tedutw) on CodePen.
起始點的 x,y 座標 (move to)
從「目前的點」的座標畫直線，到指定點的 x,y 座標 (line to)
從「目前的點」的座標畫水平線，到指定的 x 座標 (horizontal line to)
從「目前的點」的座標畫垂直線，到指定的 y 軸座標 (vertical line to)
從「目前的點」的座標，畫條貝茲曲線，到指定點的 x,y 座標。向下面圖中的曲線，C 的部分會有三組 x,y 座標：其中第一組以及第二組 x,y 座標為控制曲線的形狀用，最後一組則是終點座標。
S 可以從「目前的點」之後，再建立一個座標。這個新增的座標帶有一條貝茲曲線與「目前的點」連結。神奇的是，這個貝茲曲線的形狀，就是這個「目前的點」的鏡射線。聽起來很難理解，前端工程師們看下面的例子就會明白了。
Q 就是起點和終點的貝茲曲線共用同一個控制點，只需要有貝茲控制點的座標和終點座標就可以了。
T 只有一組參數 x,y ，表示終點的座標，所以 T 的前方要接上 Q 才能畫出對應的座標線。
關閉路徑，將「目前的點」的座標與第一個點的座標連接起來 (closepath)
其他閱讀
超級實用的HTML5入門課程(十):SVG簡介
超級實用的HTML5入門課程(十一)上:關於SVG動畫
AI人工智慧系統進駐醫院,快速偵測敗血症提高病患存活率!!
暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~
想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
- Jul 04 Thu 2019 09:00
-
人工智慧小故事(三)愛迪生用交流電殺貓狗
