###### tags: `學期一` # HTML/CSS 學習期待設定 接下來我們即將展開「視覺介面的學習之旅」，下一段旅程的感受，可能會和之前學習純邏輯的 JavaScript 很不一樣。 這個單元是行前說明會～ 為了讓同學們有心理準備，抱持適當的學習期待上路，我們邀請到 ALPHA Camp 的課程設計師 Ellen 來和大家談談其中的差異，現在就來看看吧！ <div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;"> <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/447002309" frameborder="0" allowfullscreen></iframe></div> ### CSS 學習：次數的秘密 影片中， Ellen 和大家分享到，雖然有人說 HTML 和 CSS 的學習不是寫抽象邏輯，它應該比較簡單，但其實因為語法量大、組合變化多，反而需要更多次的反覆練習，才容易掌握。 <div style="height: fit-content; display:flex; justify-content: space-around; border-radius: 5px; padding: 0px 10px; box-shadow: 0px 0px 10px rgb(102, 102, 102, 0.2); flex-wrap:wrap; background-color:#ff660018; padding-right:10px;"> <div style="width:80%; min-width:200px; font-size:0.97rem; margin-left: 10px; color: #222222;"> <p>切版的目標是做出和平面設計稿一致的畫面。</p> <p>接下來要學習的語法的量很大，我們的目標是先把畫面做出來。</p> <p>就像學畫畫時，一開始會直接在調色盤上試出你要的感覺，比較後面才會來研究說，色彩的比例等觀念問題...</p> <p>其中有一些細節你可能是試出來的，觀念上還沒有想得很清楚，這是正常的。</p> <p>可能要到你做到第四次、第五次的時候才會慢慢的釐清，那我們也會在比較後面的學期，才會去驗收大家在觀念方面的深入理解。</p> <p>提醒大家不要在入門階段就操之過急。</p> </div> <div style="min-width:90px; display:flex; flex-direction: column; align-items: center; justify-content: center;"> <img style="border-radius: 50%; width:80px;" src="https://uploads-ssl.webflow.com/5d3a7aed4e11722bc1d46f10/5d638cf8a93ad9d50bd3c64b_Ellen%20%20250x250.jpeg"> <br> <p>Ellen Lee</p> </div> </div> 未來幾個學期的 HTML/CSS 的學習路徑如圖，大家可以注意到許多細節我們都會陸陸續續教到，現在這個階段無須操之過急，先累積基礎的知識與實作經驗即可 <div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/16197/ExportedContentImage_00.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/16197/ExportedContentImage_00.png"></a></div> 以上，希望這段分享幫助能在接下來的旅程中，保持務實的期待和愉快的心情～ 所謂「工欲善其事，必先利其器」，來認識一下接下來會用到的開發環境與工具吧！