零基礎,又想自學成為前端工程師,會像登天一樣難嗎?

-
零基礎,又想自學成為前端工程師,會像登天一樣難嗎?



想成為前端工程師,就讓今天的這篇文章,成為你入門的墊腳石!

今天小編要跟大家分享的文章是關於零基礎如何自學成前端工程師。目前網路發展迅速，前端也成了很重要的崗位之一，前端開發是很簡單的程式設計，甚至都不能叫做程式設計，因為它真的很簡單，很多想要轉行進入 IT 行業的新手會選擇前端工程師。那要怎麼自學?下面就來和小編一起來看一看文章吧~首先我們學習前端，要知道前端的三個大內容，HTML、CSS、JavaScript，其中 HTML 和 CSS 是相互結合著學習，掌握了這兩個了以後我們就算真正入門了，然後再深入學習 JavaScript 等等。

 

一、首先我們要理解 HTML、CSS、JavaScript 分別是什麼？

用這種觀點來看，其實就很好理解了：HTML 就相當於一個人，CSS 相當於一個人穿著的衣服，JavaScript相當於讓這個人做什麼動作，而這個人就是網站，需要有 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和AWD的優缺點

前端工程師和網頁設計師看過來!-萬事從規劃流程開始

前端工程師的神器Emmet(一)快速產生標籤名稱

擠進高薪科技大門-Java課程等你來瞭解!

想賺超多錢,除了上網路行銷課程,你還需要這個... 

暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~

中國IT教育領導品牌　達內教育集團第一家海外授權中心

這個網誌中的熱門文章

Python控制結構一點就通!(5)while迴圈

-
圖片
關於Python的while迴圈,它可以製造出那些效果?一步步跟著這篇走,剩下的你不用怕啦! 關於Python-while 迴圈 Python 的 if 條件判斷式【請參考上篇的 Python教學 ： Python控制結構2.if else條件判斷(1) 】，若評估為 True【請參考： Python控制結構1.布林值Boolean-True or False? 】 的話，就會執行一次；反之則不執行。 Python 的 while 迴圈跟 if 條件判斷式相似，但是不同的是，它不只執行一次。只要條件成立，它就會不斷地重複執行。就算是有其中一段代碼被評估為 False，下一段代碼仍會被執行。 while 迴圈構成，包含了 。 以下範例的 while 迴圈中有一個變數「i」， 初始值 為「1」； 更新值（又稱為調整值） 為「i+1」； 讓迴圈結束的條件 為「i <=5」。 這次 Python教學 給你以下範例，讓 i 的從初始值開始，程式每執行一次，i 就等於上一回合的數值再「+1」一次，直到 i 等於 5 為止停止，寫法如下： i = 1 #初始值 while i <=5: #讓迴圈結束的條件 print(i) i = i + 1 #更新值 (調整) 則結果為： 1 2 3 4 5 >>> while迴圈的「infinite loop(無限循環)」 Python 的 while 迴圈中，有一種被稱作「infinite loop(無限循環)」，當條件（為True）成立時，該程式就會永不停止地重複執行。 「infinite loop(無限循環)」的範例如下： while 7==7: print("這是無限循環迴圈") 結果，「這是無限循環迴圈」這行字就會不斷的重複顯示。 若你真的受不了，你可以 按鍵盤快速鍵「Ctrl-C」以阻止它繼續重複顯示。 以下也是無限循環迴圈的另一個例子，來看看它的結果如何吧！ x=1 >>> while x>0: print(x) x+2 結果馬上會跳出一堆數字，且不斷的在跳出中。後出來的數字，都是...
閱讀完整內容

前端工程師絕不能搞錯的CSS中:逗號.空格的差別!

-
圖片
想成為前端工程師?那CSS中最基本的逗號.空格再搞錯,豈不是太不專業了! 有時在 HTML 中， 前端工程師 們會對同一個標籤給予兩個以上的 Class 名稱，如以下所示: < div class = " first second " > </ div > 對於這類有兩個以上的 Class 名稱的 HTML，其 CSS 選擇器可能會用以下的三種情況顯示。而聰明的你，分辨得出這些 CSS 有什麼不同嗎? /*1. 兩個 class 中有空格*/ .first .second /*2. 兩個 class 中沒有空格*/ .first.second /*3. 兩個 class 中出現逗號*/ .first,.second 對於 CSS 及前端工程師的初學者來說，上述三種 CSS 因為長得很像，所以經常傻傻分不清楚。究竟兩個 class 中間空格、沒空格、有逗號，到底差在哪裡? 別擔心，立刻講解給你聽：   1. 兩個 class 中有空格的例子：五個區塊中，階層必須是要在 first 區塊之下的 second 區塊，才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有空格的例子 by Tedutw ( @Tedutw ) on CodePen . 2. 兩個 class 中沒有空格的例子：五個區塊中， div class 名稱必須同時出現 first 與 second 才會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間無空格的例子 by Tedutw ( @Tedutw ) on CodePen . 3. 兩個 class 中有逗號的例子：五個區塊中，只要 div class 名稱中有出現 first 或是 second 的區塊，就會顯示黑底白字的 CSS 設定 See the Pen .first與 .second中間有逗號的例子 by Tedutw ( @Tedutw ) on CodePen . 註 : 以上三個範例的 HTML 碼都一樣 延伸閱讀： 前端工程師入門款小常識-CSS碼特性一下就上手!  ...
閱讀完整內容

網頁前端CSS必學兩屬性:display與visible

-
圖片
今天要介紹網頁前端中的兩個CSS屬性:display與visible屬性! 本篇介紹 網頁前端 排版的兩個 CSS 屬性：display 屬性與 visibility 屬性。 CSS ：display 屬性 display:block 對於 CSS 語法來說， 網頁前端 的每個元素都是一個矩形盒（rectangular box）模型。而使用「display」屬性，便可以決定「盒（box）」的呈現方式。 又「區塊元素（block element）」則會佔用可用寬度的最大值，前後有換行符。 以下範例分別顯示了是否有將<span>元素顯示為區塊元素（block element）的結果。 在下方的顯示視窗中，按「CSS」，就可以觀看 CSS 的語法如何設定了！ See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 網頁前端 CSS 語法設定如下： span.block{ display:block; } display:inline inline 元素只佔用可用寬度的最大值，並不強制換行。 將上一段範例的<span>元素，CSS 換成「display: inline」的結果如下。跟上一個範例一樣，在下方的顯示視窗中，按「CSS」可以觀看 CSS 的語法如何設定。 See the Pen display: block by Tedutw ( @Tedutw ) on CodePen . 上述範例的 CSS 語法設定如下： span{ display:inline; } display:none 「display:none」用來將元素隱藏使用，當元素隱藏後，就不佔用任何空間了，且在 網頁前端 頁面顯示時也不會被展現出來，就好像該元素不存在一樣。 在以下範例中，我們將第 2、4 段設為「display:none」，其他設為「display:block」。 See the Pen display: none by Tedutw ( @Tedutw ) on CodePen . 上述介紹的「block」、「inline」、「none」都是最常碰到的的 d...
閱讀完整內容