學習該如何開發 Web

欢迎来到MDN 的「学习专区(Learning Area)」. 本系列文章将提供撰写程式码的必要网站,让刚接触的新手也能开发Web.

MDN 学习专区不是要让「初学者」变成「专家」;而是想让「初学者」能够更怡然自得. 你在这里可完全安排自己的进度,逐步探索MDN的其他部分 ,再接触进阶资源来堆砌之前所习得的知识.

如果你是完全的新手,那Web 开发过程可能颇有难度. 我们希望能带领你轻松学习,另提供相关细节以培养你的正确观念. 不论你是要学习Web 开发(自学或参与课程)的学生、寻找教材的老师、纯粹兴趣使然的业余工程师,甚至只是想进一步了解Web 技术的人,都希望你在这里就像在家里一样自在.

重要:此學習專區將定期新增更多資訊。如果你希望能納入其他自己感興趣的主題,或覺得某個地方尚有缺漏,請到下方的聯絡我們尋找相關資訊並取得聯繫。

入門

  • 完全新手:如果你正打算接触Web开发,我们建议先从提供了实用Web开发介绍的入门Web模组.
  • 特殊问题:如果你对Web开发有着特殊问题, 常见问题可能有你所需要的资讯.
  • 基礎以外:如果你已經具備基本知識,則下一步就是了解 HTMLCSS 的細節。可從HTML 介紹模組著手,再進到CSS 介紹
  • 写些脚本:如果你娴熟HTML与CSS或想动手写程式码,要不要去JavaScript或伺服器端语言那边看看呢──就从我们的JavaScript起步走伺服器端程式设计起步走开始吧.

注意:我們的字彙庫另提供專有名詞的定義。

随机词汇表条目

通訊埠
对使用IP address连线到网路的电脑来说, 通讯埠是传输时的端点. 我们可用不同的数字(通讯埠号)来分辨不同的通讯埠,而小于1024号的每个埠通常都有自己预设使用的protocol .

涵蓋主題

以下是MDN 学习专区内涵盖的主题清单.

Web 入門
針對完全新手提供實際介紹。
HTML:構建 Web
HTML 是构建不同区域的内容、还有定义这些区域意义和用途的语言. 这个主题详述了HTML.
CSS:打扮 Web
CSS 是用来妆点和编排web 内容、添加动画行为之类的语言. 这个主题总括CSS 的一切.
JavaScript:動態用戶端腳本
JavaScript 是给网页添加动态功能的语言. 这个主题会教你要自在理解并撰写JavaScript 所需的一切.
無障礙網頁:讓大家都能用上 Web
无障碍网页是给尽可能给任何人提供Web 内容的做法,无论那个人是否受障碍、设备、地点、或其他原因影响. 这个主题提供你需要知道的一切.
工具與測試
這個主題介紹開發者用來改善工作的工具,如跨瀏覽器測試工具。
伺服端網站程式設計
就算对用户端Web 开发熟悉了,理解伺服器和伺服器端程式如何做动是很有用的. 这个主题提供了伺服器端做动原理的总体介绍,并借着两大热门框架──Django(Python)与Express(node.js)──详细说明如何建立伺服器端app.

取得我們的範例程式碼

在學習專區看到的所有程式碼都放在 GitHub 上了。如果想把它們複製到自己的電腦,最簡單的方法是:

  1. 在电脑上安装Git . 这个版本控制系统,是GitHub 运作的基础.
  2. 在 GitHub 註冊一個帳號。很簡單的。
  3. 註冊好後用自己的帳密登入 github.com
  4. 开启你的命令提示字元 (Windows)(译注:如果使用Windows 7以后,建议使用Powershell )或是终端机( LinuxMacOSX
  5. 要把学习专区的repo 透过命令提示字元/终端机复制到目录里面,称作learning-area 的资料夹,只要键入以下指令:
      git clone https://github.com/mdn/learning-area 
  6. 現在你能透過檔案管理員或 cd 指令進入目錄,找到想要的檔案了。

你可以在GitHub的learning-area repository做任何更新,只要这么做:

  1. 在命令提示字元/終端機裡面,用 cd 進到 learning-area 目錄,例如說你要是在上一層目錄的話:
    cd learning-area
  2. 用这个指令更新repository:
      git pull 

隨機了解常見的相關術語

偽元素
CSS中的偽元素選擇器可被應用在當HTML內沒有特定元素可以選擇,且文件內容需套用格式的時候。舉例來說,與其將每個段落的第一個字變成獨立元素,你也可選擇利用 p::first-letter的寫法選擇各段首字。

聯絡我們

如果你想向我們詢問任何事情,最快的方式就是透過學習專區討論串IRC 頻道留下訊息。不論你覺得網站有哪個地方做錯或缺漏,想看到新的學習主題、對自己不了解的地方尋求協助,或其他疑難雜症,都歡迎你提供意見給我們。

如果你想帮我们添增\改善内容,则请先了解该如何协助并联络我们! 不论你是学生、教师、Web 开发老手,或是想帮我们改善学习经验,都欢迎和我们联络.

另可參閱

Mozilla Developer Newsletter
我們針對網頁開發者發行的電子報,對於所有程度的開發者都是很好的學習資源。
EXLskills 
免費和開放的課程,學習技術技能,指導和基於項目的學習
Codecademy
絕妙的互動式網站,可從頭開始學習程式設計語言。
Code.org
基本的編碼理論與實作,主要為孩童與初學者所設計。
freeCodeCamp.com
富含教學與專案實做的互動式網路開發學習網站。
Web Literacy Map
Web 素养与21 世纪常见技术的入门,亦已分门别类提供教学活动.
Teaching activities
由Mozilla 基金会所设计的一系列教学(与学习) 活动,涵盖JavaScript 的基本Web 素养与隐私概念,并可尝试开发Minecraft.