104學習精靈

CSS
CSS
關注
邀請朋友
邀請朋友

Line

Facebook

複製連結

取消
關於教室
關注人數 262 人
104人力銀行從職缺中挑選出常見技能所成立的官方教室，提供大家進行共學互動。
學習主持人
持續分享知識，
有機會成為官方教室主持人
教室標籤
  • CSS
    • 關於教室
    關注人數 262 人
    104人力銀行從職缺中挑選出常見技能所成立的官方教室，提供大家進行共學互動。
    學習主持人
    持續分享知識，
    有機會成為官方教室主持人
    教室標籤
  • CSS
    • Hi~ 歡迎分享學習資源，有學習問題可匿名向Giver發問！
    我要分享
    我要提問

    CSS 學習推薦

    全部
    影片
    文章

    不知如何開始嗎？ 先進行技能挑戰吧～

    技能挑戰：初級
    目前等級：未達初級
    1677 人已通過「初級」測驗，通過率89%，和學習精靈一起探索知識、增強能力！
    我要挑戰
    PM雜學相談室－新手轉職PM交流區🙌
    關注
    104學習精靈

    產品

    3小時前

    要如何判斷使用者的裝置？手機、PC、平板判別法
    在網頁開發中，了解使用者設備類型至關重要。透過User-Agent、CSS、JavaScript等方法，工程師可以根據不同設備提供最佳化的網頁體驗。以下為詳細說明：
    1. User-Agent 字串： 瀏覽器會傳一串資訊給網站，其中就包含了使用者的設備資訊，像是操作系統和設備類型。工程師可以查看這串資訊，從中判斷使用者是用手機、電腦還是平板。
    2. CSS 查詢： 工程師可以設計不同的網頁樣式，根據使用者的螢幕大小。比如，手機和平板可能會有不同的版面設計，而電腦則又不同。
    3. JavaScript 檢測： 工程師可以用 JavaScript 檢查使用者的螢幕大小，以及其他設備資訊。這樣就能大概知道使用者用的是什麼設備。
    4. 第三方庫或服務： 有一些工具可以幫助工程師判斷使用者的設備類型，不過這需要用到外部的程式庫或是服務。
    5. 瀏覽器特性： 一些瀏覽器本身就有辦法讓工程師取得設備資訊，不過這個方法限制比較多，並不是所有瀏覽器都支援。
    簡單來說，工程師可以透過這些方法來判斷使用者是用手機、電腦還是平板，進而調整網站的呈現方式，讓使用者有更好的使用體驗。
    0 0 110 0

    熱門精選

    104學習精靈 | 熱門文章推薦
    關注
    104學習精靈

    產品

    04/25 15:52

    【限量:免費報名】利用AI自動化行銷｜直播講座
    講座詳細資訊
    時間：04/30（二） 20:00 - 21:00
    講者：圭話行銷創辦人 何佳勳 / 業界資深的數位廣告行銷專家
    主題：行銷新篇章：AI如何革新檔期活動策略
    在這個數位化的時代，AI技術正以驚人的速度改變著我們的行銷方式。檔期促銷活動面對的受眾眾多，難以精準定位目標受眾，進而影響活動效果、每次規劃檔期活動都需要創造吸引人的內容和促銷方式，但長期以來，創意卻逐漸耗盡、想要掌握AI如何革新檔期活動策略的最新動向嗎？
    你也在苦思如何創造不同以往、有別競品的檔期活動嗎？104學習精靈與緯育TibaMe，攜手邀請到數位廣告界專家 圭話行銷創辦人何佳勳老師。學員們都稱呼他為小圭老師，不僅熱愛與學員社群互動、對學員有問必答，更善於為客戶的製造許多驚喜及營收，一起期待老師分享如何透過 AI 工具提升30%的檔期活動成效吧~
    【限量:免費報名】利用AI自動化行銷｜直播講座
    meet.104.com.tw
    【免費報名】行銷新篇章：如何使用AI規劃行銷活動｜直播講座｜104活動吧
    1 0 1098 0
    104學習精靈精選課程
    看更多課程
    想提升職場競爭力？專業技能課程看起來👇
    微軟PL-900 Power Platform國際認證培訓班
    由 Power Platform 基礎知識入門，加以實作案例協助學員了解各項主要元件的功能應用，從建立虛擬助理到自動化繁瑣的任務，再結合自定義應用程式到視覺化數據報表，使學員能夠輕鬆地在工作團隊中共享資訊以及提高作業效率和協作能力，帶入認證考試的知識點 ，以利學員原地考照微軟 PL-900 國際認證
    緯育TibaMe
    使用 HTML、CSS 開發一個網站
    我將從這堂課程學到什麼？ 1. 有能力排出具專業、語意化、美觀的網頁設計 2. 課程結束後，提供給你一個完整的網頁設計稿，當你實作出網頁來後再轉交六角學院的講師們，六角助教們會為你進行程式碼審視，以確保你吸收的網頁排版觀念是正確的。
    Hahow好學校
    線上真人｜JAVA Spring Boot 全端軟體工程師養成班
    全程採線上授課，不受地域性的限制。採用小班制教學方式，側錄影片隨時複習。 本班以Java程式設計為基礎，學習JAVA物件導向 SQL Server資料庫開發技術。扎實訓練JAVA Spring MVC網站開發與MVVM前端整合應用。JAVA Spring Boot API 微服務開發訓練，整合微軟 Azure 雲端服務設計。最後透過分組模擬業界專案開發流程，將所學實際應用於整合專題，完成求職專案作品。
    X School
    Web全端程式設計
    Desktop Application及Install Wizard 將漸漸消失!Web APP程式開發將成為應用程式開發主流，未來任何東西都會在網路上，而未來所有的軟體程式都將用瀏覽器來執行 瀏覽器的能力將會愈來愈強，別停留在Web不就是個人網頁而已，...No! 那是20年以前的狀況。未來Web APP程式開發將成為應用程式開發主流，未來任何東西都會在網路上，應用程式也幾乎依賴瀏覽器來執行！換言之，瀏覽器就可以跑任何應用程式，開發者不須再各別為Windows、Linux、MacOS、 Android APP、iPhone等平台寫程式了。真的寫不完，不要說寫連維護都很難，因為沒有這麼多資源，可以養這麼多人去維護這麼多平台的程式碼。當然，可以找一個可以精通兩個平台以上的工程師，但實在太少了。瀏覽器的功能會逐漸增強，用AJAX, WebSocket(一種TCP Socket) 就能用瀏覽器進行雙向多工通訊，透過Canvas就可以在瀏覽器進行2D/3D繪圖，這些都是瀏覽器功能不斷演進才有的面貌。 [100%實作導向] 在每一個技術除了給你最清楚的觀念外，都有講師設計好準備讓你融會貫通的範例程式，讓你快速進行演練。課程不囉嗦! 強調動手實戰。 [名師醍醐灌頂] 對於初學者一開始想要進入Web APP開發領域，通常會發現，這個領域技術推進的步調很快且技術間盤根錯節! 艾鍗師資最厲害的地方就是，很複雜的東西可以講得很簡單，一針見血把技術精髓道盡! 要快速掌握Web程式精髓，唯有觀念清楚，才能快速開發，不得其要領，將曠日費時。 學習目標 1. 清楚了解Web前後端架構與DOM架構。 2. 精通JavaScript 程式語言與除錯方法。 3. 學會用JQuery操作HTML、CSS及FORM表單處理。 4. 掌握Node.js 處理異步、單執行緒與非阻塞I/O等關鍵技術。 5. 學會AJAX 及Webscoket的Web通訊方法。 6. 會用Express為Web和移動應用程序提供強大功能。 7. 會使用HTML模板引擎讓開發事半功倍。 8. 學會使用MongoDB資料庫進行資料的新增、更新、刪除、查詢動作。 章節架構 第一階段：Web 前端程式設計-JavaScript & JQuery ★ Web基礎概念 1. Web 技術前端技術架構與DOM架構簡介 2. HTML 簡介與Tag 概念 3. CSS 簡介與Style 屬性 ★ JavaScript 程式語言 1. 關於JavaScript 2. 開發方式與除錯方法 3. JavaScript 操作HTML DOM & Browser Object Model 4. JavaScript 變數 & 基本資料型態 5. JavaScript運算式與運算子 6. JavaScript物件 型態 7. JavaScript陣列 型態 8. JavaScript函式 1) call by value & call by reference式 2) Self-Invoking Functions 3) Nested Function 4) Function Closures 1. JavaScript 數值處理與型別轉換 2. JavaScript Array Methods 1) push , pop, split, map 1. JavaScript Timing Events 2. JavaScript類別定義 (Object with property and method) 3. JSON資料格式與處理 4. Image Map ★ 使用JQuery 1. JQuery簡介 2. JavaScript vs JQuery 3. JQuery selectors 4. JQuery操作HTML DOM 5. JQuery操作CSS 6. JQuery Form表單處理 7. HTTP GET vs HTTP POST 8. JQuery AJAX 第二階段：Web 後端程式開發-Node.js ★ 關於Node.js 1. 非同步式 I/O 與事件式程式設計 2. 安裝Node.js 3. Node Package Manage: 使用npm 4. 製作package.json 5. 我的第一個node.js "Hello world" ★ Node.js HTTP 請求與回應 1. Node.js 處理HTTP Get & Post 2. Express HTTP Server提供靜態檔案 3. 用Express處理HTTP Get & Post ★ Node.js 其他模組 1. Child Process Module 2. File System Module 3. Net Module-Socket 網路通訊 ★ HTML Template Engine 1. Why use Template Engine ? 2. Handlebars.js Template Engine 3. Handlebars.js 的運作流程說明 4. Client Side HTML範本引擎 (Template Engine) 5. 實驗 Handlebars.js ★ The WebSocket Protocol 1. 各種Web 通訊方法 2. Long Polling技術 3. Lab:實驗: Websocket 前後端通訊 4. Lab:實驗: 建立多人聊天室 ★ MongoDB 1. MongoDB 簡介與使用 2. Node.js 操作MongoDB 3. Lab實驗: 使用Node.js 進行新增/查詢/更新/刪除 MongoDB ★ Node.js Serial 序列資料讀取 1. Node.js 讀取micro:bit 資料使用序列界面 2. Canvas.js 動態折線圖結 3. Lab實驗: 使用瀏覽器顯示Micro:bit狀態(A,B按鍵與加速度計值)
    艾鍗學院
    M365 Copilot 微軟AI高效工作流｜重塑AI工作新型態 效率提升50%UP
    如何運用M365 Copilot來提高生產力？微軟MVP王仲麒老師將引導你進入GenAI生產力世界，逐步探索M365 Copilot實務落地技巧，讓M365 Copilot成為你最佳AI副駕駛，你將學到M365 Copilot實用技巧，還能將GenAI技能直接用於你的工作，大大提升工作效率及品質！
    緯育TibaMe
    動畫互動網頁特效入門（JS/CANVAS）
    - 將 HTML/CSS 融會貫通，輕鬆入門，順暢進階 - 從零紮實入門 JavaScript 程式與動畫基礎到進階互動 - 入門 Vue.js 掌控資料與顯示的前端框架 - 整合應用 - 整合應用網頁技術與數學原理，完成有設計感的互動性網站。
    Hahow好學校
    學習精靈

    youtube.com
    CSS GRID / CSS格線好好玩【完整版】 | CSS教學 | CSS格線
    1105 46
    PM雜學相談室－新手轉職PM交流區🙌
    關注
    知識貓星球

    喵星人

    04/14 10:59

    Lighthouse - 優化效能指標的7大方法
    在 Lighthouse 中，效能（Performance）是指對網站或網頁應用程式的性能進行評估和測量。Lighthouse 的效能指標通常包括了以下幾個方面：
    1. 加載性能：衡量網站或應用程式加載速度的指標，如首次內容渲染時間（First Contentful Paint）和加載完成時間。
    2. 互動性：衡量用戶與網站或應用程式之間的互動性，如首次可交互時間（First Interactive）和動畫流暢度。
    3. 資源使用情況：衡量網站或應用程式所使用的資源，如 JavaScript 和 CSS 文件的大小、圖像壓縮情況等。
    4. 緩存策略：評估網站或應用程式是否正確使用瀏覽器緩存機制來提高加載速度和效能。
    5. 異步載入：評估是否使用了異步載入技術來減少阻塞渲染的時間，提高網站的響應性。
    要優化網站的性能，可以採取以下一些措施：
    1. 優化圖像和多媒體內容：
    ►使用適當的圖像格式（如 WebP）和壓縮工具來減小圖像大小。
    ►使用 Lazy Loading 技術僅在用戶滾動到它們時才加載圖像。
    ►壓縮和最小化多媒體文件（如視頻和音頻），以減少頁面加載時間。
    2. 減少 HTTP 請求：
    ►合併和壓縮 CSS 和 JavaScript 文件。
    ►使用 CSS Sprites 將多個圖像合併為一個圖像，減少 HTTP 請求次數。
    ►減少不必要的外部請求，例如移除不必要的第三方庫或插件。
    3. 瀏覽器緩存：
    ►正確配置 HTTP 緩存標頭，以使網頁資源可以在瀏覽器中進行緩存。
    ►使用 Service Workers 緩存資源，以便離線訪問時加速頁面加載。
    4. 優化代碼：
    ►優化 JavaScript 代碼，避免使用過多的迴圈和複雜的操作。
    ►移除不必要的重複代碼和功能，並避免不必要的重新渲染。
    5. 縮短首次渲染時間：
    ►最小化 HTML、CSS 和 JavaScript 文件的大小。
    ►將 JavaScript 放置在頁面底部，或使用異步載入以減少阻塞渲染的時間。
    ►使用 CDN（內容傳遞網絡）來加速資源載入時間。
    6. 優化移動設備體驗：
    ►使用 CSS Media Queries 和 Responsive Design 來確保網站在各種設備上呈現良好。
    ►減少不必要的動畫和特效，以提高移動設備上的性能。
    7. 定期監控和優化：
    ►使用工具（如 Lighthouse、Google PageSpeed Insights）定期測試和監控網站性能，並根據結果進行優化。
    ►分析用戶行為和網站性能指標，並持續改進和優化網站以提供最佳用戶體驗。
    這些是優化網站性能的一些常見方法，根據實際情況，你可以選擇適合你的網站的策略來改善性能~
    想知道更多PM知識，點擊共學，一起學習成長~
    0 0 1094 0
    學習精靈

    03/19 00:00

    youtube.com
    [HTML][中文][初學] 01. HTML / CSS / JavaScript 網頁開發基本介紹 (線上課程教學)
    4251 250

    推薦給你

    職場必備英文：實力、戰力，生存力
    關注
    104學習精靈

    產品

    1小時前

    【英文文章學習】美國新法律，TikTok被迫出售，還是被禁？
    這篇文章講述了美國通過法律迫使字節跳動出售TikTok或面臨在美國被禁的情況，但字節跳動明確表示沒有出售TikTok的計劃。此外，文章提到了字節跳動對外宣稱不會立即回應BBC的評論請求，並對報導其正在探索在美國出售TikTok業務的潛力一事予以否認。這一行動在美國引起關注，因擔心中國共產黨對字節跳動的控制程度以及所持有的數據。最後，文章指出根據新法律，字節跳動有九個月的時間出售TikTok業務，並在可能被禁之前有三個月的緩衝期，預計出售期限將在2025年。
    Abstract:
    The article discusses how the US passed a law to force ByteDance to sell TikTok or face a ban in the US, but ByteDance explicitly stated that it has no plans to sell TikTok. Additionally, it mentions ByteDance's refusal to immediately respond to a request for comment from the BBC and denial of reports suggesting it was exploring the potential sale of TikTok's operations in the US. This action has raised concerns in the US about the extent of control the Chinese Communist Party has over ByteDance and the data it holds. Finally, the article points out that under the new law, ByteDance has nine months to sell TikTok's business and a three-month grace period before a potential ban can be enforced, with the sale deadline expected to be in 2025.
    我們可以從這篇文章中學習到：
    1. 否定形式的使用：
    在文章中，字節跳動明確表示沒有出售TikTok的計劃。這展示了如何使用否定形式來表達拒絕或否認某事，這對於表達立場或回應傳聞是非常有用的。例如，當你需要否定一個陳述或假設時，可以使用這種結構。例如："ByteDance doesn't have any plans to sell TikTok."
    2. 拒絕評論請求的方式：
    文章提到了字節跳動拒絕立即回應BBC的評論請求。這突顯了在面對媒體查詢時，公司如何選擇不立即作出回應或拒絕評論，這可能是因為需要時間進行充分的準備或因為公司尚未做好準備就不希望就某一問題發表評論。例如："TikTok did not immediately respond to a request for comment from the BBC."
    3. 解釋傳聞的否認：
    文章中提到字節跳動否認了關於其在美國出售TikTok業務的傳聞。這展示了如何針對傳聞或錯誤報導做出回應，強調公司的立場並澄清事實。這種做法對於維護公司形象和解釋誤解是很重要的，尤其是在面對公眾關注時。例如："ByteDance denied the report on a social media site it owns."
    加入共學、關注我們，一起學英文 ！
      0 0 20 0
      你可能感興趣的教室