# 第7課 課程目標 正式完成一個屬於自己的個人網頁 讓這個網頁真正上線 # 第7課 課程內容 在第6課中，你學會了網站架設需要擺放的檔案。 這次要試著利用網路上的主機資源，將網站正式上線。 請學習使用 Glitch ，並將網站架在上面： https://glitch.com/ # 第7課 作業 不論你是學生、上班族、公司經營者，有一個自己的個人網頁、線上履歷表，都是非常令人印象深刻的！ 這次的作業要請你做出這個屬於自己的個人網頁！ 請全力將這個網頁做好，下次求職、面試、與人談合作…等等需要介紹自己的場合，就可以將這個頁面寄給對方看了！ 請上網搜尋各種個人網頁的範例，做出自己喜歡的個人網頁、個人線上履歷 參考網站：https://onepagelove.com/gallery/resume 完成之後，您已經能夠獨自從無到有做出一個完整的靜態網站。
# 第6課 課程目標 正式在自己電腦上寫網頁 不再需要依靠jsfiddle來寫網頁 # 第6課 課程內容 前五課都是用jsfiddle來學習，先跳過了環境設定的問題。 這次的課程要練習正式在自己電腦上寫網頁。 其實，用記事本就可以寫網頁。只要把副檔名存成 .html 就可以了。 請閱讀這份教材： [HTML Editors](http://www.w3schools.com/html/html_editors.asp) 不習慣看英文，可以改看這裡： [HTML 编辑器](http://www.w3school.com.cn/html/html_editors.asp) 接著要回頭學一些基本知識，這些知識在前幾課我們先跳過了： [HTML Introduction](http://www.w3schools.com/html/html_intro.asp) [HTML Head](http://www.w3schools.com/html/html_head.asp) 不習慣看英文，可以改看這裡： [HTML 简介](http://www.w3school.com.cn/html/html_jianjie.asp) [HTML 头部元素](http://www.w3school.com.cn/html/html_head.asp) 全部唸完之後，請試著用計事本在自己電腦上做出一個網頁檔，然後用瀏覽器去打開它 # 第6課 作業 這次的作業要做所謂的 landing page landing page 是網站的門面，給客戶的第一印象 請參考下列網址，了解更多 landing page 的概念 [實例網站解說什麼是 Landing Page ？](https://cola.workxplay.net/what-is-an-landing-page/) 本次的作業內容如下： 假設你打算在近期內創業，請替你的公司建立一個漂亮、有效的 landing page 如果想不到的話，就請替你目前任職的公司，建立landing page 作業條件如下： 請尋找並下載一張大圖片，當作網頁的背景圖片 參考圖庫：https://unsplash.com/ 請建立一個獨立的 css 檔，不要在 html 檔內寫任何一行 css 試著用計事本在自己電腦上做出這個 landing page，然後用瀏覽器去打開它 完成這些，你就完成這次的課程目標了！
# 第5課 課程目標 認識各種常見的輸入欄位 能夠用表單送出資料 # 第5課 課程內容 用jsfiddle來練習： https://jsfiddle.net 這次要寫HTML區塊 請閱讀這份教材： [HTML Forms](http://www.tutorialspoint.com/html/html_forms.htm) 不習慣看英文，可以改看這裡： [HTML 表单和输入](http://www.w3school.com.cn/html/html_forms.asp) 把教學裡面的HTML貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。 讀完、練習完這份教學裡面的程式碼，就算是學會 HTML 表單的用法，可以用表單來讓使用者輸入、選擇，接著送出各種資料了 # 第5課 作業 這次作業的情境如下： 你決定網路創業、開始網拍生意、線上賣衣服，並且自己設計購物網站 在後台管理面板中，需要有地方讓你新增商品項目 請利用本週學到的表單，將這個新增商品項目的表單做出來。 這個表單至少要能輸入以下欄位，（括號內代表建議的欄位類型）： - 商品名稱 (text) - 價格 (text) - 是否免運費 (checkbox) - 性別 男/女 (radio) - 類別：上衣類 外套類 下身類 配件類 (select) - 商品備註 (textarea) 請讓這個表單用 POST 的方式將資料送出到 ‘/add-product’ （注意：網址’/add-product’並不存在，所以表單資料無法真的送過去。本週課程只談論表單製作。伺服器程式接收、處理表單資料，不在本週課程範圍） 完成這些，你就完成這次的課程目標了！
# 第4課 課程目標 學會使用HTML的table來整理、顯示資料 能夠做出漂亮的表格 # 第4課 課程內容 用jsfiddle來練習： https://jsfiddle.net 這次要寫HTML跟CSS兩個區塊～ 請閱讀這份教材： [HTML Tables](http://www.w3schools.com/html/html_tables.asp) 不習慣看英文，可以改看這裡： [HTML 表格](http://www.w3school.com.cn/html/html_tables.asp) 把教學裡面的HTML、CSS程式碼，貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。 讀完、練習完這份教學裡面的程式碼，就算是學會HTML table的用法了，可以用table來顯示各種資料了 接著請搜尋關鍵字 `table css 美化`，上網研讀一下各種文章，學習基本的表格美工。 # 第4課 作業 政府近年在提倡透明化，公佈了許多資料 請前往 [政府資料開放平台](https://data.gov.tw/) 或是 [台北市政府資料開放平台](https://data.taipei/) 挑選一份你有興趣的資料，利用本週學到的table，將資料用HTML表格呈現。 （資料量巨大的話，請在表格內呈現10筆資料即可。） 完成之後，請用CSS替表格加上美工。 完成這些，你就完成這次的課程目標了！
# 第3課 課程目標 學會使用div和span元素 能夠做出漂亮的排版 # 第3課 課程內容 用jsfiddle來練習： https://jsfiddle.net 這次要寫HTML跟CSS兩個區塊 請閱讀這份教材： [HTML Block and Inline Elements](http://www.w3schools.com/html/html_blocks.asp) 或是看中文版 [HTML 块](http://www.w3school.com.cn/html/html_blocks.asp) 接著開始學習版面配置： [學習 CSS 版面配置](http://zh-tw.learnlayout.com/) 把教學裡面的HTML、CSS程式碼，貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。 讀完、練習完這份教學裡面的程式碼，就算是學會基本的網頁排版了。 # 第3課 作業 在第1、2課的作業，我們將風傳媒的文章內容做了出來，但是略過了上方的導覽列、旁邊的熱門文章等等區塊。 這次作業要延續那些作業，這次不只是文章內容，請將整個頁面都做出來。 注意：本週作業內容繁重許多，請至少將上方的導覽列、旁邊的熱門文章推薦區塊做出來，其餘的可以省略。 完成這些，你就完成這次的課程目標了！ 注意： 有同學反應，jsfiddle的介面太窄，不方便排版 如果您也覺得jsfiddle不好用，可改用 [Glitch](https://glitch.com/) 來練習。 完成後請將您的 Glitch 專案發布，即可將網址分享出去。 小技巧： 您可以使用瀏覽器的開發者功能，觀察網站本身是怎麼寫的 例如：Google Chrome 請對著元素按右鍵 -> 檢查 多利用這個技巧觀察網站原始碼，對於學習本身很有幫助
# 第2課 課程目標 學會用id、class、元素名稱來指定特定元素 學會用CSS來替文字加上設計感，替文字變色、變大小、設計邊框、寬度、留白等等 # 第2課 課程內容 用jsfiddle來練習： https://jsfiddle.net 這次要寫HTML跟CSS兩個區塊 請閱讀並練習這11份教學（不要緊張，內容很簡單）： [CSS Syntax](http://www.w3schools.com/css/css_syntax.asp) [CSS Colors](http://www.w3schools.com/css/css_colors.asp) [CSS Backgrounds](http://www.w3schools.com/css/css_background.asp) [CSS Borders](http://www.w3schools.com/css/css_border.asp) [CSS Margins](http://www.w3schools.com/css/css_margin.asp) [CSS Padding](http://www.w3schools.com/css/css_padding.asp) [CSS Height/Width](http://www.w3schools.com/css/css_dimension.asp) [CSS Box Model](http://www.w3schools.com/css/css_boxmodel.asp) [CSS Text](http://www.w3schools.com/css/css_text.asp) [CSS Fonts](http://www.w3schools.com/css/css_font.asp) [CSS Links](http://www.w3schools.com/css/css_link.asp) 不習慣看英文，可以改看這裡： [CSS 基础语法](http://www.w3school.com.cn/css/css_syntax.asp) [CSS id 选择器](http://www.w3school.com.cn/css/css_syntax_id_selector.asp) [CSS 类选择器](http://www.w3school.com.cn/css/css_syntax_class_selector.asp) [CSS 背景](http://www.w3school.com.cn/css/css_background.asp) [CSS 框模型概述](http://www.w3school.com.cn/css/css_boxmodel.asp) [CSS 内边距](http://www.w3school.com.cn/css/css_padding.asp) [CSS 边框](http://www.w3school.com.cn/css/css_border.asp) [CSS 外边距](http://www.w3school.com.cn/css/css_margin.asp) [CSS 字体](http://www.w3school.com.cn/css/css_font.asp) [CSS 文本](http://www.w3school.com.cn/css/css_text.asp) [CSS 链接](http://www.w3school.com.cn/css/css_link.asp) 把教學裡面的HTML、CSS程式碼，貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。 讀完、練習完這11份教學裡面的程式碼，就算是學會CSS的基礎，能夠用CSS做美工、排版、設計了 # 第2課 作業 你在第1課的作業利用HTML，模仿風傳媒的文章，做了基本的文章排版。 這次的作業，請使用本次學到的內容，把上次的作業拿出來改，替文章加上各種色彩、字體大小、各種排版，讓文章看起來變漂亮。 （請至少替文章加上padding，讓文字不要貼著邊邊，看起來比較舒服） 完成這些，你就完成這次的課程目標了！
# 第1課 課程目標 學會 h1, h2. p, br 等等HTML元素的用法 學完之後，你將可以用HTML來替內容排版 # 第1課 課程內容 第一課只要學習最基本的HTML元素就可以了 請打開這個網站，用這個網站來開發你的網站： https://jsfiddle.net 共有HTML, CSS, JavaScript三塊可以寫，先只要寫HTML就好。 閱讀並且練習這五份教學的內容： [HTML Basic](http://www.w3schools.com/html/html_basic.asp) [HTML Elements](http://www.w3schools.com/html/html_elements.asp) [HTML Attributes](http://www.w3schools.com/html/html_attributes.asp) [HTML Headings](http://www.w3schools.com/html/html_headings.asp) [HTML Paragraphs](http://www.w3schools.com/html/html_paragraphs.asp) 不習慣看英文，可以改看這裡： [HTML 基础](http://www.w3school.com.cn/html/html_basic.asp) [HTML 元素](http://www.w3school.com.cn/html/html_elements.asp) [HTML 属性](http://www.w3school.com.cn/html/html_attributes.asp) [HTML 标题](http://www.w3school.com.cn/html/html_headings.asp) [HTML 段落](http://www.w3school.com.cn/html/html_paragraphs.asp) 把教學裡面的HTML程式碼，貼到 jsfiddle 裡面的 HTML 區域，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果。 讀完、練習完這五份教學裡面的程式碼，就算是學會HTML的基礎了 # 第1課 作業 前往這個網站：[風傳媒](https://www.storm.mg) 或者任何你覺得版面很漂亮的媒體網站 找一篇你喜歡的文章 接著打開jsfiddle，把jsfiddle當成 Microsoft Word文書編輯軟體來用，用HTML的段落、標題、換行等等元素，把文章排版打出來。 只要打出文章內容就好，上方的導覽列、旁邊的熱門文章那些區塊都不用。 完成這些，你就完成這次的課程目標了！
大家好，有沒有想學網頁的朋友呢？ 我整理了一份非常簡單的 HTML 跟 CSS 自學教材，每堂課附有一個小作業 會帶領大家在作業中，實作部落格頁面、網路媒體排版、用政府的 open data 做報表、設計購物網站的上架表單，還有創業最重要的 landing page 課程的最後，您會真的做出一個自己的個人網頁並正式上線，讓您未來在求職、談合作、各種需要介紹自己的場合都可以使用！ 您不需要具備任何基礎、也不需要任何背景 歡迎您試試看這份教材！
來看看一些對 React 開發人員最有用的 VS Code 外掛吧！ - 原文網址：https://dev.to/devland/vs-code-extensions-you-should-use-as-a-react-developer-2f6i ## ES7 React/Redux/GraphQL/React-Native snippets  最流行的外掛之一，由 React 開發人員提供，也由 React-Native 開發人員參與。它帶有許多速記前綴，您可以輕鬆使用它來加快開發過程。 這個外掛提供了很多你可能不知道的功能。一旦你安裝了這個驚人的外掛，創建一個新文件並輸入 rfce 然後按回車鍵，這將生成一個 React 功能組件，導入 React 並導出元件。  它還允許您在幾秒鐘內創建不同的 es7 片段，只需輸入前綴簡寫並按 enter。 此外，如果您使用的是 Redux 或 GraphQL，此外掛也為它們提供了程式碼片段。 ## VSCode React Refactor  簡單，但非常有用。允許您將 JSX 部分提取到新元件、文件等。使用類別、函數和箭頭函數並支持 TypeScript 和 TSX。 ## Prettier  經過多年使用 Prettier，我認為它是任何專案的都好用的外掛。這是一個自動為你格式化程式碼的工具。它有助於保持程式庫的一致性，因為無論團隊中的開發人員有什麼個人偏好，所有程式碼都將以相同的方式格式化。 ## Eslint  用於查找程式碼中的錯誤和缺陷。它可以幫助開發人員編寫沒有錯誤和警告的優質程式碼。 此外，它可以自動修復錯誤和警告。 ## Stylelint  和ESLint類似，也是一個linter，但是針對樣式。它可以檢測並突出顯示不正確的樣式，並有助於保持樣式一致和有序。更重要的是，它適用於純 CSS 以及 SCSS 和 LESS 等預處理器。 ## GitLens  增強了 Visual Studio Code 中內置的 Git 功能。它可以幫助您通過 Git 責備註釋和 code lens 一目了然地可視化代碼作者身份，無縫導航和探索 Git 存儲庫。 ## Git History  允許您查看 git 日誌和文件歷史記錄，並比較分支或提交。 ## Settings sync  您是否曾經重新安裝作業系統或更改您編寫程式碼的設備、繼續安裝 VS Code、然後發現您需要重新安裝所有外掛？它可以自動保存你的外掛和 VS Code 設置，然後在另一台設備上安裝和配置它們。 ## Bracket Pair Colorization Toggler  非常簡單但有用的擴展。突出顯示匹配的括號對。 ## Auto Close Tag  一個簡單但最有用的 React 外掛之一。它所做的是一件非常簡單的事情。 Auto close tag，顧名思義，為元素創建一個結束標籤，這意味著開發人員不需要編寫結束標籤。這可能看起來很簡單，但實際上，自動關閉標籤非常有用。 ## Auto Rename Tag  自動重命名成對的 HTML/XML 標籤。 ## Auto Import  自動為所有可用導入查找、解析並提供代碼操作和代碼完成。適用於 TypeScript 和 TSX。 ## Import Cost  在 React 中，安裝和導入套件是非常常見和必要的。導入大量套件可能會導致性能問題，因為其中一些包可能很重。此外掛在編輯器中顯示套件的大小。 ## Jumpy  您通常如何從一行程式碼轉到幾行和空格之外的特定關鍵字？多次使用鍵盤箭頭或單擊滑鼠？使用 Jumpy，您可以更有效率，因為它可以讓您快速跳轉到特定單詞。 ## i18n Ally  如果您的應用程序支持多種語言，就非常好用。 Formatting toggle  在某些情況下，我們希望暫時禁用像 Prettier 這樣的代碼格式化程序。這可以通過 Formatting toggle 外掛來完成，無需修改編輯器設置。 ## Npm intellisense  為導入語句中的 npm 模塊提供自動完成功能。 ## Web Accessibility  用於提高 Web 應用程序可訪問性的出色插件。它突出顯示了您應該考慮更改的元素，還提供了有關如何更新它們的提示。 ## Live Share  您願意與其他人協作編寫您的代碼嗎？ 此外掛使您能夠與他人實時編輯和調試代碼。 ## Better comments  用於在您的代碼中創建更人性化的註釋。它可以將評論分類為警報、查詢、待辦事項和突出顯示，並以不同的顏色顯示它們。 ## Docker  如果您的應用程序是使用 Docker 部署的，您可以考慮使用來簡化構建、管理和部署來自 VS Code 的容器化應用程序。 ## Remote — SSH  您是否需要訪問服務器才能遠程編輯文件？遠程 SSH 讓您可以使用任何帶有 SSH 服務器的遠程機器作為您的開發環境。您可以輕鬆地在遠程和本地開發環境之間切換。 ## WSL  如果您更喜歡在 Linux 上開發您的應用程序，但您的主要操作系統是 Windows，您可以考慮使用 Windows 子系統 Linux (WSL)。如果這樣做，那麼您可能會發現 WSL 擴展很有用，因為它可以讓您在 Windows 上使用 Vs Code構建 Linux 應用程序。在使用基於 Linux 的工具、運行時和實用程序進行開發時，您可以獲得 Windows 的所有生產力。 ## 實時服務器  如果您需要在文件更改時通過實時瀏覽器重新加載來快速啟動實時服務器，很推薦。 ## Debugger for Chrome and Debugger for Firefox  調試器提供了許多有用的功能，例如在斷點處暫停代碼執行、變量檢查等。這些擴展提供了 VS Code 編輯器內部的調試功能。 ## Change-case  顧名思義，此擴展允許您更改當前選擇或當前單詞的大小寫。如果您有很長的文本或想將多個變量轉換為相同的大小寫，這將非常有用。 ## Regex Previewer  大多數開發人員很少編寫 Regex 表達式。但是，如果必須，此擴展可能會非常方便。它在並排文檔中顯示當前正則表達式的匹配項。 ## DotENV  _.env_ 文件的語法突出顯示。 ## 結論 希望對您有幫助！
Next.js 是一個開源、輕量的 JavaScript 框架。它讓您能用 React 開發高速又好用的 Web 應用程式與靜態網站。 這篇文章簡單介紹一下這個框架！ - 原文出處：https://dev.to/documatic/why-use-nextjs-mn3 # 簡介 Next.js 是用來建造 server-side rendering 的 web 應用程式的 ReactJS 框架。包含很多現成功能，例如程式碼自動拆分、基於檔案的路由、hot reloading 和通用渲染。 https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0oqlfzpvx0rkns65juxt.png Next.js 會在 React 之外處理好工具、設定，並額外提供架構、功能、與效能優化。 Next.js 由 Vercel 的軟體工程師 Guillermo Rauch 打造，並由 Vercel 的開發團隊維護。它是一個開源專案，可以在 GitHub 上找到程式碼。 # Next.js 是做什麼用的？ Next.JS 常用來建造以下類型的網站： - 電子商務網站 - 部落格 - 投資組合網站 - 文件網站 - 行銷網站等等 # Next.js 和 React.js 的區別 Next.js 和 React 都是建造 Web 應用程式的常用工具。但是，它們之間有明顯差異，適用不同場景。以下分別討論幾點： # 效能 性能是 Next.js 和 React.js 之間的主要區別。 Next.js 內建許多效能優化，例如圖像優化。這些優化使 Next.js 網站跑起來非常快。 另一方面，ReactJS 是在客戶端渲染，對於高性能應用程式來說，就不太夠力。 # SEO 靜態網站比較適合 SEO 優化，使用 Next.js 很容易做出靜態網站。SEO 越好，在搜尋結果越前面。 而 React 因為是渲染 singe page application，對 SEO 來說就比較吃虧。 # Server-side rendering Next.js 提供伺服器端渲染功能 (SSR)。當您需要為不同用戶提供不同渲染方式，它可以撈資料然後回應不同請求。 雖然可以啟用，但 React 預設不支援伺服器端渲染。SSR 可以與一些伺服器軟體整合，但需要一些額外作業。 # 開發者社群 React 社群很活躍、資源很多。 Next.js 大部份討論都在 GitHub 上面。 React.JS 和 Next.JS 都有很好的開發者體驗。 # 設定檔 使用 Create React App 的話，記得要跳出來才能獨立設定各項設定檔。 使用 Next.js 的話，可以在 Next.js 模板直接自訂 `babelrc`、`jest.config` 和 `eslintrc` 等文件。 # 結論 簡單介紹一下 Next.js ，希望對您有幫助！
Github 是開發人員互相分享的寶庫。可以在上面找到任何與軟體工程有關的東西。就跟一般礦山一樣，要懂得採礦，才能得到有價值的礦物。 我一直在尋找 github 上面的寶庫，以下列出五個優質寶庫： - 原文出處：https://dev.to/wizdomtek/5-github-repositories-every-developer-should-know-1p93 # 1. Professional Programming 整理了大量經典書籍、優質網站的專案。 閱讀相關內容會有點花時間，但如果你想要持續提升自己，那這專案很適合你。 https://github.com/charlax/professional-programming # 2. Web Dev For Beginners 這是由 Microsoft 的 Azure Cloud Advocates 團隊，提供的 12週、24週線上課程。通通關於 JavaScript、CSS 和 HTML 基礎知識。每節課都包括課前和課後測驗、內容說明、解決方案、作業等。這種以寫專案為主的教學法，讓您一邊開發、一邊學習，是一種讓有效學習新技能的方法。 https://github.com/microsoft/Web-Dev-For-Beginners # 3. The art of command line 命令列是一門藝術，每個開發人員都有自己的使用習慣。最有用的指令是 man，可以用來查詢各種指令。 這個專案列出了各種常用指令與說明，值得一讀。 https://github.com/jlevy/the-art-of-command-line # 4. Project Based Learning 以專案開發為主的一系列學習資源。由一群熱心分享的工程師所整理。內含多種程式語言。 動手開發是學習程式設計的最好方法。不斷解決問題時，同時學習了知識。因為有了目標，大腦的記憶也更有效率。 https://github.com/practical-tutorials/project-based-learning # 5. Every Programmer Should Know 無論您有多熟練，您對技術的了解可能永遠都不夠。 聽起來很刺耳，但這句話是真的。技術世界太廣闊了，不可能了解一切。但這不是停止學習的理由。 瀏覽此專案，可以掌握很多新知識。 如果您想學習一些新鮮有趣的東西，可以將它當成學習工具。 https://github.com/mtdvio/every-programmer-should-know --- 以上，歡迎有空逛逛這些資源，祝您不斷變強。
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
