Animated_Html &CSS : Do beginning

awesome !! My profolio

Photo by Kelly Sikkema on Unsplash

Step1 :

Html Design UI/UX

Awesome Tool : figma

未來趨勢的ＵＩ/UX工具 ,美國矽谷已經是最流行了. 非常強大.

看過youtuber 透過這工具可以直接幫你帶出ＣＳＳ

可以線上和很多設計師共同協作. COOL!

目前也是本人自己也是剛開始接觸

Step2 :

Written Code on your Visual code

CSS and HTML

Step 3 :

一開始的框架設計建議在UＩ工具上設計在後續的編寫HTML及ＣＳＳ上設定Background-color ,該 用顏色做一個區分：

Header > container > Logo+nav-btn + log-sign

在Container 設定 display:flex

讓log:{color:red} , nav-btn { color :green} , log-sign { color:yellow }

Step4 :

display : flex …麻煩

你可以透過做過的專案經驗帶入節省時間. 或者 利用DevTool 及時調整修改

下面的例子： 用了3個 display : flex . 看顏色就可以暸解很複雜的flex.

Open your Html on Chrome , also using DevTool ,could be Modify Element CSS on Styles Item , soon to change your index.html . adjust you Flex

Open your Html on Chrome , also using DevTool ,

could be Modify Element CSS on Styles Item , soon to change your index.html . adjust you Flex