Day 19 - 正式開發 Side project

每日一談

嗨，大家好 ! 我是阿蘇
今天是 Day19 ， 前面有分享很多開發前的切版知識、開發專題前的準備，我們即將進入正題開始正式的開發，讓我們今天幫大家統整下開發前應該要具備哪些知識，因為篇幅的關係有些無法講解得太詳細，只能分享一些實作經驗跟基礎觀念給大家，剩下就要靠自己去多多實做練習補足知識點。

善用萬能的 GOOGLE 搜尋關鍵字 學會找答案、方向

開發工具

• VS CODE
• sublime

vscode有很多模組，可以輔助開發讓你開發更方便、便利

html/css 知識

• html標籤 (熟練運用 )
  h1~h6 標題、table 表格、p標籤、a連結、插入img圖片、影片、list

• Css
  文字、邊框、display、flex排版、text-align 文字排版、box modal、margin、padding、width、height

• css 預處理器 SASS/SCSS
  這邊建議初學者，可以先從 SCSS 開始，因為它可以跟一般 CSS 樣式共通，使用上也跟 CSS 格式相似，所以可以試著用看看先從巢狀式寫法寫起，讓我們的css 開始有規律寫法

• Css動畫
  @keyframes 影格、animation 指定影格、transition-duration 動畫時間、transform 變化

• 偽元素、position定位
  css進階，不一定要會，但是建議學起來，有些特殊情況會使用到

• css reset
  清空預設樣式

前端開發工具

• Gulp
• webpack

這個在正式專案上是幫助我們快速開發，雖然不是必需的，但是業界上很多會使用開發工具來進行開發，建議至少學習一種，在初學階段我們則可以用v scode 模組來輔助，達到類似開發工具效果，而 Gulp 、webpack 則是把你的前端流程化，讓你開發更快速、便利

前端框架

• Bootstrap
• Tailwind

Su 專題經驗談 (開發使用之工具、技術)

• html/css 知識 (以上分享之內容)
• VScode
• Gulp
• Bootstrap
• Swiper 套件 (輪播)
• Aos 視差套件

這邊可以看到我實際在開發 Side Project 所使用的技術、工具，可以看到我分享的一些內容，讓大家參考下，也可以搜尋關鍵字再一一學習，框架部分會建議至少把 bootstrap 學習起來，在比較正式開發上比較常運用到，後面正式開發篇章，也會用 bootstrap 為核心來進行教學