--- tags: 109-1, resource --- # 2020暑假發的學習資源 ## Table Of Content * [Overview](#overview) * [推薦學習順序](#learn-order) * [Highlight (Git, html, css, js)](#highlight) * [專案觀摩](#projects) <span id="overview"></span> ## Overview 前端： * html / css / js [( 請看下面的詳細介紹 )](#highlight) * React: 一個很夯的前端框架 (https://reactjs.org/docs/getting-started.html) 後端： * node: 可以跑 javascript的code (https://nodejs.org/en/) * nvm 可以下載不同版本的 node (https://github.com/nvm-sh/nvm) * express.js: 可以快速架一個伺服器 (https://expressjs.com/en/starter/installing.html) 資料庫: * MongoDB: 近期資料庫潮流，跟node配合性佳 (https://docs.mongodb.com/manual/) * mongoose: 把mongo包起來的套件，可以給node用 (https://mongoosejs.com/docs/) 其他: * Git (https://zlargon.gitbooks.io/git-tutorial/content/) * Command line * Linux * socket (https://socket.io/) --- <span id="learn-order"></span> ## 推薦學習順序 希望最好暑假至少學會git, html, css, js，但不用有太大壓力 #### git -> html -> css -> javascript -> node -> socket -> React -> Express -> Mongo --- <span id="highlight"></span> ## Highlight (git, html, css, js) ### 1. Git (https://zlargon.gitbooks.io/git-tutorial/content/) #### 一定要會的東西： * status, log, add, commit, push, pull #### 進階版： * checkout, branch, reset, rebase, merge, stash, cherry-pick ### 2. html (https://www.w3schools.com/html/default.asp) #### 一定要會的東西： * tags: html, head, meta, title, body, h1~h6, br, p, div, span, a, script(會加javascript到html裡), link(會加css到html裡), img, b, table, tr, td, th, ul, ol, li, form, input, button * attributes: style, href, rel(會加css到html裡), id, class, onclick * entities: nbsp, lt, gt * other: 註解 * template: ```html <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Title</title> </head> <body> <p>Content</p> </body> </html> ``` ### 3. css (https://www.w3schools.com/css/default.asp) #### 一定要會的東西： * properties: color, background-color, border, border-radius, box-sizing, box-shadow, margin, padding, width, height, text-align, font-size, font-weight, position, overflow * other: selector, combinator, pseudo-class, psuedo-element, 註解, flexbox(極重要), grid, media-query ### 4. javascript (https://www.w3schools.com/js/default.asp) #### 一定要會的東西： * types: Number, String, Boolean, Array, Object, null, undefined * DOM operation: getElementById * Other: 註解 加減乘除(Number和String) function, arrow function if, else, switch, for, while let, const Math, JSON try, catch, new Error #### 進階版： * [spread operator](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Spread_syntax) * [destructuring operator](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) * [Promise](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise) * [async/await](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/async_function) * [fetch](https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API) --- <span id="projects"></span> ## 專案觀摩 * 預選系統網站 (https://course.ntuee.org) * https://github.com/NTUEEInfoDep/NTUEECourseWebsite2020 * 預選系統算法 * https://github.com/NTUEEInfoDep/NTUEECourseDistribute2020 * 宿營大富翁計分板 (https://camp.ntuee.org) * https://github.com/MortalHappiness/CampScoreboard * 2020 光舞 (跟學術部合作) * https://github.com/orange2120/NTUEE_light_dance * 2019 電機週遊戲 (code 有點醜，但當初一起做蠻開心的) * https://github.com/NTUEEInfoDep/yEEtshen * Bullet (by 上屆資訊部長) * https://github.com/bchao1/bullet * race-chart-react (by 上屆資訊部長) * https://github.com/bchao1/chart-race-react * life-commit (by 上上屆資訊部長) * https://github.com/ByronHsu/life-commit * Never-Blink (by 上上屆資訊部長) * https://github.com/ByronHsu/Never-Blink