這篇權當稍微紀錄一下我重拾記憶的心路歷程吧。
話說，自從決定轉職目標之後……
網路上打關鍵字，找到下面這篇文章，從念書時期就受惠ptt很多，因此一直就特別對ptt鄉民們提供的資源有迷之信心，打開之後發現原po近期也都還有在回應網友們的問題，雖然我很害羞覺得自己不會主動去問(X)，但還是有種吃了定心丸的安心感呢XD
前面括號是練習的日期orz
雖然我是資工本科系，但是是靠同學畢業的廢物點心組，所以應該跟非本科差不多吧(慘。
當年因為懶…(藉口百百種，懶是居功至偉的)去別的行業漂泊，又因為深感外面薪水確實讓人悲傷而洄游，天啦多麼勵志的故事有沒有(X
下面網址都可以點。
從這裡開始。
http://class.turn.tw/portfolio/html-and-css/
(4/13)自學網頁の嬰兒教材：第1課 ── HTML 輕入門
http://class.turn.tw/html-and-css-learn-html/
作業一
https://jsfiddle.net/second9040/uoxktrjq/33/
做個大概模型。
(4/14)自學網頁の嬰兒教材：第2課 ── CSS 輕入門
http://class.turn.tw/html-and-css-learn-css/
這裡稍微比較讓我停久一點的是margin，順序設定上有點疑惑，為毛兩個參數時設定的是上下跟左右，三個跟四個的時候順序卻不一樣了呢。總之就把他背起來…，久了就會了，吧XD
|
If the margin property has four values:
If the margin property has three values:
If the margin property has two values:
|
關於margin跟padding，w3school是這樣定義：
The CSS margin properties are used to create space around elements, outside of any defined borders.
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
然後我自己理解margin跟padding的差別是
margin是跟外面element的距離，
padding是在裡面的東西距離border的距離。
- margin定義border外面，padding定義border裡面。
關於padding跟margin的定義，後面一點的CSS Box Model也有畫圖做介紹。
padding跟margin比較不一樣的大概就box-sizing屬性，覺得很好用。
這邊只教這樣寫：box-sizing: border-box;
具體來說就是讓整體長寬不會因為padding的設定受到意料之外的影響。
作業2：把作業1的文章加上各種色彩、字體大小、各種排版，讓文章看起來變漂亮。
實作時遇到的問題：
div跟span的差別：
https://dotblogs.com.tw/brooke/2014/07/11/145905
div會自動跳行，span不會
因為本來沒想到span，所以我查了div如何並排，加一行
float:left;
就好了。
然後記得要再寫一個div消除並排效果：
<div style="clear:both;"></div>
不然下一個div就會也並排。
我一開始因為少加那一行，一直很困惑後面那個div怎麼畫面一拉長就浮上來QAQ
大標下面那個蘇南的link我卡很久，不懂為何不管怎麼改我未訪問前的顏色都沒辦法正常顯示，直到我靈機一動開無痕，才發現原來是因為程式一直把我認定是已造訪過連結的，所以我怎麼樣也看不見未訪前的連結樣子orz
然後原來連結的動作部分是不能寫一起的，意思是說不能出現這種程式碼（無法正常顯示）：
a.Su_Nan , a.top-link_style:active{
background-color:#AAAAAA;
}
但是這樣可以：
a.Su_Nan:active, a.top-link_style:active{
background-color:#AAAAAA;
}
再來就是糾正了重要的錯誤觀念：
我原本以為只要給element指定class，單獨的element style就不會套用到有class的element，後來因為margin的關係我才發現越想越不對勁orz
舉個例子就是，div class=”text1” 跟 div的style都會套用到div class=”text1”，但是text1的css就是只有text1會被套用。
想看實例的話，畫個border就懂了QAQ。
第一個字的特效用虛擬元素::first-letter進行實作(網路上找的方法)，之後就是作些許微調。
摸了一下還是搞不懂怎麼設定margin的時候上下就是沒反應，後來改用了
<span>，還是沒辦法達到理想效果，有一樣的問題，然後…只好請教google大神。
查到的code，基本上我只差在一個float！
總之，就這樣啦，圓滿完成。
(4/20)作業2成品！
https://jsfiddle.net/second9040/ewftdn0k/200/
(4/20) 自學網頁の嬰兒教材：第3課 ── 網頁排版
http://class.turn.tw/html-and-css-learn-layout/
(4/25)把課程範例全部實作一遍
https://jsfiddle.net/second9040/fdkh1wq7/269/
position的屬性，即使有文字說明加上案例，看起來依然有點令人困惑。
http://zh-tw.learnlayout.com/position.html
相對跟絕對位置的東西，只是看過去其實不容易有什麼感覺，我把網頁裡的案例全部實作一遍，大致了解了輪廓，實作過程中也建立了比較清晰的概念。
在實作媒體響應的時候遇到了困難，怎麼樣都做不出範例中的效果，我有多在後面的section加了一行position:relative，但也只是讓本來畫面不夠時會異常的container正常顯示而已，section還是擠不到nav下面去，會互相重疊。(橘色border是前面實作fixed範例的東西)
我還絕望的跑去ptt求救。有人建議我用flex，有人說只是沒clear而已，flex還不會，clear用了無效，差點懷疑前端之路就要死在這裡(X
用了兩天才發現，問題完全是出在！前面！非常前面的前面！
前面example1在設定的時候，我直接寫.nav，也就是所有nav都適用（沒有指定任何class或id），很不幸地這裡面又寫了一行position:absolute;
導致了我這兩天的悲劇orz，所以說，要麼你就好好設定class，要麼別貪圖方便把所有練習幾在同個網頁裡= =，好吧總之人生圓滿，讓我們繼續往下一part前進！
為了方便辨識，練習的時候我都有加border，為了美觀還有設margin，因此實作inline-block的時候，在寬度的設定上，兩個區塊如果設定加起來是100%是無法並排的，因此example8的部分寬度加起來只有95%。
為了練習第三課的作業排版練習，從fiddle移到了glitch，沒想到一開始就遇到一直被提示錯誤的狀況，說是我多了個分號。
到底是哪裡多了分號？超不解，最後發現刪掉line-height:24px;這行就不會出現錯誤提示，但是我就是要設定行距啊？？？
另外，letter-spacing也有這個狀況，所以是跟字的設定都過不去嗎XDD
最後，我查到網路上有文章是說最好不要使用高級編輯器（翻譯），我想可能是本身glitch的判讀錯誤吧，反正沒有影響到網頁顯示，我只好忍著就不糾結這個了，天哪那個紅紅的在那邊真的看得我眼睛超痛。
接著讓我遇到困難的是這個：
這個紅白框框！
竟然！不是圖片！
我根本想不出這是怎麼弄的，就去開網頁原始碼啦XDD
知道這可能純粹是用border做出來的我真是超震驚啊XDDD
css也太強！
參閱文章：
https://www.cnblogs.com/jscode/archive/2012/10/19/2730905.html
https://www.cnblogs.com/wuguanglin/p/interestingCSS.html
https://www.minwt.com/webdesign-dev/css/1179.html
摸了一下，整理得到的資訊如下：
border-top：由上往下的長度。
border-right：由右至左的長度。
border-left：由左至右的長度。
border-bottom：由下往上的長度。
想要畫出非方形border，就是用蓋住的方式，蓋出來。
不過這是在把元素的高跟寬都設0的狀況下。
另外，因為display設為inline-block時，vertical-align這個屬性會影響位置，所以記得要加一行
vertical-align: top;
最後，雖然我用三個div拼出了欄位的效果，我還是覺得不太懂＠＠
而且視窗小到一定程度時，字也沒辦法讓他隨著視窗縮小，總之，就先這樣吧。
後來應徵到工作，其他部分就先不做了，先看公司的東西為主了。
半成品：
https://glitch.com/~rambunctious-earl
第四課，表格。
(5/1)http://class.turn.tw/html-and-css-learn-table/
蠻簡單的，最後很簡單的做了個日曆成品。
大概知道屬性是怎麼用的就好。
(5/1)https://jsfiddle.net/second9040/dwymczqh/31/
第五課，表單。
(5/2)http://class.turn.tw/html-and-css-learn-form/
裏頭提供的教學網頁跟上一課一樣是蠻簡單的，做作業的時候因為發現好像沒看到post屬性怎麼用，有再另外看一下w3c的form單元。
這邊寫幾個一開始光看字面沒看懂的屬性（我的理解，有錯請指出）：
novalidate
The novalidate attribute is a <form> attribute.
When present, novalidate specifies that the form data should not be validated when submitted.
什麼叫做沒有驗證？就是不驗證啊，但我一開始真的看不懂XDDD
比如說type=”email”，正常來說你打一串沒有@的東西submit會被指出錯誤，如果開啟novalidate就不會指出，因為它不驗證。
autofocus
The autofocus attribute specifies that the input field should automatically get focus when the page loads.
我還去查我對focus的英文理解到底有沒有錯，什麼叫做沒有聚焦？結果其實就是游標位置而已啦XD
設定autofocus，頁面一顯示欄位上就會有游標，而不需要自己再用滑鼠去點。
form
The form attribute specifies one or more forms an <input> element belongs to.
這個看實例比較好懂。
就是如果你把input寫在form tag外面，加上form屬性可以指定這個input屬於哪個form。
我突然覺得我對於把文字具象化的能力超級差orz
formaction
The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.
The formaction attribute overrides the action attribute of the <form> element.
The formaction attribute is used with type="submit" and type="image".
action是你本來表單送出後會顯示的頁面，formaction會覆寫action，如果想要指定到別的頁面可以使用。
pattern
The pattern attribute specifies a regular expression that the <input> element's value is checked against.
The pattern attribute works with the following input types: text, search, url, tel, email, and password.
ex. pattern="[A-Za-z]{3}"
限制輸入形式，如上範例就是只能輸入3個英文字母，多跟少都不行。
最後，一個蠻簡陋的作業5成品：
(5/2)https://jsfiddle.net/second9040/a6ezfu7r/47/
課程六 環境設定
(5/3)環境設定
http://class.turn.tw/html-and-css-learn-environment/
我是用sublime啦。
課程作業是做個leading page，看完導覽文章還是沒什麼概念，最後想說乾脆給自家生意隨便做個網頁…
看懂語法跟實際能寫真的是有落差，我一開始連css網址怎麼指定都卡住，背景圖片設定也卡住，然後到透明度的時候又卡住。
真的上了才發現，啊原來是卡卡人生啊乾。
設定背景圖片（自動縮放、不重複等屬性）參考文章
要注意設定的是background，不是bachground-image屬性。
平常在用的色碼表：
https://www.toodoo.com/db/color.html
https://www.ifreesite.com/color/color-code-converter.htm
色彩透明度設定參考文章：
https://www.webdesigns.com.tw/CSS-opacity.asp
概括而言：使用rgba(255,255,187,0.9)
a是alpha，就是我要設定的透明度，0.9表示透明度90%。
我對字體有一種莫名的執念，這篇文章寫得還不錯，也有範例，可以看一下。
https://wcc723.github.io/css/2014/01/01/font-family/
要幫input做點美編的時候突然有點困惑怎麼好像沒怎麼看到有人在給input指定class，查了一下，大概是因為如此會顯得Css冗長，所以我就放心的、開心的、沒在管的指定我歡樂的class了~XDDD
這邊寫太久了（其實是這幾天太混），為了快點結束，決定草草結束了事即可。
But，人生就是因為充滿這個but才有那麼多驚喜，越想快就越快不了。
在做一些input練習的時候我突然又困惑了，input的眾多屬性中，到底class
、type、name這些屬性，可不可以都給一樣的名字，有沒有保留字的設定？
經過一點簡單的實驗……嗯，好像沒有的哦？
(5/7)簡陋的leading page成品。(我家做八方的，背景圖是爸爸朋友XD)
https://drive.google.com/drive/folders/1vw755osn_ArGC9BPxihPVPBLTdaRc2OW?usp=sharing
第七課因為是只有教你自己做個上線網頁，我趕時間，就沒有做了。
（實作以上課程途中去面試獲得(騙到)了一個網頁前端工作，詳情請見上一篇面試文XD）
做完六課我真的深刻覺得display屬性確實超級超級重要，我到最後面都還是直接切回去看我原本做的，因為背不起來無法直覺寫出我要的效果(X
以上是這陣子看教學＋實作過程中的一點記錄，做完這些大概算是勉強對整個html跟css有了一個大致熟悉的輪廓吧。
學如逆水行舟，不進則退，讓我們繼續努力學習吧（哈），接下來是javascript。
其實我們比較想說各人造業各人擔。
最後推薦個我覺得還不錯的時間追蹤軟體toggl，我這用的是網頁版，功能很齊全，我只用最基本的，詳細使用文章可以自行再去google。
這邊可以蠻清楚看見自己花在研讀與實作的時間有多少，至於我吧，我只看見我每天都好混居然上禮拜還有兩天完全沒有摸不知道在做什麼，就當我還沒正式離職真的很忙好了，雖然全世界都知道這是騙人的啦。
留言列表
