## 前情提要 有鑑於有些人還是需要考丙級網頁 雖然是使用過時的DW 這邊還是貼出教學影片 提供參考  ## 影片資源 [YT教學系列連結](https://youtu.be/7bM1kjRayB8) ## 心得 很喜歡這種熱心分享的頻道 大多是默默耕耘的老師 實在是網路界的一大佛心人之一 就算沒有看內容 也很感恩(,,・ω・,,) 未來有機會我也來用其中的網頁切版 示範怎麼手刻出來好了 應該挺有趣的XD ## 額外補充 最近在研究關於SPA的技術 這個影片示範的還不錯 很簡陋 簡易 鍵盤敲打的聲音很好聽(誤 紀錄一下  [SPA教學](https://youtu.be/5HgMIP5tarE)
有幾位同學已經寫完系列一～九的全部作業了 整體能力已經可以準備開始面試前端工程師的職缺了 這邊寫一篇簡單說明 # 需要補充的技能 前端技能中最困難的部份已經有相當基礎了 剩下有些東西沒那麼難，但要學一下，上班會用到 這些東西我未來可能會寫教材，但我最近很忙，近期無法寫新教材 ## git 程式碼版本管理工具，找書或者上網找文章學一下，至少要會 add commit push pull 這些指令 ## npm 作業都是用線上環境，實際開發都是在本機為主，需要知道 javascript 套件管理工具 npm 怎麼用 ## create-vue https://github.com/vuejs/create-vue 要能在本機架起來 vue 開發環境，這款至少要知道一下 ## vue 3 教材安排是學 vue 2，但現在很多公司都已經轉用 vue 3 語法了 背景知識大同小異，但語法差異不少，要知道一下怎麼轉成 vue 3 寫法 --- 老樣子，學的時候有點一知半解沒關係，大概會用就好，畢竟是面試 junior developer 的職缺，公司通常會有工程師同事，技術長＆他們會協助你實務上的細節 # 投履歷的公司篩選 在找工作的時候，投那種「無經驗可」的職缺 很多公司會寫「一年以上工作經驗」，這種就是不歡迎半路出家剛學完者 因為很多人從補習班畢業之後，連 hello world 都寫不出來，公司想要避免遇到這種人 就先投「無經驗可」的職缺就好 公司類型基本上有分「接案公司」、「做自己公司產品」兩種 第一份工作沒差，去接案公司練功、去做自家產品慢慢打磨產品，都可以，待個半年，先進入業界再說，都可以學到很多 長期來講，我之後再寫文章說明差異 # 履歷表的寫法 基本上你照自己習慣寫，簡潔有力即可，這行業基本上是實力主義，唬爛幫助不大 但有幾個東西務必要寫進去 ``` 學習的過程中，為了瞭解網頁的基礎，而不只是當個框架的使用者，我有用純 html/javascript 練習多個元件 [附上第三課全部作業] 並且有找一些看起來很紅的業界套件，練習導入使用 [附上第四課全部作業] 然後我有用 vue 寫了多個應用程式練習 [附上第八課全部作業] 還有試著拿 vue 生態系的元件庫做範例，模仿做了幾個元件 [附上第九課全部作業] ``` 我認為履歷表附上這些東西，會讓99%的面試官印象深刻，覺得你幾乎是「即戰力」，對你更有信心 # 結語 以上，如果你寫完系列一～九全部內容了，那我認為你離上班已經很接近了 如果正在準備轉職，準備一下，試著投一些履歷試試看，試試水溫 不用急著辭職，因為今年全球景氣充滿不確定性，但就試試看能收到多少面試邀請，等於秤秤自己的斤兩，比較有個底 順利上班之後記得來寫文章分享心得 然後最好養成習慣寫技術部落格，直接在這邊寫即可 求職過程有疑問，一樣多多來這邊發問即可 求職卡關、面試不順、薪資待遇有疑慮、業界實務有困惑，都上來發問即可 我會視情況公開 or 私下回答 以上，有打算轉職的同學，祝大家早日上班囉～
如題，大家加油～ 再次提醒 1. 有問題多多到討論區發問 2. 網路上找到有趣資源、優質連結，多多分享到討論區 3. 有心得、小筆記，請把討論區當成部落格，多多分享技術筆記 加油～
## 前情提要 自學程式對某部分人來說，是一個不太難的事情， 學習能力好，悟性高、執行力強就有辦法可以做到，這屬於自學型人才。 像我自己就有能力可以自學到一定的程度。 但當這樣子的人要轉變成教學模式，當一個家教或老師，似乎是另一回事， 並非技術研究的越深，越會教，而是要針對教學下功夫....（？ ## 舉例說明 像是我有觀察教學前端的課程設計，有的是從CSS開始， 一堂教reset跟html，一堂教margin，做出各種練習。 再來可能是padding，以此類推，這樣。 通常都是這種零件式的學習，分散大架構，東西拆開來解說。 這樣子可能可以教一個禮拜之類的， 但其實對熟練的人來說用個簡單的模板網頁，十分鐘內一定能做完。 這之間有點矛盾或說，有差別。 ## 疑惑內容 想請教前輩或是站長在這方面有沒有心得， 教學上追求循序漸進似乎是必要的，講白一點就是進度比較慢啦！ 不知道這種狀況前輩們是否有遇過？ 目前有在規劃假設要教人的話，是否就是慢慢來，給人家操作看看練習， 但感覺又很像在拖時間ＸＤ (因為我自己跟人家線上試上過也會覺得，有點慢，資訊量很難跟自學比) 雖然我個人不傾向於這種學習模式， 但我知道要把十分鐘弄完的東西，轉化成：解說成那麼多堂課，是另一個領域的一種功力.... 我想這應該是有些人走過的路，心態上有點不確定，因此想請益一下這塊的經驗跟心得~ 任何關於家教的想法，歡迎站長或是前輩們稍微分享看看 教育這條準備的道路心得~~
## Midnight Lizard  ``` 這個擴展改變了頁面的顏色，亮度和對比度以提高可讀性，並且為所有網站開啟夜間模式。 將幫助您定制整個互聯網的外觀，以便於使用。您可以為每個喜愛的網站設置不同的配色方案，並為所有其他網站設置一個默認主題。從預定義的方案中選擇或創建自己的方案。用戶配色方案的數量是無限的。 ━━━━━ 的優點 ━━━━━ ✔智能黑暗的主題 ✔增加對比度 ✔反轉的亮度，而不是倒置的顏色 ✔選擇灰度 ✔在類似的背景顏色之間增加差異 ✔將圖像恢復到鼠標懸停時的原始狀態 ✔顯著提高可讀性 ✔增強的語法突出顯示（對於程序員） ✔有藍色濾鏡可以用紅光代替藍色光 ``` ## Stylebot  ``` 壹個方便改變網頁外觀的擴展 選擇壹個元素，然後從編輯器中選擇要進行的任何更改。您可以更改字體，顏色，邊距，可見性等。您也可以自定義 CSS。 ★易於使用：使用 UI 操作挑選元素並設置樣式 ★簡單快捷：更改立即保存 ★代碼編輯器-在這裏編寫自己的 CSS ★可讀性模式-通過隱藏非必要的頁面元素（如側邊欄，頁腳和廣告），提升網頁閱讀體驗。 ★灰度模式-啟用灰度以減少來自網頁的刺激 ``` ## 後記 未來可能還會新增更多唷！
var text = ""; text = text + x; 請問一下這個的意義是什麼
請問各位，要拿到前端工程師、網頁工程師的offer，最低要具備那些能力呢？ 作品至少要有什麼，才能面試？
https://codelove.tw/courses/contents 列出全部系列的每一課標題 方便大家複習翻閱
## 前提 https://flexboxfroggy.com/ 類似這種遊戲或是https://hexschool.github.io/flexbox-pirate/index.html#/simple （六角應該是學習他 這兩個基本上一樣ＸＤ） 想問這種可以讓使用者丟code的遊戲 是否會很難開發 這邊順便提供相關遊戲 [10 amazing games to learn CSS](https://daily-dev-tips.com/posts/10-amazing-games-to-learn-css/) [10 games to learn JavaScript](https://dev.to/dailydevtips1/10-games-to-learn-javascript-155j) 有些難度似乎會比較高 是因為還要用美術素材 但我想 我若是使用人家現成的 純粹練習 這方面應該也不困難 ## 疑問 我在想 其實應該會算是個很有趣的挑戰? 我考慮的點 是要判斷user的code是否正確 基本上去判斷text area的內容有沒有 那些特定的條件 用判斷式去寫 應該不至於太難 想說試著練習寫一個這個遊戲 因為我看六角也是照著人家的做XD 不知道前輩們對這樣的練習有什麼建議~~ 會有什麼地方要注意嗎 感恩!!!!!!!! ## 想法漫談 從以前練到現在，真的很喜歡這個論壇~~~未來有機會搞一個自己設計的遊戲關卡 也可以讓大家練習JS 因為我看到有些練習的遊戲是要付費的 在這裡:https://codepip.com/games 想說我可以自己搞一個免費版 XDD 只是怕弄下去也許是一個太大的專案? 或者其實跟切版差不多 幾個小時就OK? 那我一定馬上來弄 感覺就超好玩~超酷~
請問各位，最近在練習bootstrap，跟之前用css的方法好不一樣，還是比較喜歡另外寫在css上，不喜歡全部都在class裡，這是有辦法改變的嗎，還是已經是最精簡的寫法了呢
## 題目說明  寫出這樣子的網頁切版 ### 示範效果  CODEPEN:https://codepen.io/flwrtykd-the-scripter/pen/VwGyOwa ## 代碼寫法 ### HTML ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>貓咪網站</title> </head> <body> <div class="wrap"> <div class="hero"> <img src="https://wallpapers.com/images/featured/g9rdx9uk2425fip2.jpg" alt="" /> <div class="text"> <span class="red">有貓咪也有狗，</span> <br /> <span class="red">甚至是螳螂！</span> <br /> <span class="green">隨便讓你領養</span> </div> </div> <div class="content"> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> <div class="block"> <img src="https://i.imgur.com/9ej5zY3.jpg" alt="" referrerpolicy="no-referrer" /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa commodi quo assumenda nam tempore sint quia neque voluptatum ab. </p> </div> </div> <div class="footer"> <p>@copy right 這邊就是一些文字</p> </div> </div> </body> </html> ``` ### CSS ``` body { background: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1888&q=80"); overflow: hidden; } .wrap { width: 1000px; background-color: #e9edc9; margin: 0 auto; height: 100vh; margin-top: -10px; } .hero img { width: 100%; height: 250px; object-fit: cover; object-position: 0px 1px; } .hero span { font-size: 45px; } .hero .green { font-size: 35px; } .text { position: absolute; top: 35px; left: 250px; font-weight: 900; text-shadow: 2px 2px 5px white; border-left: 5px solid yellow; } .text > * { margin-left: 20px; } .content { display: flex; justify-content: space-around; margin-top: 40px; } .block { width: 250px; border: 1px solid black; } .block img { width: 100%; } .block p { padding: 5px 20px; } .block:nth-child(1) { margin-left: 25px; } .footer { background-color: black; color: white; text-align: center; height: 30px; } .footer p { transform: translateY(25%); } ``` ## 布局解釋 ### 背景以及格局 先設定一個背景 background img之後 使用wrap來製造一個效果是左右縮窄 只要設定width 以及margin auto 0就可以了 之後我使用三個分區 分別是上到下的四個div: hero 裡面有大圖片 text是標題文字 然後是content裡面放置三個block裝著小圖片跟內容文字 最底下是footer放著版權說明 ### hero & text hero就放圖片 width設定100%即可 text的話我裡面用三個span寫文字 設定class分別調整樣式 換行是使用br標籤 其中左邊的書籤效果(黃色長長那條) 是對text這個div使用border left完成的 ### content 這邊的話 先對content的div設定display flex達到水平排列的效果 其中可以用justify content讓它space around 平均分散開 再使用:nth-child(1) 去針對第一個block調整margin left 讓排版更精準 裡面的話 寫一個block 完成後再複製成三個 block放置img跟p即可 而它本身也要用一個border製造出邊線的效果 ### footer 我使用 transform: translateY(25%); 讓文字有點垂直置中的感覺 這都可以自己微調 ## 特別注意 在hero的img調整上我使用了 object-fit object-position 這兩個屬性去微調 這個是很好用的小技巧，可以特別留意 ## 心得 這種切板很常見 使用的伎倆其實差不多就那些 學習上 可以藉由先完成效果 再尋求優化的原則 以上 有相關問題都可以提出討論 或是歡迎投稿想要切版的圖片 我未來可以寫一系列的切版文來跟大家交流～～～
經營這網站主要是想做新手友善論壇 本想隨手寫2-3份入門教材，簡單給新手一些方向 結果居然寫了8份，而且我發現後面還有滿多要教的東西 所以我打算把自學教材改成「付費教材」，我乾脆長期研發新教材好了 - JavaScript 系列前兩課免費 - 每個系列售價$199 - 現有會員不受影響（今天之前註冊的會員，所有教材維持免費） 以上規劃跟大家分享，希望中長期來說，可以變成最優質、最便宜的前端系列教材 然後就可以跟討論區功能相輔相成，讓新手有個持續進修的好地方
* [第1課 ── 碼表應用程式](https://replit.com/@birdiewu/Ma-Biao-Ying-Yong-Cheng-Shi-online-stopwatch?v=1) * [第2課 ── 筆記應用程式](https://replit.com/@birdiewu/Bi-Ji-Ying-Yong-Cheng-Shi-online-notepad?v=1) * [第3課 ── 分帳應用程式](https://replit.com/@birdiewu/Fen-Zhang-Ying-Yong-Cheng-Shi-online-split-the-bill?v=1) * [第4課 ── 行事曆應用程式](https://replit.com/@birdiewu/Xing-Shi-Li-Ying-Yong-Cheng-Shi-online-calendar?v=1) * [第5課 ── 體重追蹤應用程式](https://replit.com/@birdiewu/Ti-Zhong-Zhui-Zong-Ying-Yong-Cheng-Shi-online-weight-tracker?v=1) 備註：如果第五課卡關，說不定你遇到跟我一樣的問題，可以參考[這裡的討論串](https://codelove.tw/@birdie2019/post/Ja69K3) * [第6課 ── 天氣查詢應用程式](https://replit.com/@birdiewu/Tian-Qi-Cha-Xun-Ying-Yong-Cheng-Shi-weather-in-taiwan?v=1) * [第7課 ── 國家資訊與地圖應用程式](https://replit.com/@birdiewu/Guo-Jia-Zi-Xun-Yu-Di-Tu-Ying-Yong-Cheng-Shi-world-map?v=1) 心得分享： JavaScript第八系列的作業跟前七個系列相比真的有挑戰性和困難度，此系列讓我進入到學習的陣痛期，不習慣、沒自信地摸索著，在網路上東看看西看看方法，文件重複看了好多次，code也拼拼湊湊完成每個作業的規格，遇到卡關的問題學著自己解決(除了第五課的問題外，那邊卡關兩天，最後終於揮白旗XD)，想想有什麼辦法可以做或可以找哪方面的資料，我認為自己不是很聰明和邏輯好的人，剛開始覺得作業規格條件好困難，一直出現卡關的問題，現在回頭看其實我都挑戰完成了欸！雖然回去翻作業看還是有小瑕疵和待優化的地方，但還是恭喜自己終於完成了! _(:з」∠)_
您好，請問幾個問題。 1.為什麼我使用position:relative，網頁會出現很大的空白，我該如何解決。 2.使用絕對位置，我該如何讓我的網頁隨著比例縮放。 問題1 :  問題2:   這是網頁全開的時候  HTML: ``` <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>佳加安全帽</title> <link rel = "stylesheet" href = "style.css"> </head> <body class = "page"> <div class = "navbar"> <div class="container"> <div class = "logo"> <a href = "#"><img src = "jiajia.jpg"/></a> </div> <div class="menu"> <ul class="choose"> <li><a href = "">所有商品</a></li> <li><a href = "">特價商品</a></li> <li><a href = "">安全帽</a></li> <li><a href = "">藍芽耳機</a></li> <li><a href = "">裝備衣物</a></li> <li><a href = "">配件</a></li> <li><a href = "">包包</a></li> </ul> </div> <div class="user"> <ul> <li><a href = "">Log in 登入</a></li> <li>|</li> <li><a href = "">Sign up 註冊</a></li> </ul> </div> </div> </div> <div class="background"> <div class="content"> <h1>在危險的世界中，給你多一份安全</h1> </br> </br> <p>留下您的email，獲得新商品及最新優惠資訊</p> </br> <input type= "email" name = "email" value = "Your email"> </br> <input class="submit" type = "submit" name= "submit" value = "訂閱"> </div> </div> </body> </html> ``` CSS: ``` *{ margin: 0px; padding: 0px; list-style-type: none; text-decoration: none; } .navbar{ background-color: #272727; height: 50px; width: 100%; } .logo img{ height: 50px; } .menu{ position: relative; top: -50px; line-height: 45px; left: 500px; } .menu li{ float: left; } .menu a{ color: #D9B300; display: block; padding: 0 10px; } .menu a:hover{ background-color: #D9B300; color: #272727; } .user{ position: relative; top: -50px; left: 800px; line-height: 45px; } .user li{ float: left; color: #D9B300; } .user a{ color: #D9B300; display: block; padding: 0 10px; } .user a:hover{ background-color: #D9B300; color: #272727; } h1{ color: white; } p{ color: white; } .background{ background-image: url("motor.jpg"); background-size: cover; background-repeat: no-repeat; height: 660px; text-align: center; } .content input{ width: 400px; height: 40px; } .content h1{ font-size: 40px; } .content p{ font-size: 20px; } .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .submit{ font-weight: bold; font-size: 20px; background-color: #D9B300; color: #272727; border-radius: 10px; border: 0px; } .submit:hover{ background-color: #272727; color: #D9B300; }
在自學網頁の嬰兒教材：第3課 ── 網頁排版，練習使用 inline-block 版面配置，但一直無法變成如圖下那樣，請問是少了甚麼東西嗎? 謝謝! https://jsfiddle.net/u2bkycxL/1/ 
https://replit.com/@birdiewu/Ti-Zhong-Zhui-Zong-Ying-Yong-Cheng-Shi-online-weight-tracker?v=1  JS部分加上第46~49和55~58行無法更新圖表(官網提供的功能) 新增和刪除資料時，圖表無法跟著一起改變，只能重新整理網頁才會改變 不知道哪邊出了問題＠＠
https://replit.com/@evon5995/GigaDeadPort#index.html 點擊離開，把用戶跳轉到 google 首頁 點擊確認，就關閉蓋板警告 以上兩功能都完成了 但是“按過確認，重新整理之後，蓋板警告就不會再跳出來”此功能怎麼都無法完成  js的錯誤不知道如何解決
文章 API 測試上線啦！ 用戶文章列表 - https://codelove.tw/api/posts?username=howtomakeaturn&per_page=5&page=1 單篇文章資料 - https://codelove.tw/api/post/vx8Y23 - https://codelove.tw/api/post/Rqzpb3 - https://codelove.tw/api/post/AqJR1q 以上範例是我的帳號＆文章，試試看，把 `username` 改掉就可以了 歡迎大家玩玩看這組 API，最好可以架出自己的部落格！ 可以先架在 GitHub Pages 試試看！
## 影片來源 https://youtu.be/EeZM5SXuCsU ##內容 ---------- 1. テキスト系 ---------- 02:02 line-clamp 02:56 text-stroke 03:22 background-clip: text; ---------- 2. 画像系 ---------- 03:47 object-fit 04:23 aspect-ratio 04:58 clip-path 05:30 filter 05:57 mix-blend-mode ---------- 3. サイズ ---------- 06:32 max-content 07:02 min, max, clamp 07:13 min 07:50 max 08:14 clamp ---------- 4. レイアウト系 ---------- 08:52 gridlayout 09:21 gap 10:03 display: contents; ---------- 5. 動き ---------- 11:08 position: sticky; 11:49 scroll-behavior: smooth; ---------- 6. その他 ---------- 12:30 Custom Properties 14:35 backdrop-filter 15:37 detail summary 先貼上來，有空補上mdn或是w3c的說明
 現在這個時代大家都是分頁魔人 這個擴充可以參考看看 [STORE](https://chrome.google.com/webstore/detail/vertical-tabs/pddljdmihkpdfpkgmbhdomeeifpklgnm?hl=zh-TW) [GITHUB](https://github.com/lxieyang/vertical-tabs-chrome-extension/blob/master/CHANGELOG.md#v2x-official-releases) 未來有機會我也想研究chrome extension的製作 應該很多好玩的API 
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
