你說就是想學著玩，這樣的話，我不太建議你學習。
我身邊的同學，從C語言到JAVA到前端開發，學了有將近3年的時間。畢竟我們的專業不是軟件過程，只能自學或者在外面報班。我當時也在外面報班了，我學了有1年半的時間，花了有4千元左右。最后我沒有學，主要是對編程真的不來電，發現對互聯網產品和運營更感興趣。
當然，不止學習了這3個方面的知識，還有C++,數據結構，操作系統，JSP+Servlet+JavaBean，Struts+Hibernate+Spring，Ajax。這些都是前期的課程，具體確定你的工作方向后，還要學習你方向的知識。大家不要認為學前面的沒有用。學習編程，建立一套編程思想是最重要的，用程序員的思考方式去思考問題。后面的各種編程語言其實都是建立在前面的基礎之上，所以掌握編程的核心，萬變不離其宗。即使后面有新的編程語言，學習起來也不是太困難。
你要做的有以下幾步：
了解前端網站的開發和開發分為前端和后端兩個部分。前端主要負責實現可視化和交互效果，并與服務器通信完成業務邏輯。其核心價值在于追求用戶體驗。
知道前端的工作流程：
基礎學習【急于求成的，可以略過】在這里，我只介紹入門級別的web前端，至于進階過程，等你工作了，領導和生活會逼著你學習。
我看過一些培訓機構，他們大多數都是直接教前端編程需要的H5、CSS3、Javascript、等等，不會教編程的基本基礎。宣傳基本上都是3個月掌握前端之類的。要知道，這就是為什么企業寧愿招生本科是計算機相關專業的學生的原因？大學4年，除去大四，一般大學的課程都是先打基礎，再上專業基礎課，再上專業課，再上專業選修課。這樣上的好處就是專業基礎很好。而那些3個月就出師的培訓機構，是直接就教你編程，在最后幾周，給你教一個項目，一些面試技巧，然后你憑著這個去找工作。工作找到了，老板讓你負責項目里的一小塊，這個時候，會出現很多問題。大家不要覺得荒唐，我一個高中同學就是這樣的，最后在公司里呆了一周，主動辭職，又開始自學了。
我說這個的原因是，如果你打算以后靠這個工作，而且有一顆上進的心。我建議你：
學習C語言。別問我為什么，我就是覺得一個程序員應該要學過C語言，牛逼不牛逼是另外一會事兒，況且很多書都是用的C語言描述。別光學語法，弄清編譯是什么，鏈接是什么，指針是又怎么一會事兒。
學習數據結構和簡單的算法。你看，你學完C語言就能學數據結構和算法了，我難以想象用 php 來描述數據結構和算法會有多么地奇怪。如果你覺得學了之后還是不知道數據結構究竟是什么，有什么用，那證明你還沒有真的學到。
學習一門面向對象的靜態編程語言。推薦 Java。學得有多好，就看你花了多少時間了。請務必仔細閱讀各類相關書籍，深刻領會面向對象的重要編程思想（不過，切忌迷信面向對象編程）。
學習操作系統和計算機網絡。至少一些基本的概念需要弄清楚，具體的細節，沒有必要過于糾結。
進入前端學習基礎：推薦一個學習網站：FreeCodeCamp.cn
它是一個專門為0基礎學習者準備的網站，從0開始學習WEB。課程設置很平滑，先是一些理論，然后是一些小實踐，像打游戲一樣，要一關一關的打通關。還有團隊合作，你可以和你的小伙伴一起做一些任務，小項目。關鍵是，你完成課程后，會給你頒發證書，就像對你學習過程的記錄。
我覺得這個很適合，自制力不太高的學習者。前端總共學習400個小時，還有其他編程系統課。如果你想提升自己，也可以學習。
用 HTML + CSS 模仿幾個漂亮的靜態頁面。
當你看到現在大部分的網頁都覺得能大概猜到怎樣做，并且花時間真的能做出來的時候，即可進入下一步。注意，這個時候請你不要管瀏覽器兼容性或者太過注意代碼的優雅結構，因為沒必要。做到能兼容現代瀏覽器，內容和樣式基本完全分離即可。這大概需要半個月到一個月的學習時間。
用 HTML + CSS + JS 寫幾個有交互的頁面。
例如，你可以寫一個漂亮的注冊頁面，它能夠驗證各種輸入是否符合條件并且有一個用原生 JS 實現的日期選擇器（Date Picker）。或者，寫一個漂亮的，有動畫的相冊。注意，這個階段請使用原生 JavaScript。同樣的，兼容現代瀏覽器即可。這大概需要半個月的學習時間。
入門一門后端語言。
以前的工程師必須知道至少一種后端語言，但如果愛好也可以深入研究，那么較低的難度應該是PHP。這一部分可以分為基于兩個框架的頁面。大型項目基于框架開發。建議了解至少一種MVC框架，如PHP的CI，Yii，YAF，等，和框架的設計思想非常相似。現在NodeJs已經被廣泛的應用于大企業，并建議人們使用表達框架節點做一些后端服務。
入門一個關系數據庫。
比如說 MySQL。DDL 和 CRUD ，請一定要熟練。恩，這個階段不要談什么優化，那是扯淡。現在，你大概可以做一個多用戶的博客程序了。這大概需要半個月的時間。
交互設計
最前面已經介紹了，前端的工作主要是實現界面美化和交互體驗。什么是交互？交互的對象就是用戶，給用戶好的體驗。給你推薦幾本我看過的書：
《用戶體驗要素》
《About Face 3 交互設計精髓》
《簡約至上》
我相信有很多人和我一樣，下了一個APP，發現：什么界面嗎？好難看？想找一個東西不好找。功能塊的區分不明顯等等，這些都是交互的事。
以上就是前端工程師的入門階段。如果對你有用，請點個贊吧！如果你有不同的想法，可以留言，我會回復的。
使用vue或者react的前端開發流程一般分為下面5步（僅供參考）：
1.評需求 2.美工出圖，前端架構，mock,寫出基礎組件 3.搭出整體框架 4.業務代碼 5.樣式走查
1.找個差不多的頁面拷過來
2.按實際業務調整
3.調試看看效果
4.出錯或效果不好，改正確
5.重復3，直到所有人滿意
我是搞winform開發的，前端開發應該也是這么回事吧。我們前端都是自己搞定的，客戶喜歡就好，管它好不好看。