iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
自我挑戰組

網頁設計師轉職前端工程師的血淚辛酸路 系列

身為一個一路讀設計長大的人,因為撞牆期與很需要錢錢這個酷玩意,所以一路血淚辛酸的爬呀爬,希望能成功轉職成一個讓人不失望並可以放心交付任務的前端人。

注意!目前已有多年網頁設計、切版跟 jS基本基礎,所以本文會著重在了解更多前端知識進而轉職,並非從零開始喔。

參賽天數 15 天 | 共 21 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文 團隊血汗攻城屍
DAY 1

Day 01 - 前言

其實我不算新手,當我的主管說 37 歲還像張白紙是令人擔憂的事,我有點開心也有點茫然( 其實我一直希望自己是透明的,怎麼會是白色咧 )。 從高一那年起發現網頁設...

2021-09-16 ‧ 由 分享
DAY 2

Day 02 - jS 微基礎

前端在走,jS要懂。 所以今天來複習點基礎的jS概念,首先知道HTML裡的每段開始跟結尾的標籤都是元件(有些沒有結尾的也算唷,例如: Br, input等 ),...

2021-09-17 ‧ 由 分享
DAY 3

Day 03 - jS 微基礎之ES6變數: let, const

在前一篇文章中描述了基本的jS操作,這篇要討論關於變數的定義。 推出很久的ES6(2015)中定義了新的兩個變數:const, let,分別代表不可重新定義與可...

2021-09-18 ‧ 由 分享
DAY 4

Day 04 - jS 微基礎之ES6函式:function

function(函式)是將程式碼包起來重複呼叫使用的object(物件),它使我們省下許多時間,為我們做“可重複利用”的事情。 例如我想在三段句子裡分別表示:...

2021-09-19 ‧ 由 分享
DAY 5

Day 05 - jS 微基礎之ES6迴圈:loop

loop(迴圈)意味著在有限的條件下,幫忙重複做多少事的意思。 以下舉基本的for迴圈為範例: for 以做表格為例,在做網頁設計的時候常需要寫靜態網頁的假資料...

2021-09-20 ‧ 由 分享
DAY 6

Day 06 - jS 微基礎之ES6心得及準備進入React

對,就在我昨天不知所云的寫完 for ... of 之後,我順便把剩下的ES6課程讀完了(其實這個連假有空我都使用 Sololearn App 在複習)。 ES...

2021-09-21 ‧ 由 分享
DAY 7

Day 07 - React 的小小練習

打開 public 資料夾,我們可以看見熟悉的 index.html,雖然裏面塞滿了花花綠綠的各種註解,但我們只要專注在找到我們的目標元件就好: <div...

2021-09-22 ‧ 由 分享
DAY 8

Day 08 - 今天的我沒辦法產好CODE

因為心情太低落了,掉著淚看教學,我真的很認真的在學,但為什麼要被批評得一無是處。 也許在學技能的同時,學做人也是很重要的一件事。 第一篇文章我提到,我一直希望自...

2021-09-23 ‧ 由 分享
DAY 9

Day 09 - 繼續加油

React使用jsx的方式撰寫,他是一種語法糖(讓程式更簡單撰寫),我們拿前天建立的專案來修改,在div#root下新增div#root2: <div...

2021-09-24 ‧ 由 分享
DAY 10

Day 10 - React-JSX

今天一樣是語法糖的練習,而且我想把日期塞進去 (感謝 sololearn 的 David Carroll 大大說明) 首先我們在 index.html 裡再新增...

2021-09-25 ‧ 由 分享