基本6個月足夠了，建議學習流程：

第一步：先花上一個月的時間把w3cschool上HTML/CSS和Javascript模塊的教程學完。

學習方法：

1）把HTML/CSS和Javascript模塊里面的知識點分拆到每一天，每天只需要完成這么多，堅持下去。

2）每個知識點完成以后，網站上有個測試的功能，測試一下自己學習的怎么樣了。

3）先不用著急進行網站頁面的設計和開發，先找找哪些網頁用到了這個東西，看看人家前端代碼怎么寫的。

第二步：再花上一個月的時間做幾個不同風格布局的仿站練練手，找最簡單的開始，先把網站分解，分配到每天幾個頁面去做，不會的話就參考他們的網頁源代碼，圖片也用他們現成的。

第三步：從網上找psd格式的網頁設計搞，根據網上的教程學學如何切圖，然后根據網頁設計稿完成Web界面開發。

完成上面的步驟，你基本上就可以算是菜鳥網頁開發了。下面開始向前端進發：

第四步：學習Jquery、AngularJS、React、Bootstrap等前端框架，這個可以按照文檔、DEMO、練習、仿站的步驟去學。PC端和移動端都做幾個仿站。這個步驟算是攻堅階段，做仿站的時候最好挑一些簡單但是完整的應用去仿。一個框架根據情況需要一兩個月學習和實踐。

完成這一步你應該就算是菜鳥前端了

第五步：如果覺得自己可以上手了，去找些接私活的網站試試接點私活吧，從最簡單的開始，可以在上面找一個美工合作，你會遇到非常多的問題，這些問題就是你工作以后會遇到的問題，耐心的分析和解決每一個問題，會給你進入職場提供很大的幫助。

登錄界面首先是html模塊部分，用標簽制作出登錄入口，CSS模塊把登錄入口美化，提升用戶體驗效果，js模塊用于登錄動作的執行，數據與后臺的交互。

區分web前端，我們先要明確前端開發的定義。前端開發：創建Web頁面或app等前端界面呈現給用戶的過程，通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互。下面再來具體說明web前端與H5前端的定義。

1.web前端：web前端也叫網頁制作，是通過前端相關技術來創建web網頁的過程。

2.H5前端：H5前端是指通過html標記語言來制作網頁的過程。總結可得，web前端包含H5前端。你明白了嗎？