想從零開始成為前端工程師,如何自學?看進來就知道啦!

想從零開始成為前端工程師,如何自學?看進來就知道啦!

想從零開始成為前端工程師,如何自學?看進來就知道啦!
想從零開始成為前端工程師,如何自學?看進來就知道啦!

 

以自學的方式走前端工程師的路真的困難重重?相信你跟著下面的步驟,入門一點都不難!

 

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

一、首先我們要理解 HTMLCSSJavaScript 分別是什麼?

用這種觀點來看,其實就很好理解了: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 狀態列中按一下「即時預覽」。若你看到了紅色正方形的畫面,那恭喜你,你成功了!

 

延伸閱讀:

讓你對前端工程師具備的技巧游刃有餘!(上)必瞭CSS特性

如何成為前端工程師?現在帶你細探究竟!

前端工程師一定都認識的標籤們,今天就雙手奉上了!(下)

這台人工智慧機器讓在加護病房的人有了希望!快來看看是什麼這麼厲害!

全球前十大AI領頭羊,告訴你Python課程有多重要!

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

NOWnews 今日新聞

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料