Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jj811208/the-f2e-practice

前端修煉精神屋作品紀錄
https://github.com/jj811208/the-f2e-practice

Last synced: about 1 month ago
JSON representation

前端修煉精神屋作品紀錄

Host: GitHub
URL: https://github.com/jj811208/the-f2e-practice
Owner: jj811208
Created: 2018-06-04T13:07:54.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2018-11-17T06:17:46.000Z (about 6 years ago)
Last Synced: 2024-10-14T22:12:31.058Z (3 months ago)
Language: CSS
Homepage: https://www.thef2e.com/Certificate/-LDy0zACUZXbYA8Bu7jg
Size: 1.54 MB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# The-F2E

完賽證明

https://www.thef2e.com/Certificate/-LDy0zACUZXbYA8Bu7jg?fbclid=IwAR1YCtS6qYUF6FeO8xWmKRegrPNV5RC7J95JO0jKLlUxm3Fs6fLnMFi3C80

前端修煉精神屋作品紀錄

https://jj811208.github.io/The-F2E-practice/week1/

https://jj811208.github.io/The-F2E-practice/week2/

https://jj811208.github.io/The-F2E-practice/week3/

https://jj811208.github.io/The-F2E-practice/week4/

https://jj811208.github.io/The-F2E-practice/week5/

https://jj811208.github.io/The-F2E-practice/week6/

https://jj811208.github.io/The-F2E-practice/week7/

https://jj811208.github.io/The-F2E-practice/week8/

https://jj811208.github.io/The-F2E-practice/week9/

活動介紹

# The F2E - 前端修練精神時光屋
![](https://firebasestorage.googleapis.com/v0/b/project-402e8.appspot.com/o/TheF2E_banner.png?alt=media&token=83925cd6-b8ee-4f29-9100-d1ee08765f4f)

## 修練內容

1. 一週挑戰一個修練主題，總計九週，可挑選「前端工程師」、「前端設計師」的挑戰方向
2. 每道修練主題的最低通過門檻是「至少要完成 CSS 網頁排版」
3. 在期限內將成果上傳到雲端空間 (CODEPEN、Github、JSBIN) 後，再登記在 Google 表單上

![](https://firebasestorage.googleapis.com/v0/b/project-402e8.appspot.com/o/TheF2E_topic.png?alt=media&token=d08e9634-7ced-4351-8d13-2d00592cd97b)

## 在 The F2E 會獲得什麼資源？

* 資源授權：本活動的所有授權都是 CC0 格式，方便挑戰者重製成自己的 side project 與作品，授權範圍含：
* user story (使用者故事)
* mockup (設計稿)
* 協助就業：若挑戰週數到達六週以上，並通過業界前端審核品質標準，六角學院將會提供求職資源，協助挑戰者媒合就業
* 團結力量大：可觀看其他挑戰者的程式碼，進以觸類旁通，瞭解程式邏輯寫法。並能加入FB 交流社團，六角學院們的老師也會加入。

## 前端工程師

**JS開發 & 介接 API**：在開發中大型介面時，一個網頁上可能會有許多第三方介接的資料，例如後端的 RESTful API、Google Map、BaaS 等等，您可以思考我們所提供的修練主題，試著導入服務進去。

## 修練方向

你可以依照我們提供的修練主題，主動練習自己想投入的新技術。為了確保每週都能挑戰功能，會建議70%用自己會的技術，30%使用剛學會的新技術，以避免挑戰曲線不會過高。

以 CSS、JavaScript 為例，你可投入：

### CSS

* 會使用 float 排版時，可以嘗試使用 flexbox、grid 排版
* 思考響應式排版的實做方式，並在 iPad、mobile 有極好的使用者體驗
* transition、animation、transform 動畫效果，提升網頁動線
* 能使用 CSS 實做出來的效果，就不要使用 JavaScript
* 預處理器 (SCSS、LESS) 與 PostCSS
* CSS 框架 (Bootstrap、pure)
* 設計模式 (SMACSS、OOCSS、BEM、MVCSS)

### JavaScript

* **JS 基礎**：使用一個你不曾用過的 JS 技巧，例如
* array map 、filter、reduce
* 閉包、遞迴、物件導向
* JSON 資料、字串處理
* 正規表達式 (Regular Expression)
* **模組管理**：使用任務管理工具 (grunt、gulp)、模組打包工具 (webpack)
* **ECMAScript**：ES 6、7 、8，並使用 Babel 兼容網頁瀏覽器。
* **HTML5 API**：Localstorage、Geolocation、File API
* **介接第三方服務 API**： social login、weater、open data、自建 API
* **導入 SPA 框架**： Vue、React、Angular
* **工具框架**：lodash、Underscore
* **應用程式服務**：瀏覽器插件 (chrome extension)、桌面應用程式 (electron)、APP (ionic、react native)
* **2、3D 動畫開發**：使用 SVG、canvas、WebGL 設計動畫效果，例如 D3.js、three.js
* **Node.js**：NPM 、後端框架 (koa、express)、API 設計、測試(Mocha、Nightwatch)
* **程式檢查**：ESLint、JSHint

## 獎勵機制

* 完成三道關卡：授予銅級數位勳章，並記錄在戰績榜上
* 完成六道關卡：授予銀級數位勳章，並記錄在戰績榜上，六角學院將主動提供前端就業資源。
* 完成九道關卡：授予金級數位勳章，並記錄在戰績榜上，六角學院將主動提供前端就業資源，實體完賽獎狀。