參考六角學院的前端技能樹(2018版)

建議多描述一些您目前職位所要做的工作內容
會有更詳細的建議~

小孩子才做選擇 (誤

其實真的要走前端,
Html, CSS, JS是必修,
其他是選修,
如果是找工作,
就看工作需要什麼,
目前比較流行的框架是 React, Vue 跟 Angular(這個好像相對比較少聽到),
jQuery以前很流行,
但是如果用了框架基本上就沒在用jQuery,
如果沒有框架jQuery也可以當作必修,

BootStrap是方便,
但是好像很多工程師不推薦,
尤其是如果要做客製化,
基本上都還是要自己刻.
那個通常是拿來作後台,
不會要求畫面的時候用的.

至於你說的PHP那是後端語言,
後端語言的選擇性就更多了,
如果你要走純前端可以先忽略.

你必須征服
大魔王(IE)
次要魔王(Safari)
波利(GOOGLE)

先打贏波利再說

網頁三元素
html css JavaScript

html:

<p>My first paragraph.</p>

css:

#app{
color:red;
}

<p id="app">My first paragraph.</p>

JavaScript:
可以用 function 啦 button 啦 來做一些簡單的互動
也可以做到運算的部分

程式碼

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

https://www.w3schools.com/js/js_intro.asp

(竟然不給我放gif.....)
連結進去後點 (try it Yorself)試看看

bootstrap:
Bootstrap是一組用於網站和網路應用程式開發的開源前端框架，包括HTML、CSS及JavaScript的框架，提供字體排印、表單、按鈕、導航及其他各種元件及Javascript擴充套件，旨在使動態網頁和Web應用的開發更加容易。

簡單來說就是用少少的程式碼就讓你的網頁元素變得美美的

必須引用：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

範例：
https://www.w3schools.com/bootstrap/bootstrap_buttons.asp

bootstrap 可以鑽的很深、很精

JavaScript 有很多很多的延伸 Canvas 是我個人認為比較有趣的部份

範例：神Q超人的
[筆記][HTML][JavaScript]canvas的基本用法(3)-最後用滑鼠互動動畫做個結尾！
https://ithelp.ithome.com.tw/articles/10198838

程式碼的部分比較長一點點，但熟悉後難度並不高

PHP的部分若要自學，準備的工作會比較複雜，會牽扯到一些環境設定的部分
Apache 還有 XAMPP，說單純不會很單純、說複雜也不會太複雜

推薦可以自習的網站：
https://www.w3schools.com/

如果有心要學 其實還是花點錢 到教室去上課比較快
當然線上課程也是很棒的 也是可以考慮的

其實 應該問的是...你想學的方向是什麼？
你的需求是往哪邊看呢？

寫程式有百百種，開發網站程式不一定就算前端，主要是看你的工作相關性，最快的方式，只需加強你不熟的地方。

我本身是負責開發銀行信用卡網站，也只會基礎的 HTML, CSS, Javascript, Bootstrap, JQuery, ASP.NET, ASP.NET WebAPI, C#。

Bootstrap 基本上是 HTML + CSS + Javascript 的框架，實際上不只如此。而 PHP 算是一種前端 + 後端的程式語言框架。

所以，你的下一步應該就是學習 Javascript。

這個可以參考
https://github.com/goodjack/developer-roadmap-chinese

比較
https://2019.stateofcss.com/technologies/css-frameworks/

學習進度條 :
HTML > CSS > JS/JQuery

還有一個我沒有的 :
設計美感

推薦學習網站: w3school

先不管前端後端，在Web技術上，你會需要知道http協議，可以從RFC2616開始。對於技術背景不強的人開始會吃力，但是有需要知道相關知識。如果你有辦法用telnet連上http伺服器取得網頁的html，那就差不多有一定的熟悉度了。

要做出真正可以應用的東西，html / css / javascript + DOM缺一不可，你就一起學吧。

前面三個不一定要到精通，可能過一段時間你就會發現有框架跟Library會很方便，這時候就來學jQuery, Angular, React, Vue等東西。

做出來的東西好不好用，就跟使用者的體驗有關係。建議接觸一下UX，至少有概念。不要只一味陷在技術裡，而且並不是設計上很有美感的東西就會好用。

Canvas 2D, WebGL, Web Audio, WebSocket, WebRTC ... 等等許多API，會有特定應用的範疇，有些實做也有困難度，等到有需要或有空閒再來接觸也無妨。

更進一步是ASM.js、WebAssembly等等，可以考慮等到Javascript及其執行原理夠精通了再來接觸。也有特定應用場景（例如挖礦、遊戲等）。WebGL還有偏門的應用，就是透過Shader語言來使用GPU做計算之類。通常這部份都是有人把一些解決方案移植到瀏覽器執行（例如一些用C語言寫的程式庫或工具），然後你可以透過Javascript來使用之類。

各種技術都是因應需求而產生的，等到有需求再學也無妨，但是基礎都是要夠熟悉的。

其實樓上們講都太細了

如果什麼都不懂就是去
youtube 找 php（或你聽過的語言）blog

照影片教學抄，人家寫什麼你就抄什麼不懂就是去查，
影片尤其是英文的最好，有些是很神的大大的教學影片，很多code guide 撰寫觀念都能打很好的基礎

https://www.youtube.com/user/TechGuyWeb

我目前覺得很不錯的頻道
抄過一遍你就知道上面大大在講什麼了