2020年6月7日 星期日

2020 六角學院 網頁切版直播班心得


      


        這篇有點長,所以先講結論:建議每周有16小時以上空閒時間再報名,留出足夠的時間學習、思考、最重要的—做點東西出來。



一、為什麼想報名:

      之前有看過網路課程跟一些HTMLCSS教學,大概都知道有哪些標籤或基礎的寫法,但

是動手弄出一個網頁總是難以克服惰性,直到最近有想轉換跑道的念頭,才想能不能得到一

些新的招式來增進自己,初衷是實務上專案必然有時間安排,跟我習慣想很久應該不太一

樣,應該了解一些新知跟知道同行的速度。


二、學習過程:

  • 每周都會有一個設計稿作業,有個作業當目標會比較有動力去完成一個頁面。

  • 首先要先克服的就是如何回報任務、把做好的檔案上傳到 github ,各種會需要的字型、圖片應該存在哪?版型攻略這邊有很多包含上傳設定、作業的某些小區塊製作、助教每星期直播講解,比較不會看到一頁做不下去就產生放棄的念頭。

  • 比較困難也比較完整的網站頁面大概有三個,在製作的思想上是一個很大的衝擊,撥出了三周的時間手寫完一個之後,然後老師說盡量來練習 Bootstrap,這個習慣的改變大概是跟換左手寫字差不多,一個簡單的頁面(第五周作業)為了改變這個習慣,練習了非常的久。不過到後期有感覺到得到助教反饋之後,修改比較容易找到寫在哪,跟如果分好幾天寫比較容易繼續,不會找很久就開始覺得懶得寫。

  • 總共有八個作業,不過我自己的時間安排只作得完七個,上限非常高我覺得蠻不錯的,每個作業你可以自己挑戰不同的項目,例如完整的動畫效果、使用 Bootstrap的元件Javascript製作下拉式選單之類...但是完成任務條件頗低,真的從HTML語言是什麼開始學起的同學也可以完成,不會太有挫折感。

  • 分組是轉職組,各位組員都老江湖在各自的領域打拚多年,對於洧杰老師的中二魔王都是無視,下圖為中二魔王圖,還會有Bug在課程結束時才會沒血。因為大家都太忙了,所以最後我們只約成了4次小組討論。
  • 問問題的管道很多,但是當你要準備程式碼、問題圖檔,然後思考要貼slack還是課程問題區還是回報任務區的時候,不如去Google,畢竟工程師的任務就是解決問題。通常也沒人願意看落落長的程式碼,與其花半天去思考怎麼表達不如解決它。


三、最大的收穫:


      完成了不少頁面,從純手刻到RWDBootstrapSCSS的運用,自訂元件,對於檔案管理、拆分的思考有工程師的感覺,學會了整體的思考流程。其中一個作業Ray(前後端全能助教)願意打半顆星也給了我很大的鼓勵。


四、給入坑的同學建議跟勉勵:

  • 自由度很高,但是要給自己壓力,老師催你繳作業要想成長官在訂時程交專案,畢竟如果只是想隨便翻翻去書店買書就好了,不會訂時間可以參考回報任務區,會統計平均繳交時間。(6/8新增:我昨天在Slack看到,如果不會規劃學習進度可以line洧杰老師...)

  • 我的學習過程大概是無腦div>固定寬度>手刻RWD>Bootstrap 格線>Bootstrap 元件>JavaScript,如果覺得作業的技巧都會了就要學點新東西,學如逆水行舟,花錢就要衝一波。

  • 推薦先看過幾次 w3school之類的資料,才能把時間留給思考整體架構上,而不是網頁上的字可不可以改大小這種過於淺顯的問題。

  • 作業一定要交出來,洧杰老師說六角的課最終作業繳交率大概30%,因此才萌生開這個班的念頭,寫一頁可以參考老師上課錄影、版型攻略、助教直播、同學作業,如果照抄都寫不出來可能要考慮一下職涯規劃。

  • 我最認同六角的地方就是無私分享的文化,隨便買點課程,就有FB學員社團、Slack群、免費講座,都要分輕重緩急根本不可能全部學會,已就職學長姊跟曾於講座分享的業界講師也會出沒在社團,這個環境只要有心變強就一定做得到。



2020年4月11日 星期六

2020/4/10 直播班作業






           第一題:
                              2.92~93px

            重點:img下會莫名的多2~3px。

           第二題:

                             從上到下:36+16*1.5+24+16*1.5+24+90=222px
                             display:block可以消除img多的2~3px。

           第三題:

                             width:50+20+20+3=93px
                             height:  50+20+20+3 =93px

           第四題:

                            https://codepen.io/oneraner/pen/dyYPXQz

                           覺得實務上h2與p應該會做不同的格式,先分離感覺比較好。

           第五題:
                           https://codepen.io/oneraner/pen/wvKBWZR

                          整理了一些margin、width。
           
           

2019年8月5日 星期一

日記:Bootstrap4 照抄代碼中

VSCode 整理HTML熱鍵:Alt+Shift+F

container-fluid=width:auto;

spcing查找常用標籤的快速輸入。

flex排版對齊主軸(預設橫軸),主軸可換。

看第一遍作品不夠多的時候除了照唸課文沒有辦法重新構築出自己的說法。

2019年8月4日 星期日

2019F2E3

做header的時候最常遇到的就是橫置一列清單,打完ul>li*n之後,css必備作法:

清單去除項目符號跟橫置
.header-list-item {
display: inline-flex;
list-style-type: none;

在對齊方面不斷參考王志誠老師的flex,用flex改變以往區塊元素跟行內元素的思考方式,達成排一橫列,排一直列的目標。
flex-direction: column;
改變軸線方向


超連結去底線跟滑鼠移過變色
.header a{
color: #AEAEAE;
text-decoration: none;
}
.header a:hover{
color: #707070;




參考資源:https://wcc723.github.io/css/2017/07/21/css-flex/



2019年8月2日 星期五

CSS:Class命名

     一個網頁裡一定由數個block組成,現代設計每個block的內容都是用css控制,例如:
.header{
          color:#000000;
}
    但如果有幾十個block都同一顏色或都靠左對齊,就要反覆打數十次,因此可以把常用的屬性放在一個class做反覆套用,例如:
.white{
          color: white;
}

BEM設計模式:

    BEM由Yandex團隊提出來的一種創新命名Class名稱的設計模式,BEM的意思是區塊(Block)、元素(Element)、修飾符(Modifier)。
 
    什麼時機不會需要用到BEM?可以獨立且具高重複性,例如左右對齊,四處都會用到。

block的位置

  寫有包含長寬、定位...等等關於block特有資訊的Class,為了避免日後維護困難,因此需要一目了然能夠找到關於這個block所在或是資訊的命名方式。

    參考來源:

https://blog.niclin.tw/2017/08/10/%E6%90%9E%E6%87%82-sass-%E4%B8%AD%E7%9A%84-bem-%E8%A8%AD%E8%A8%88%E5%8E%9F%E5%89%87/

https://ithelp.ithome.com.tw/articles/10160545