如何在一個月之內從零基礎成為初級CSS前端開發工程師?
WEB初級工程師(CSS,暫時不考慮JS)指的是能獨立完成項目。
至少應該具備以下的能力:
1.能夠獨立的完成項目,完美還原設計稿.
2.能夠支持自適應,不能做自適應的網站已經很少了.
3.能夠支持響應式,畢竟跨屏的場景越來越多了.
4.能夠了解一門CSS框架,做為提煉自已抽象能力的引子,通過使用,來直觀的感受到其他人是怎麼解決代碼復用問題的。
5.能夠和其他的項目組成員溝通學習交流協作,熟悉一些編碼規範.然後,並不要求這個時候會JS,JS是另外的一個問題。
==============================
1.21天學會JS什麼的,這種根本就不是一個真正的工程師。
2.視頻基本上是不可能教會你的,也不會這麼快。最簡單的理由(可能不貼切),看了一萬年的足球,能踢的好么。
實際項目寫CSS是這樣的,有個idea,但不知道或者忘了具體CSS該怎麼寫,於是Google一下,找到一些東西,比如常見的CSS Tricks網站上有很多整理好現成的代碼可用,然後在Devtools裡面試一試效果,能解決大部分的CSS編程問題。所以其實並不需要一個月,網上搜一搜理解CSS的核心概念,比如選擇器(selector),偽選擇器(pseudo selector)和級聯繼承(cascading)是如何工作的,然後配合搜索引擎和devtools,用不了一個月。
Transcending CSS: The Fine Art of Web Design
CSS3: The Missing Manual
一個月,你最多了解各種屬性是幹嘛的,沒有常年在實際項目中踩坑和填坑,然並卵的。好比你可以在一月認識很多字,但不一定寫得出作文。
前言
===============================
CSS入門比較簡單,很適合零基礎的人去學習。
但是該從哪裡開始呢?又該學到什麼程度,學會了之後,又會能找到一份什麼樣的工作呢。
首頁,我必須要告訴你們,IT修真院的弟子們是可以在一個月之內勝任初級CSS工程師的工作的。已經有近10個人通過線下的學習,成功的從零基礎進入互聯網前端工程師這個行業。
線上也有近60人開始這種新的互聯網IT技術教育的模式,不過,相對於傳統的看視頻,看教程的學習方式,你必須按照這篇貼子里所說的去做, 才行。
還有,記著,對於線上來講,缺的永遠是一個好的環境,一個好的交流氛圍,一個讓自己堅持下去的理由。
目錄
===============================
一 什麼是CSS
二 該學習哪些內容
三 能勝任什麼工作
四 為什麼不推薦去看視頻
五 究竟該怎麼去學習
六 遇到問題怎麼交流
七 下一步學什麼
八 哪些能力是工程師必須要掌握的
===============================
一 什麼是CSS?
CSS【層疊樣式表】是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。
解釋一下標準的IT項目組成員的含義和職責:
1.產品經理:每一個好的產品,都是產品經理在浴室里思考會議室上拍桌子說服大佬最後拿著槍指著程序員做出來的。這就是產品經理的職責,他們被認為是互聯網的靈魂和發動機,理解用戶痛點,給出解決方案,做出差異化的產品,能夠快速迭代,可以合理分期並能夠及時評估項目風險。產品經理就是負責把用戶的需求,變成需求文檔和原型和PPT和流程圖。
當然,大多數程序員對於產品經理的形容只有兩個字:SB
2.UI:UI是一個又能做產品又能做頁面又能做交互的神奇物種,做UI是跟做前端的人打交道最多的職業,所以他們跟CSS一樣,有時候都被簡稱是美工或切圖的,有時候就是給合影照做PS的。UI就是把產品經理設計的原型圖,上色變成好看的設計稿。也就是PSD文件。
當然,大多數程序員(特別是CSS)對於UI人員的形容只有三個字:像素眼
3.CSS:其實有時候CSS根本不算程序員啦,這也是為什麼有時候UI會兼職做CSS的重要原因。也是CSS成為了最容易上手的IT職業。CSS就是負責把UI設計的圖片(PSD),變成Html網頁,裡面的數據全是假的。很多時候學會CSS就能找到一份IT行業的工作,但是並不能幫助你拿高薪。
當然,大多數程序員對於CSS人員的形容只有三個字:切頁面的。
4.JS:JS入門的難度比CSS稍高一些,但也是所有真正程序員里比較簡單的工種了。簡單的JS程序員只是做點輪播,做點特效和動畫,加個彈窗,做個驗證。但是,現在呢,前後端分離的方式,前端架構概念的出現,Html5的普及,已經讓前端成為了一個最重要和最熱門的工種。
當然,大多數程序員對於JS人員的形容就是:我靠,你居然會寫後端代碼?
5.後端:後端其實才是神一樣的存在,無論前端是有Apple還是IOS還是桌面客戶端,永遠少不了後端,後端要懂業務邏輯,要懂擴展,要懂備份和安全。但是後端是一個很吃年限,入門要求很高的職業。
當然,大多數產品經理對於後端人員的形容就是:馬丹又延期了。
6.QA:QA歸屬於程序員,但是常常會被程序員孤立哈哈哈哈哈。因為QA就是專門挑錯的人,如果你挑錯挑的不嚴謹,Boss會罵你。如果你挑錯挑的很認真,程序員會殺了你。你自己看著辦吧。
當然,大多數程序員對於QA的形容就是:你是不會用吧。
7.OP:OP是比較奇葩的物種,跟各個程序員之間基本上沒什麼大的衝突,除非是到了發布的時間點。無數的OP都會經歷過這樣的事情,線上發布一次,馬丹,有Bug,回滾或者是直接在線上改。改了半個小時,馬丹,還是錯,再繼續改。這次先到了測試環境驗證,好不容易驗證通過了,再發到線上,又出問題了。馬丹,程序員們繼續改。
當然,大多數程序員最喜歡對OP說的一句話就是:大哥,睡了沒?沒睡再幫我發一個版本吧?
小結:CSS就是負責把UI設計的效果圖變成靜態網頁,然後由後端或者是前端JS把靜態網頁中(假數據)變成動態網頁(真數據)。簡單說,不用理解太多產品需求,只要勾搭好UI妹子,做好瀏覽器兼容,做好自適應和響應式,代碼寫的別那麼爛,有點通用性,就好啦。這就為一個月之內學會CSS,成為一個初級的CSS工程師,創造了前提條件。
二 該學習哪些內容
===============================
先看一下這張圖,不同的顏色代表著你需要了解到不同的程度。
簡單來說呢,我對一個月的CSS工程師要求是:能獨立完成自適應和響應式的項目,能會使用Bootstrap和Less。
你們覺得難么?可能大部分人都未必知道,什麼是適應,什麼是響應式,什麼是Boostrap和Less。
好吧,這確實是有點難度,不過我大IT修真院的弟子可以在15天之內完成這個的。所以,其實還不算太難啦,難的還在於是編碼規範。
這兒我把CSS初級工程師,需要會的內容,再整理成一個文字版的。
1.基礎環境的配置:WebStorm/sublime,Svn/Git,Nginx/shell ,PS ,命名和規範。
這些都是一開始就要會的了,只有一開始都先從簡單的功能開始使用,然後每天鞏固,每天在用,當一個月之後,你會發現根本就不用刻意去學,自然就會了。其中,WEBStorm是IDE,SVN是源碼管理工具,Nginx是WEB伺服器,Shell只需要會一些簡單的腳本,PS是要你自己學會切圖,命名和規範是格外的重要的。。這裡每一個點都可以無限擴散,然而你並不需要會那麼多,暫時來說,會用就行。
2.布局+樣式:布局是最基礎的操作,先拋開各種奇怪的控制的屬性不談,單說各種對齊和局中。
這裡其實是需要了解一些理論知識的(大概也是CSS里為數不多的理論知識之一),主要就是盒子模型,定位(標準流)(浮動)(相對,絕對)。用這些東西做出常見的居中,兩列,三列,Header,Foot,側邊欄等。 然後就是學習各種控制項(簡單的和複雜的)的樣式,這裡包括選擇器,優先順序等等。
3.自適應+響應式:可以這麼說吧,從現在開始,表再做沒有自適應的網頁了,優先考慮響應式吧,跨屏時候已經來臨。所以你要了解屏幕尺寸(Media),要懂長度單位(em,rem,百分比)
4.性能優化:一些簡單的常識就夠了。最少要學會雪碧圖的製作。
5.框架:Bootstrap和Less,在學會以上4種的時候,已經可以自己搭建一個網站了~
吃驚咩?然而還是需要學習一下Bootstrap,學會了解一下使用開源框架的感受,學習別人封裝代碼的思路,這是最重要的。Less可以幫助你從另一個角度去思考,讓你的代碼更簡潔。
好的,現在來簡單總結一下,當我說,一個月之內成為一個CSS初級工程師的時候,就是指的你已經學會了以上的內容。這樣你就能開始寫一些項目了,在寫項目的過程中,會加深很多細節的知識,CSS的知識就是繁瑣的。
只有掌握了這些,你才能完成接下來的學習。
三 能勝任什麼工作
===============================
其實,剛剛已經說到一些了。初級的CSS工程師,在北京可以拿到4K~8K的薪水,能不能找到工作,取決於你能不能獨立做出來項目的頁面。能拿到多少薪水,取決於你會不會一些JS。
這樣的水準啊。在北京找到份工作其實不難了,你每天的日常工作就是,從UI那裡拿到圖。然後切成靜態頁面,然後當後端的同學套頁面的時候,去看看套的對不對。
跟著會做一些輪播圖,做個小彈框之類的。如果你停止學習,你可能在這個水平上停留很長時間。哦,還有可能會懂一些瀏覽器的Hack。學會兼容IE的老版本。
四 為什麼不推薦去看視頻
===============================
坦白的說呢,如果沒有人教你,沒有人帶你,想要實現在一個月的時間裡就學會這些,基本上是做不到的。
這也是我寫這篇貼子的很重要的原因,這也是這篇貼子中最有價值的地方。
總的原則是:
1.永遠永遠不要去先看視頻,先看書。
2.永遠永遠記著代碼是寫出來的,不是看出來的。
3.永遠永遠記著要有自己獨立學習獨立解決問題的能力。
4.永遠永遠記著不要說自己不會英語。
5.永遠永遠記著不要給自己沒有時間找借口。
6.永遠永遠記著要學的知識有很多,找到一條正確的途徑才可以。
好了。看完這些,也可能會跟你之前的認知有所不同。
但是,想想,你有沒有遇到過這些問題。
1.不知道自己該學什麼,從哪裡入手。
2.視頻看了很多,講起來好像懂了,做起來完全又不會。
3.遇到了問題,根本找不到人解決。
那麼我來解釋一下,為什麼我會讓你們拋棄看視頻,看教程,做測試題等各種奇怪的學習方式,轉而投向更高效更快速的IT修真方式。
首先,技術是有體系的,但是又是非常零散的。
這些零散的小知識太多了,而且在實際使用中,你並不需要把所有的零散小知識都學會,那樣太慢了,更何況,在做真實的項目中,根本用不到這些小知識。
用不到的東西很容易就會忘啊。所以這就是你看視頻或者是教程之後,就算是懂了也會很快就忘記的原因。
怎麼解決?多寫多練,學習致用。
其次,做技術的要培養的是自我學習和解決問題的能力。這是看視頻和看教程絕對沒有辦法教會你的。比如說,遇到了問題,該去找哪些關鍵詞?百度的結果中,哪些常用網站的答案是可信的?哪些的方法根本就是錯的?
請教別人的時候,如何能夠快速準確的描述清楚自己的問題呢?
每個人都有自己的學習方式,都有自己無法理解的問題和困擾,這些只能靠真正的寫代碼去實踐出來的。
再次,學習的氛圍很重要,討論交流,同學都在努力學習的氛圍會讓你不自然的向前走。
這同樣是視頻和教程很能給你培訓的啊。沒有人監督,沒有人一起學,很容易被各種各樣的瑣事打斷。
最後,做項目更看重的是編碼規範,交流溝通,協作和進度支持。
這也是各種培訓機構很難帶給你們的。很多培訓機構的老師都只會講課,並不會做項目。
五 該怎麼去學習
===============================
說了這麼多,該怎麼去學習呢。別著急,容我仔細講來。
1.要明白自己學習的目標是什麼。
這裡的學習目標,並不是成為一個CSS工程師之類的,也不是迎娶白富美什麼的,而是一個明確的,專業的目標。
對於CSS工程師來講,要進入公司就必須能夠獨立做項目,必須學會編碼規劃和協作,必須學會自適應和響應式,再學會Bootstrap來了解框架,最後是學習Less擴展視野。
記住了么,如果這些名詞不太熟悉,不要害怕,學習都是有順序的。但是,前提條件是,你必須明白,你會了這些,你才能夠說自己算是CSS入門了,可以獨立去找一份工作了。
2.要有明確的學習規劃
從簡到難,先學什麼,後學什麼,有人帶和沒人帶的差別,就在於這裡。
對於CSS來說,重新回過頭來看看本篇貼子的第二節,這就是你的一個學習的規劃。這就是你要學習的內容。
3.要不斷的用代碼去驗證自己學習的成果
會和不會最直接的方式,就是你能不能做得出來,所以一定是你去做一個任務,然後這個任務呢,包括某種技能和知識點的訓練(玩過遊戲的都會比較熟悉這種方式),在做任務的時候遇到了問題,再去找人交流或者是請教師兄。
能直接寫出來的代碼,會讓你有腳踏實地的感覺,不會心虛。
對於CSS來說,重新回過頭來看看本篇貼子的第二節,這就是你的一個學習的規劃。這就是你要學習的內容。
4.要學會自己去主動解決問題
記著,每一個你遇到的問題,都是你成長的機會。
之前提到過,自己主動解決問題的能力很重要,這是一個程序中的生涯中必不可少的解決問題的方式。所以從一開始就要培養自己在這方面的能力,而這個真的是一種能力。有的人能夠快速找到問題的解決方案,有的人會被一個問題卡很久,每個人的情況都不一樣,早點入手,早點找到更適合自己的方式。
5.要學會自己去和其他人交流請教
其實交流和請教別人,也不是一件簡單的事兒,很多時候你並不能描述清楚你的問題。因為出現問題的原因總是千奇百怪,特別是每個人走的路子不一樣,解決問題的方案也不一樣。因些,最好的方式就是尋找那些剛剛解決過這些問題,比你早走一步的師兄,對他們來說,更樂意去幫助你解決掉這些問題,這也是強化記憶的一種方式。
學會尋找合適的人去請教,描述清楚又不能過多打擾對方,這也是一種能力的訓練。還有,提前認識一些技術上的前輩,他們能給你們的指導和幫助,遠遠超出你的想像。(IT修真院就是提供這麼一種途徑)
6.每天都去總結反饋
不要給自己任何的理由去停止練習,哪怕你什麼都沒做,也要保持記錄日報的習慣(IT修真院的論壇里有很多師兄寫的日報,可以參考,也是我帶IT修真院學員的時候,點評日報是和學員交流的最好方式),你可以發現,自己究竟學會了什麼,又因為什麼阻礙了自己的進度,在什麼地方進步更快。
不斷的反思和總結,會讓你收益頗豐。
7.公開代碼,接受交流
你是一個新人,所以沒什麼可羞澀的。把代碼公開出來,把做出來的效果貼出來,這都是很好的交流方式和心態。
8.注重規範,注重合作,注重交流
在真實項目中,這比什麼都重要,你會發現,當你和三個人一起合作的時候,因為Class命名不統一不規範產生衝突,因為三個人風格不一致導到項目後期維護困難,當需求發生變化的時候你發現自己寫的代碼簡直無法改動,等等等等這些,在剛開始的時候就這麼做,考慮代碼的擴展性和可維護性,否則一旦你養成很多壞習慣,再糾正過來就很難了。
9.在需要的時候再去看視頻和教程
在遇到一些關鍵的節點上,自己解決不了的問題的時候,再去翻閱視頻和教程-我不確定你們是否明白這兩種方式的差別,就是不要跟著教程和視頻走,那樣太慢,不要去做所謂的練習題,對你沒有任何幫助。而是把教程和視頻當成是詞典,你只在需求的時候去查閱它,在自己積累到了一定的困惑的時候,再去梳理和總結。這是我從業近十年以來發現的最快的學習方式。
10.不要太貪心,什麼都想學
嚴格按照任務序列去做,不要太糾結於細節,學會把不會的內容放一放,留在腦袋裡一直讓它困惑。保持足夠的進度,當積攢到一定程度,你發現他成為你學習的瓶頸的時候,再去解決它。
否則你會就迷失到知識的海洋中,根本找不到方向。
11.學會最佳實踐
在做CSS或者是其實的語言的時候,慢慢的你會發現,完成一份工作,總是有很多種方式,很多時候你會困惑,我究竟該用哪些方式好?這個在項目中,就叫做最佳實踐,換句話說。最佳實踐就是無數人走了無數的彎路,告訴你那麼走是走不通的,按照正確的方法走是沒問題的。
然而問題又來了,很多時候都會告訴你正確的路怎麼走,但是為什麼不能走其他的路,並沒有人說。而且,也太多了。
因此我必須要認真的提醒你,先確定自己能用一種方式把問題解決,然後再去尋找更好的方式,這就是你的最佳實踐。等以後有更好的辦法解決問題的時候,再去改進自己的經驗體系。
六 遇到問題怎麼交流
=================================
一般來說,遇到問題往往會有以下幾種解決方案。
1.如果有之前的正確代碼,回滾到正確的代碼上,先確認是哪一行代碼產生的問題。
2.確認你的運行環境,如果是CSS的話,確定是在哪個瀏覽器的哪個版本下出的問題。
3.打開F12,如果有報錯信息,那麼就直接百度報錯信息,先試著理解一下報錯的含義。
4.如果沒有報錯信息,用兩到三個詞來描述你的錯誤現象,查一下百度結果。用最快的速度判斷出來哪些結果有用和沒用。如果沒用,更換關鍵詞,通常你應該做到,在10秒鐘之內至少切換兩到三次關鍵詞。
5.寫清楚自己的環境很困惑的地方,像一個程序員一樣的去問問題,比如說,為什麼我的Nginx配置完正確的路徑之後顯示出來的仍然是默認的歡迎頁面,並沒有切換到我自己的Html頁。而不是像個傻子一樣說,有沒有人會Nginx?為什麼我的Nginx不能用?如果有截圖,截上全屏的圖,不要只截一小塊,真的很煩只截一小塊代碼的沒頭沒腦的圖。
6.先整理問題,再去提問,不要隨便遇到一個問題就各種去找人問,整理清楚自己的困惑,然後發給別人,等他們有時間的時候再回復。
7.查閱相關的資料,用最短的時間確定是否能解決自己的問題。不要迷失,不要一直看下去。有困惑一定要存疑,積累至少一到兩天或者一周(看你困惑的是不是關鍵性的問題)。
8.多寫不同的代碼,多找已有的例子,公開自己的源碼,找固定的學習夥伴,尋找比你剛好多學了一點點的師兄,而不是一定要找一些技術大牛,你遇到的問題,他很難領會到你的困境,因為離菜鳥困惑的時間點太遠了。【我不得不強烈推薦IT修真院,去哪找這麼好的學院找師兄?】
七 下一步學什麼
=====================================================
實際上,當你能通過IT修真院的15個Task,你就已經可以成為一個具有學習能力,了解CSS的整體趨勢,能夠獨立完成一些項目的初級CSS工程師了。接下來就應該偏向於代碼規範,JS,CSS3和Html5的內容。如果想了解更多,就關注IT修真院的微信公眾賬號,開始CSS中級工程師的修真之旅吧。
八 哪些能力是工程師必須掌握的
===============================
通過以上的描述,你們會發現,IT修真院強調有幾個非常關鍵的原則。
1.代碼是寫出來的,不是看出來的。
2.你遇到的問題,恰恰就是你成長的機會。
3.比你剛剛好快一步的師兄,是教導你的最好的老師,並不是水平越高,教你越好。
4.知識是有體系的,在學習的過程中,最忌諱就是方向不清,茫然沒有目標。
5.在遇到問題的時候,快速去尋找相關的解決方案,可以找書,可以找視頻,可以找人請教。而不是反過來,先去看書,看教程,讓人教。
所以,總結出來,CSS工程師(其實所有的IT技術工程師都是通用的)應該具備的能力:
1.獨立解決問題的能力
通過百度,學會如何查找關鍵詞,學會如何快速篩選結果,了解哪些網站的答案真實可用,學會描述問題,定位問題,嘗試不同的方式解決問題。
2.搭建基礎環境的能力
無論做什麼事情,第一步永遠都是搭建最基本的開發環境。這是重要的不能再重要的能力了,程序員可能僅僅是寫代碼,工程師必須是解決問題。
所以環境很重要,包括IDE和各種代碼管理工具和Nginx的使用。
3.反思總結知識體系的能力
每天寫日報來反思自己,每天的進步都看得到。每隔一段時間就總結和回顧一下,對自己的知識體系做梳理,特別是要學會把自己會的內容講給別人聽,這對工程師的成長格外重要,學會把自己會的,不會的列的清清楚楚。
4.溝通協調的能力
工程師是一個不停的和各個角色交互的職務,並不僅僅是面向代碼而已。CSS工程師要學會和產品經理,UI和後端工程師和QA打交道,偶爾還有運維。只是這些都是需要專業的語言而已。
以上這些,都必須是通過寫代碼,做真實的項目才可以完成。當你看完這篇貼子,如果還不相信可以在一個月之內完成這些,就來修真院看看吧,這裡已經有很多人開始了自己的IT修真之旅。
北京葡萄藤.IT修真院 首頁 | IT修真院
===============================
免費,快速,高效的幫助IT新人入門,加QQ群:185354188。微信公眾號:葡萄藤IT技能樹
修真院給你一個精心設計的成長體系,一個熱血的學習氛圍,一個強大的人脈背景,一個免費快速的學習環境。
童鞋,前端這個概念就放一放吧,這個很深的,我覺得先把目標定成:學會基礎的css和html,能編寫可以看的網站,了解其它知識體系比如框架和響應式,能簡單運用,能配合同事協作。(從你的目標上看,我個人覺得1個月時間努力點,能完成第5點就足夠你折騰了)
帶著激情邊學邊用,能不能完成目標因人而異,跨瀏覽器的差異是需要長時間積累的,某幾個css2的屬性也要長時間積累,同時css3很深,也要長時間研究積累。光學css?沒用,你必須配合學習html。糾正下,自適應設計和響應式設計是兩個不同的概念,不能混一鍋粥說都要短時間掌握,不現實。簡單學會能css出個站還是ok的,最好有人帶才能看出很多問題,以前有個同事也是零基礎,那時候我還算熟悉這些,帶他了兩個月寫的東西某些方面比我還好還熟練,不過還是有很多需要積累的,那些問題不可能全部體會和實踐的,他很努力的,比我小一屆。至於要不要響應式,要不要標準化規範化編碼,能否學會更多的知識體系,這個得看自己的努力程度和學習方式了。1個月也得學,半年也得學,兩年也得學,十年也得學,總之,學無止境。
最後,我不是專業做前端的,業餘的,只是需要這門技術的一些東西做工具。不過學習和使用,還是遵循一定要規範化,專業化,也需要掌握非常多的知識,不斷學習先進的東西,掌握到某程度即可,要求沒那麼苛刻,畢竟不靠它吃飯。
一個月的時間,成為一個初級的css前端開發工程師?作為一個混跡前端圈幾年的碼界小姐姐的我來說,我覺得還是蠻難的,畢竟前端這個東西技術的含金量還是蠻高的,不然你覺得關於程序員月入幾萬都是大風吹來的嗎,雖然僅僅只是一個初級的css前端開發工程師,這麼一說弄的好像css很簡單似的(給你一個白眼,自行體會吧。),css也很難的好吧。不過一個月的時間從0基礎到成為一個前端界搬磚的也不是不可以的。
題目說是零基礎,我倒是想知道這個零到底能零到什麼程度呀,這個零也是分段位的好吧,你是A段位,B段位還是C段位,難道是D?電腦屏幕前面的你可以找坑入座了:
① A段位:大學學歷,並且是計算機專業的,但是本著上大學就是吃喝玩樂,撩妹子混社團偶爾也會到課堂上報個到,對著電腦敲過一丟丟的大學生小哥哥或者小姐姐。
② B段位: 大學學歷,大學專業是物流、會計、生物學、石油工程、金融學等等基本跟編程八竿子打不著的專業,只是那天選修的時候不知道哪根筋突然間脫離組織,選修了一門叫做C++、.net。。。的課程的你。
③ C段位:高中或者初中學歷,也不知道從哪個開始,就在人群中聽到或者看到了關於前端相關的新聞、廣告、談話就對前端弄出來的炫酷吊炸天的視覺效果一見鍾情,一發不可收拾,從此以後再也忘不掉,便從網上搜集各種視頻文檔看了好多,也沒有看懂,自己吧又很想把他拿下的。
④ D段位:高中或者初中學歷,大學生活甚至高三都只是別人的青春,而你的青春都是吃飯,睡覺,打遊戲,上班,掙錢,打遊戲,睡覺,上班或者就是吃飯、睡覺、上班、上班、上班、每天都是累死累活的,掙著一份可以養活你、房子、狗的錢。甚至連width、height、color、red、black、yellow、apple這些都要通過百度翻譯、有道詞典才能知道是什麼的。
如果你是A或者B,那麼首先恭喜你,你英文還可以,不然你也考不上大學,哈哈,應該不會被人打吧,還好我拉上窗帘,鎖上門了。嗯,扯了這麼久,該給點乾貨了,不然總覺得我一個人用文字在跟不知道對面是誰的你尬聊。
以下是乾貨,關於在一個月之內從零基礎成為前端界初級CSS搬磚工。
1、代碼編輯器,上戰場打仗是需要武器的,沒有武器那你就等著當做炮灰吧,這邊前端這塊的編輯器有Dreamweaver、Hbuilder、Sublime、Webstorm等等。先把這些軟體怎麼應用搞定吧,你得先把槍調試好了,再研究怎麼不會成為炮灰吧。
2、你得知道什麼html,html的語法是什麼?html怎麼用?常見的html標籤都有哪些?怎麼用?然後隨便打開一個網頁,分析這塊用什麼html標籤,那塊用什麼標籤,比如下圖:
這個是一個百度新聞的新聞信息列表,這個就在html當中的就是用無序列表ul li 來寫的,具體的代碼如下:
&
- &
- &中國人的故事:最美消防員 永遠的衝鋒&&
- &山東女大學生找工作被騙至傳銷 哈師大師生解救&&
- &夫妻開麵館在麵條湯里加罌粟殼 對外宣傳是"秘方"&&
- &官方通報"天價感恩費":收款77萬 校長被停職調查&&
&
&
&
&
再比如同樣是列表,下圖的這個就跟上面不一樣,
這個圖雖然也是列表,但是它前面有序列1,2,3,4,那這樣的一個列表我們可以看出是一個有序列表,那我們用html表示就是
&
- &
- &為何博通發出的千億美元收購邀鄰章&&
- &百度終於不土了,開始變時髦了開八&& &
- &A股接連調整,到底是什麼原因郭施亮&&
- &王小川上市前14年怎麼熬過來無冕財經&&
&
&
&
但是我們僅僅按照上面的代碼寫html的話,我們用瀏覽器來預覽的時候,是這個樣子的,如下圖:
很明顯跟我們真正所要的效果是不一樣的,那這個時候我們就需要根據我們的圖,用css設置成跟圖一樣的效果,進行簡單的字體顏色,字型大小大小,行高等相關的修飾。所以接下來你就要進行第3步驟了
3、什麼是css?css的語法是什麼?css的引入方式都有哪些?css選擇器都有哪些?不同的css選擇器瀏覽器是怎麼解析的?什麼是css權重?等等
4、常用的css屬性都有哪些?比如字型大小大小是font-size、字體顏色是color、背景顏色是background-color、行高是line-height、邊框是border等一些常用的css屬性,這樣我們就可以根據設計圖來修飾我們的html結構了。下圖是剛才對於上面列表進行了簡單修飾:
&
5、如果開發過程中遇到問題怎麼交流?在這裡給大家分享幾個在開發過程中遇到問題後解決問題的方法:
① 先確認是哪一行代碼產生的問題,然後用谷歌或者火狐瀏覽器打開你的當前頁面,打開F12,如果有報錯信息,這個時候可以百度一下報錯信息,嘗試著慢慢去理解報錯的意思;如果沒有報錯信息,就用簡單的幾個詞語來描述一下錯誤現象,百度一下結果,然後快速的篩選一下哪些結果是不是有用的,如果沒有用的,再次重新輸入一個描述詞,依次這樣重複查詢。
② 用簡單明了的語言描述下自己疑惑的地方,比如說我當前的div設置了背景圖,我給了寬和高,也引入了背景圖,但是瀏覽器上就是沒有顯示背景圖。而不是說有沒有會css設置背景圖的,為什麼我的背景圖沒有了?如果你可以截圖的話,最好是可以截圖給別人,如果你能夠截全屏就更好了,而不是僅僅是截圖截了一丟丟的3行代碼,就好像你正走在街上一個陌生的妹子對你說,帥哥,你給我手機打個電話,看看有沒有人接,要是我是那個帥哥我肯定說,你傻缺呀,倒是告訴我你的電話號碼呀,不然我怎麼打。或許這個妹子僅僅是在跟你搭訕而已。
③ 學會利用瀏覽器的F12多去看看別人是怎麼寫代碼的,找一個固定的學習上的小夥伴,這個小夥伴最好是比你的水平高一點點,而不是技術很好很好的大神,因為你遇到的問題,大神或許很難領會到你的困境,畢竟大神距離菜鳥那是很久很久了。
6、最後你還需要很多的時間去不斷的多模仿別人的頁面,嘗試著寫不同類型的頁面,電商的,企業站,視頻站,博客站等。從中不斷總結出現的錯誤和解決方法,甚至頁面書寫的小技巧。
如果你是C或者是D段位的,你可能比A和B段位的要辛苦一點點,面對一堆的英文單詞,你首先要做的是用一些翻譯軟體,先把單詞的讀音和基本含義掌握了,再按照上面的步驟一點點來了。
簡單,百度搜索21天學會html,21天學會css,21天學會javascript,早中晚換著學,還能多出9天可以休息。
別介啊,一個月都自稱工程師了,你讓我這種工作快兩年的都不敢自稱攻城獅的 搬磚狗怎麼活啊!
猶記得我剛學習css的時候下載了一份css2.1 chm 手冊,全部從頭到尾實踐了一遍,並瞭然於心。
也不敢跟人說自己學會 css 了。
替 工程師 三個字心疼
最近很多人問我如何入門前端,思考了一下,為了幫更多的學生輕鬆入門,我打算搞一些課程,有興趣的可以加群,604721822
-------------------------
有可能的,重點是你能花多少時間以及你能不能堅持。
一個月時間你完全可以把w3c schools上面關於html,css,js的內容跟著他的教程做一遍,這一遍做完你就可以完成簡單的頁面了。然後你要知道如何使用搜索解決遇到的問題。
這一過程是及其枯燥以及令人煩躁的。但是你堅持下來就會有收穫。我現在是前端培訓講師,過段時間來詳細回答下。
英語專業,花了一下午學了html,然後一上午學了css,都是w3school上看的。之後老師(英語老師)給了個學院網站的任務,花了七天學了一下php,教程是w3school+php100,然後做出一個能用的還算美觀的網站。那時不知道有wordpress,dedecms之類的成熟系統,造過好多輪子。
一個月完全可以學的不錯的。
建議w3school先過一遍基礎,然後模仿一些簡單頁面。html+css跟office word沒啥大區別,會word就很好理解了。
補充…英語一定要好大量資源通過看w3c和官方tutorial 獲得。看完其他回答我發現英語好真的重要。讓你免於被收智商稅…
原回答
如果把css初級工程師定義為如下
那麼實現這些用不到一個星期…
至於為什麼這麼快 因為css不是programming language不用動腦子
1.首先學會html5 去看w3c school html5 是hypertext markup language 算不上編程語言… 熟悉一下tag,然後隨便找幾個網站inspect熟悉一下規範 大約1天
1.9. 明白css3 大致原理…大約半天
2. 熟悉css3的attribute. 明白一些重要細節像是 float, relative/absolute position ,box size 所以還是看w3c 1天
3. responsive design 明白12-grid-layout 如果不用bootstrap,去看media query attribute.
大約一個上午…
4. 學習bootstrap. btstrp是很強的框架。去看官網上的tutorial…一天
5. 剩下時間多練習,做幾個restaurant menu page,這時候如果有記不清的去看tutorial…大概寫4個page之後就會很熟煉了…算一天
6. 剩下兩天半去多讀多抄優秀網站的代碼…
這樣就滿足了題主的要求…成為了一個初級 css 工程師…
這個答案下已經變成了各門各戶的廣告貼了
首先,請將題目中的初級Web前端開發工程師改為網頁製作或者網頁重構。根據描述的能力,這不是真正的web前端開發工程師,而是網頁製作。
其次題主問的一個月達到這個水平,基本不太可能(我說的是前端小白)。html+css沒有題主想像的那麼簡單,當然相對於js而言也沒有那麼難。學習的路上沒有捷徑。一個月能達到題主說的第一項就已經很成功了。
雖然我不懂,但是我知道冰凍三尺非一日之寒
讓我想起了銷售工程師。
這主要看你的時間投入和理解能力啦,htmlcss入門還是很簡單的,如果你理解能力不是很差,每天拿出三四個小時去學一個月能寫不錯的靜態頁面完全沒問題,擼過一遍w3school教程,仿寫幾個頁面,再寫幾張設計圖,前端靜態頁面基本無壓力啦。但個人覺得題主這樣不能稱為初級前端吧,前端不能說博大精深,但要學的東西也相當的廣,也需要一定的深度,所以題主這樣只是入門罷了。
我當初學CSS7天,jquery10天,bootstrap學了兩天決定做UI去了。
整天整天的學,一個月學完js問題都不大,前提是你要2遍之內過一個知識點。我當時一大半都是一遍過的。
找個人一起學更好。
欲速則不達,什麼一個月工程師,一個星期成專家,這真那麼簡單可能現在的大部分程序員都轉行掃大街了。
w3cschool
推薦閱讀:
※前端工程師是一個無關緊要的職位嗎?
※前端現在怎麼這麼多人?
※如何系統地學習Node.js?
※如何看待 TJ 宣布退出 Node.js 開發,轉向 Go?
※如何評價 Riot.js?
TAG:HTML | CSS | JavaScript | HTML5 | CSS3 |