Udemy

2022網頁開發全攻略(HTML, CSS, JavaScript, React, SQL, Node, more)

Enroll Now
  • 11,713 Students
  • Updated 9/2025
4.6
(2,879 Ratings)
CTgoodjobs selects quality courses to enhance professionals' competitiveness. By purchasing courses through links on our site, we may receive an affiliate commission.

Course Information

Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
23 Hour(s) 0 Minute(s)
Language
Mandarin
Taught by
Wilson Ren
Rating
4.6
(2,879 Ratings)
3 views

Course Overview

2022網頁開發全攻略(HTML, CSS, JavaScript, React, SQL, Node, more)

超過65小時,你需要的唯一網頁開發課程 - 學習前端與後端知識,成為網頁全端工程師。內容包含HTML, CSS, JavaScript, React, Node.js, MongoDB, AND MORE!

超過65小時的重量級課程,此2022網頁開發全攻略課程會一步一步帶者你走,讓你能夠從頭開始架設屬於你自己的網頁! 你不需要有任何的程式設計經驗,也不需要有相關的背景知識。此課程包含網頁前端與後端所需內容,帶你成為網頁全端工程師。手把手教學的課程,讓你從網頁前端學到網頁後端,建立使用者介面到連結資料庫,建立任何你想要的美觀網站! Udemy上面有許多課程,但此課程是你唯一需要的網頁開發課程!!

耗時5個月的構思與準備,加上設計與影片製作,這堂課包含所有你需要的工具與知識,來成為一位網頁前端加後端工程師,製作出任何你要的功能,連結資料庫,做出精美與功能性高的網站。

本課程講解各種現代開發工具以及應用原則,讓你不論身在何處都可以隨時隨地的學習最新知識。詳細的解說,讓你從初學者到建站大師! 所有project皆提供原始碼與教學,讓你輕鬆動手寫程式! 不用花大錢,即可由簡入深學習到許多開發技巧和debug觀念!

你應該要註冊這堂課的理由:

  • 課程教材適合不同程度的人,不論你的基礎為何,此課程由簡入深學習所有必要資訊!

  • 課程涵蓋大量其他課程沒有的資訊,讓你完全了解所有程式碼的運作原理與概念。

  • 不用花大錢,就能學習超過65小時的網頁開發大百科。

  • Project練習設計美觀,且能夠活用所學習到的程式概念。


在這堂課程結束之後,你將能夠使用:

  • VS Code與專業Extensions

  • HTML5

  • CSS3

  • JavaScript

  • Flexbox and SCSS

  • ES6 語法

  • 了解DOM, Hoisting, Scope, Closure, Prototype Inheritance, execution context, callbacks, this keyword等進階JS觀念與運用

  • Bootstrap

  • Unix Command, Git, and GitHub

  • Figma

  • Node.js

  • Express.js

  • EJS (Embedded JavaScript Templating)

  • Git, GitHub, Version Control

  • SQL

  • MongoDB

  • Mongoose

  • Restful API

  • Authentication

  • Cryptography

  • React

  • JSON Web Token (JWT)

  • MERN Project

Course Content

  • 10 section(s)
  • 561 lecture(s)
  • Section 1 課程準備
  • Section 2 網路基本原理
  • Section 3 HTML - 1
  • Section 4 HTML - 2
  • Section 5 CSS - 1
  • Section 6 CSS - 2
  • Section 7 CSS - 3
  • Section 8 進階 HTML、 CSS (Flexbox解說)
  • Section 9 Project 1 - 台灣經濟歷史發展
  • Section 10 Responsive Web Design

