六角體驗營直播

--- ###### tags: `公益程式體驗營 - 2022` `程式筆記` --- # 六角體驗營直播 ## 5/3 第一週-證書任務一攻略 [講義](/qv2M4Q2yRumb0luZDiBDzQ) ### 提醒事項 * 20:00 整記得輸入報到 code，不會影響證書 * ![報到成功](https://i.imgur.com/xUvypNi.png) * 培訓班任務兩項需要做才會有證書 * 不報到也不做作業小心被機器人追打喔 ### 證書任務講解 * 切版任務中間要錄影 * 可以加上VS套件顯示輸入 * 參考：https://github.com/microsoft/vscode/issues/108951 * 退件條件 * 不能出現 X 軸：縮小畫面時不能需要左右滑，白話說就是要 RWD * slack 口頭更正 discord * 放在 `github pages` 上 * 任務一建議看完 Flex - 精神時光屋再做 * 任務二建議看完 RWD - 伸縮自如的 RWD 排版術再做 ### 快速開發小工具 * 練習 emmet 屌打其他人 * [emmet 參考用法](https://docs.emmet.io/cheat-sheet/) ### 校長開發心法不要重複寫樣式 ```css= .footer { width: 1000px; margin: 0 auto; } .header { width: 1000px; margin: 0 auto; } ``` 改成 ```css= .container { width: 1000px; margin: 0 auto; } ``` 搭配的 HTML ```htmlembedded= <header class="header container"></header> <footer class="footer container"></footer> ``` #### debug 神手 `outline` 幫你快速看到網頁結構的樣子，且不會佔空間，不怕推擠 ```css= * { outline: 1 solid #000; } ``` ### 開發流程一小區塊一小區塊寫，桌面版手機版一起，先建立信心 ## 課程簡介 1. 穎旻老師排版任務二 flex 2. 穎旻老師排版任務二 RWD 3. 穎旻老師排版任務二 jQuery 動態效果 4. 洧杰校長教你部署網站 * GoDaddy * Github pages * SEO ## 5/10 大神來六角: LEO B2B比較少需要顧慮瀏覽器問題面試官通常是直屬主管，你喜不喜歡跟這個人相處很重要，觀察能不能從這個人身上學到東西想快速上手一樣技術，兩條路：氪金、唯一推薦官方文件學習上有 input 要 output ### 推薦書單 [無瑕的程式碼：敏捷軟體開發技巧守則](https://www.books.com.tw/products/0010579897) [無瑕的程式碼：整潔的軟體設計與架構篇](https://www.books.com.tw/products/0010786994?loc=P_br_r0vq68ygz_D_2aabd0_B_1) [大話資料結構(全新彩色版)](https://www.books.com.tw/products/0010883039) [大話設計模式](https://www.books.com.tw/products/0010430101) [最高學以致用法 + 最高學習法](https://www.books.com.tw/products/0010886519) ## 5/11 第二週：flex [講義](/3sSr6SyQQKCUxTEoQdymCg) * 主軸 row * 交錯軸 column * display、對齊寫在外層 * 少用 `justify-content: space-around`，用`space-between`再加上`padding`去推比較好計算對外間距 ### 切版作業注意事項 * nav a 用 padding，點擊區擴大、所有的 btn, hover, pagination 同理 ## 5/18 第三週：RWD [講義](/DlbrOBQ0QyyHx5p3bomSxQ) ### 作業-切版任務二 * 今天不會講header、footer * 不能有x軸，body下overflow:hidden也不行，算作弊XD * pad版請自我通靈XDD，要做，但是沒有設計稿，你可以自己思考要怎樣呈現，規定一樣式不能x軸 ### 起手式 ```htmlembedded= <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` * `viewport` 可視範圍 * `width=device-width` 螢幕寬度是裝置寬度 * `initial-scale=1.0` 畫面載入時初始縮放比為 1 :::info 提問 viewport高度包含網址列、書籤？沒回答，應該是沒有啦XDD ::: ### Media Queries ```css= @media (max-width: 767px) { /* 767px (含)以下吃這邊設定 */ } ``` :::info 提問 `@media` 和 `@media screen` 差別不太一樣，今天不會介紹到 ::: ### CSS 權重先看權重再看順序，`@media` 沒有分數，以下在螢幕寬度 600px 時，顏色是...? ```css= @media (max-width: 767px) { #title { color: orange; } } @media (max-width: 575px) { .title { color: yellow; } } .title { color: red; } ``` :::spoiler ANS 口訣跟我唸一遍：先看權重再看順序 `color: orange;` ::: ### 常使用的斷點 * 1280 桌機 * 992 * 768 平板 * 576 手機 * 414 * 375 注意事項 * 建議斷點不要超過3個 * desktop first：尺寸從大寫到小，mobile first 則相反（順序很重要！後面會覆蓋掉前面） ### 不能跳過廣告時間加油完成任務一、任務二，~~或是你在6/12前把加碼影音看完吸收完~~ ### container 外容器 * 包住內部所有東西，用來設定 max-width，通常比螢幕寬度窄 * 視覺集中 * 避免污染 body * wrap?container?都幾?你高興就好 :laughing: 反正要統一 * 我個人是 wrap > container，譬如 banner 會設定滿版，那我 banner 就不會寫在 container 裡，結構如下，也有不同的設計法，自己想 ```htmlembedded= <div class="wrap"> <header class="container"></header> <main class="container"></main> <footer> <div class="container"></div> </footer> </div> ``` > 1. class name 要有意義，不相關的不要放一起，譬如 `.d-flex` 就是 `display: flex;` 不要在裡面放顏色啥的，不好管理也降低彈性 > 1. body 寬度不要寫死，通常是設計師開版時（通常是1280px），剛好版型設定的寬度，但實際上viewport 寬度是會變的 ### 內容器注意外容器 ```css= .card { display: flex; flex-wrap: wrap; } ``` 寬度用 `%` 去寫，算法： * 4欄：width: clac(100% / 4); * 3欄：width: clac(100% / 3); * 依此類推 * 在搭配斷點 [codepen](https://codepen.io/mitour/pen/MWQaXbE)，之前寫的，語意化沒做的很好請見諒 ```css= .card-item { width: clac(100% / 4); } @media (max-width: 767px) { .card-item { width: clac(100% / 2); } } ``` 圖片響應式設計 ```css= img { max-width: 100%; height: auto; } ``` > flex-wrap 對於響應式設計很重要當 `.card-item` 設定左右 padding，最左右兩層多了空隙不好看怎辦？黑色箭頭處 ![多的 padding](https://i.imgur.com/CliM1a1.png) ```css= .card-item { ... padding-right: 8px; padding-left: 8px; } .card { ... margin-right: -8px; margin-left: -8px; } ``` > 1. 請注意如果你的 padding、margin 一個單位為 8px，就全站統一 > 1. 建議左右 padding、margin 分開寫 > 1. 間距用 padding 推，寬度不用多減，因為 margin 是會佔寬度的，大前提是 `box-sizing: border-box;` 範例網站：懶得截圖自己找 * 間距用 padding 推：[日本麥當勞](https://www.mcdonalds.co.jp/) * 間距用 margin 推：[星巴克](https://www.starbucks.com.tw/products/drinks.jspx) ### 老師開發心法依據[設計稿](https://xd.adobe.com/view/4922398e-1a6e-4d4b-848c-044a079713bb-1c71/specs/)調整 1. CSS reset 1. CSS base，可以直接寫在 html tag 上，因為是全站設定 1. Google font 1. line-height: 1.5 1. img RWD 1. a RWD 1. container 1. 計算 max-width：1366 - 139 - 139 + 16 + 16 1. 設計稿總寬 - 左邊 - 右邊 + container 的左 padding + container 的右 padding 1. 看不到網格？老師[講義](/DlbrOBQ0QyyHx5p3bomSxQ#證書任務二講解)有截圖 ![container max-width](https://i.imgur.com/XJS1xLw.png) ## 5/25 中午加碼：切版任務二背景圖 [背景圖案教學 HackMD](/szxDjgPTTFyIXnmRfabgMQ?view)，裡面提供 codepen 前置基礎 * vh * vw * calc() 熱血開幹 * background * 多重背景，用 `,` 分隔 * 超出去用 `-200px`，因為是背景所以會自動隱藏 * media{ .banner(background-image: none)} * position * 要半圓只要設定寬度在要顯示的範圍就好 `width: 200px` * 左邊的半圓也可以搭配 background-position 那個好？都可以拉不要鄙視 ### 提問方案選項手機版中設計稿出現 X 軸是可以的 ```css= /* x 軸 */ overflow-x: auto /* 不要 x 軸也可以用斷行 */ flex-wrap: wrap ``` ## 5/25 第四週：jQuery 增添介面使用者互動揪甘心 [講義傳送門](/Pb8vG4iqT_CjvUIa4lhiJw) * scroll top * tab * accordion ### 小組任務解說 ### jQuery [codepen](https://codepen.io/mitour/pen/rNJYWdm) * 請[下載壓縮、正式版](https://jquery.com/download/#:~:text=Migrate%20plugin.-,Download%20the%20compressed%2C%20production%20jQuery%203.6.0,-Download%20the%20uncompressed) * 引入放在 `</body>` 之前，跟載入時間有關係起手式 ```javascript= $(document).ready(function () { // 內容 }); ``` jQuery 中選擇器是 `$()` :::info 提問 * .ready()是什麼？ * Ans: 他是網頁載入後會執行的函示 * 一定要寫在 html 裡嗎？ * Ans: 可以寫在 `html` 裡也可以另外寫在 `.js` 中，一般來說會額外寫在 `.js` 中 ::: [快速查詢語法](https://oscarotero.com/jquery/) ### `.preventDefault()` `(a).click()`有一個預設參數 `e`，就是event，並提供一個函示 `.preventDefault()`，會取消預設行為，就會不跳轉頁面，有些時候連結用來做樣式變更會需要用的 ### 開關可以帶參數`ms`，單位是毫秒 ```javascript= .toggle() .slideToggle() .fadeToggle() .toggleClass() ``` ### 鏈式按照輸入的函示一個一個執行，所以順序很重要 :::info 提問都要加 `;` 嗎？ Ans: 都要喔，沒加 `;` 還是可以動是 js 的善意 ::: ### DOM 選擇器注意選擇器才要加 `.`，`addClass()`、`toggleClass()` 是不用加上 `.` 的 ```javascript= $(this) // 我本人 .first() // 長子 .siblings() // 兄弟姐妹 .find() // 子層 ``` ### 開發心法把要做的事列出來 1. 點擊li 1. 點擊後，文字變色+粗體 1. p展開 1. 兄弟姐妹關起來 ### scrollTop 你可以簡單地這樣寫，也可以用 `animate()` 帶出滑動效果 ```javascript= $('.top').click(function(){ $(document).scrollTop(0); }) ``` :::info 提問寫`<sub>`沒動作？ Ans: 注意 css reset ::: ## 6/1 洧杰加碼：切版任務二講解 footer 大圖，中間文字置中如果用 padding，口訣：上下用px，左右用% gap適用於flex和grid ## 6/1 壓軸場-網站部署架站流程請看影片 ### SEO * title * 每頁都有 * 順序：產品名-分類-公司名 * h1 * 每頁最重要的資訊放在 h1，例如產品頁的 h1 就是產品名稱 * 通常只會有首頁的 logo 才是 h1 * [schema.org](https://schema.org/) * 標出那個是產品照片、名稱、價錢、評價等等 * 在 google, yahoo, bing 搜尋引擎都適用 * meta tag 例如 description * 給 google 看的縮圖、標題、描述等等 * 雖然[已經不會影響分數](https://www.seoseo.com.tw/article_detail_597.html#:~:text=Google%E7%9A%84John%20Muller%E5%9C%A82017%E5%B9%B412%E6%9C%88%E7%9A%84%E9%80%99%E6%AC%A1hangout%E7%9B%B4%E6%92%AD%E4%B8%AD)，但是加上才完整，不寫他就亂抓 * 還有很多可以設定，建議可以參考大牌網站，例如：三星、apple * 社群 [open graph](https://frankchiu.io/seo-open-graph/) * 給臉書看的縮圖、標題、描述 * 每個平台都有自訂前綴，og 是領頭羊還滿多人用的 * 測試工具 * [複合式搜尋結果](https://search.google.com/test/rich-results?hl=zh-tw) * [open graph 偵錯](https://developers.facebook.com/tools/debug/?locale=zh_TW) * [META SEO inspector](https://chrome.google.com/webstore/detail/meta-seo-inspector/ibkclpciafdglkjkcibmohobjkcfkaef) * [validator.w3.org](https://validator.w3.org/)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.