fylo dark theme landing page

fylo dark theme landing page - Frontend Mentor

你好呀！感謝您查看這個項目！

這是前端導師挑戰的解決方案，包括建立一個看起來盡可能接近給定設計的登陸頁面。目標是透過建立一個現實的專案來提高我的網頁佈局技能。

1.目錄✒️

• fylo dark theme landing page - Frontend Mentor
  • 1.目錄✒️
  • 2. 概述
    • 挑戰
    • 如何運行專案：
    • 連結
  • 3.我的流程？
    • 內建
    • 我學到了什麼
    • 有用的資源
  • 4.作者??

2. 概述

挑戰

用戶應該能夠：

• 根據設備的螢幕尺寸查看網站的最佳佈局
• 查看頁面上所有互動元素的懸停狀態

fylo 深色主題登陸頁挑戰" style="max-width: 100%;">

您可以在前端導師頁面查看挑戰詳細資訊。

如何運行專案：

我選擇使用 Adalab Starter Kit 來處理這個使用 Node 和 Gulp 創建的專案。因此，首先需要安裝Node JS才能運行它。

1. 打開儲存庫根資料夾中的終端機。
2. 在終端機中使用以下命令安裝本機依賴項：

npm install

1. 使用以下命令開始運行項目，該命令將開啟一個顯示頁面即時版本的瀏覽器視窗。

npm start

連結

• 即時網站網址：https://leireomadina.github.io/fylo-dark-theme-landing-page/
• 解決方案網址：即將推出

3.我的流程？

內建

• 語意HTML5標記
• HTML範本系統
• CSS3自訂屬性
• 彈性盒
• CSS 網格
• 採用BEM方法的SASS
• 咕嚕咕嚕
• 響應式設計與行動優先工作流程

我學到了什麼

• 使用@for在 SCSS 中建立循環：在本例中，我只想選擇推薦部分的第二張和第三張卡。

 .card {
  @for $i from 2 through 3 {
    & -#{$i} {
      margin-top : 1.8 rem ;
      @media all and ( min-width : 768 px ) {
        margin-top : 0 ;
      }
    }
  }
}

• 使用和管理svg 檔案：使用 viewBox 屬性修改其位置和尺寸，添加標題和 desc 標籤以提高可訪問性、內聯和 CSS 樣式、使用填充或描邊自訂顏色...
• 使用ARIA 角色來提高Web 可存取性：例如，請查看這些導航選單角色。

 < nav class =" header-menu " role =" navigation " >
  < ul class =" header-menu__list " role =" list " >
    < li class =" header-menu__list-item " role =" list-item " >
      < a class =" header-menu__link " href =" # " role =" link " >
        Features
      < a >
    </ li >
    ...
  </ ul >
</ nav >

有用的資源

• 如何使用 @for 建立 Sass 循環：https://www.youtube.com/watch?v=6CbsNFXMYgs。您也可以查看 SASS 官方文件。
• ARIA 角色、狀態和屬性清單 (MDN)：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles
• 內嵌 SVG 樣式：https://www.youtube.com/watch?v=af4ZQJ14yu8&t=844s
• 更多資源即將推出..

4.作者??

• LinkedIn：leire-ordeñana-madina
• 推特：@risingdana
• 電子郵件：[email protected]
• 行為: leireomadina
• Codepen: leireomadina
• 前端導師：@leireomadina

謝謝您的寶貴時間？