What You’ll Learn

  • 學習所有前端後端必要知識與技能,轉職成為工程師
  • 充分使用HTML5、CSS、JavaScript來製作網頁架構與功能,增加網頁使用性與靈活性,寫出運作優良且穩定性高的 JS 程式碼
  • 創造有形與富有現代設計感的優質網站,增加網站曝光度與實用性
  • 使用最新CSS styling技術,例如: Flexbox、SCSS,來對網頁設計達到事半功倍效果
  • 用Figma做出網頁架構藍圖,並做出網頁樣板與精美圖形
  • 學習響應式網頁設計 (Responsive Web Design),讓網頁在不同裝置上仍保持美觀與實用
  • 了解進階JavaScript,了解JS當中奇怪的部分,例如 Scope, Hoisting, Hoisting, Scope, Closure, Prototype Inheritance, execution context, callbacks, this keyword
  • 使用NodeJS + ExpressJS 製作出網頁後端伺服器,根據使用者需求展現不同功能的網頁
  • 使用Embedded JavaScript Template來做網頁內容控制
  • 使用Unix Command快速在電腦中架構出文件與開發必要工具
  • 深度了解JavaScript, 學會variables, functions, loop, arrays, objects, primitive data types, reference data types等重要觀念
  • 使用MongoDB資料獲得與更新,並整理與整合資料庫中所有重要資料
  • 使用Mongoose在網頁中獲取MongoDB資料,來建立與使用者身分相關的功能性商業網站
  • 學會SQL語法與資料庫概念,包含keys and query,了解資料庫相互連接概念
  • 從零開始,一步步製作出Restful API
  • 充分了解伺服器錯誤,以及做出相對應的處理邏輯與文件
  • 使用Cookies and Sessions,記錄使用者的登入資訊,大幅網頁使用者的使用體驗
  • 建立登入頁面,將使用者資料與密碼加密並儲存在資料庫中
  • 製作7個美觀且實用度高的網站,成為面試作品的一大利器
  • 製作出個人專屬網頁,展開人脈與互動連結
  • 了解並且運用AJAX語法,從API獲取資料並且運用於網站當中
  • 使用良好的程式語法,讓網頁在Firefox, Chrome, Microsoft Edge, Safari等主流網站都流暢運行
  • 學會加密資料庫,保護使用者資料安全,提高資料隱密性與資訊安全性
  • 像開發人員一樣思考。成為問題解決的專家!
  • 了解DOM的語言架構與相關函數
  • 認識近代密碼學的數學邏輯以及Hash Function在加密資料庫的全端應用
  • 了解電腦儲存顏色與資料方式,認識二元數編碼原理與邏輯
  • 了解駭客的基本操作與背後工作原理
  • 從製圖開始,在網頁中加入精美動畫效果
  • 了解HTTP Status Code,製作出可以送出不同種類Status Code的網站伺服器
  • 使用Postman來對API做資料確認與使用

Reviews

  • 陳怡伶
    5.0

    適合,講解清楚

  • J
    Jason Chang
    5.0

    十分推薦Wilson REN 老師的課程,我選擇的是2022課程有些部分已經太久了不適用了,但是這也算是一種培養自身搜尋與解決問題的能力,當你每次在懷疑自己怎麽這麽笨的時候,相信我,你并不孤單,懷疑自己到剋服是一種過程,我相信也會是往後想往網頁開發的一部分。

  • J
    Jason Chen
    1.0

    我完成全部的課程了,但是不推薦新手上這堂課。老師很多地方重要細節都跳過不講,很多講解也不夠清楚,過程中我花了很多時間在查資料和做測試。 雖然是中文課程,但上課簡報內容幾乎都是英文,用英文解釋英文名詞,老師回答你的問題可能也會用英文。 後面在教第三方套件的地方,是這堂課的重點。老師只教你程式碼怎麼寫,不會講解套件背後的運作邏輯是什麼,你只能用背的,也不知道為什麼要這樣寫。 Mongoose 那邊,處理一個非同步事件,混用 try catch 和 .then() .catch(),讓程式碼看起來超複雜。

  • s
    show .js
    1.0

    因為看到評價很好而買了這個課程,但愈到後面愈聽不懂,會因此懷疑是不是自己不適合學程式,但在上了其他的線上課程後,才發覺原來是這個課程不適合我,花了四個月的時間,撐到 AJAX 那邊就棄課了。對於完全新手的人,我完全不推薦這門課程,已有基礎的人用來複習倒是可以。 很多觀念常常講的不夠清楚,必須查更多文章和資料才能釐清觀念,無形中浪費了好多好多時間,我只舉其中幾個例子: 1. 在 constructure function 中的 this 講的不夠清楚,我是看https://pjchender.blogspot.com/2016/06/javascriptfunction-constructornew.html 這篇文章才豁然開朗 2. 在 async 和 sync code 中沒有談到 task queue 和 event loop,我是看https://www.freecodecamp.org/news/synchronous-vs-asynchronous-in-javascript/,深入淺出的解說,非常好懂 3. async code 解決方案如果能用同一個範例,然後分別用 callback function、promise 物件、async/await 這三種寫法去解釋會更好,例如 https://github.com/cwpeng/live-records-samples/blob/master/samples/callback-promise-async-await.html 課程前面有重點整理,但到後面都沒有了。希望能在每個觀念或一系列相關觀念的最後有一個精簡的 summary,例如: 1. prototype inheritance : - 繼承另一個函數的屬性:`call() this` - 繼承另一個函數的方法:`Object.create()` 2. 關於 this - 一般函數:this 會是 windows - 建構函數:this 會是 instance 物件 - 物件方法:this 會是方法的物件 - 自行設定 this:使用 apply、call 上課的ppt都是英文,是蠻好的原文訓練,可是本來這些名詞定義就很難懂很抽象,都要等到後面的例子說完才了解,很多時候是例子講完了還是聽不懂… 還有哪些地方講的不清楚?看某些章節的問答區,有很多人問一樣的問題就知道了 唉…不說了

Start FollowingSee all

We use cookies to enhance your experience on our website. Please read and confirm your agreement to our Privacy Policy and Terms and Conditions before continue to browse our website.

Read and Agreed