任務一：零基礎HTML編碼
課程概述
作業提交截止時間：04-24
重要說明
百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們盡力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐。
課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去思考不同的解決方案，評估不同方案的優劣，然后使用在該場景下最優雅的方式去實現。那些最終沒有被我們采納的方案，同樣也可以幫助我們學到很多知識。所以，我們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料里就有，但是背后的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信通過和小伙伴們的交流，能讓你的學習事半功倍。
任務目的
了解HTML的定義、概念、發展簡史
掌握常用HTML標簽的含義、用法
能夠基於設計稿來合理規划HTML文檔結構
理解語義化，合理地使用HTML標簽來構建頁面
任務描述
參考示例圖（點擊查看），完成一個HTML頁面代碼編寫（不寫CSS，不需要關注樣式，只關注文檔結構）
任務注意事項
只需要完成HTML代碼編寫，不需要寫CSS
示例圖僅為參考，不需要完全實現一致，其中的圖片、文案均可自行設定
盡可能多地嘗試更多的HTML標簽
在線學習參考資料
任務二：零基礎HTML及CSS編碼（一）
課程概述
作業提交截止時間：04-24
重要說明
百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們盡力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐。
課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去思考不同的解決方案，評估不同方案的優劣，然后使用在該場景下最優雅的方式去實現。那些最終沒有被我們采納的方案，同樣也可以幫助我們學到很多知識。所以，我們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料里就有，但是背后的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信通過和小伙伴們的交流，能讓你的學習事半功倍。
任務目的
針對設計稿樣式進行合理的HTML架構，包括以下但不限於：
- 掌握常用HTML標簽的含義、用法
能夠基於設計稿來合理規划HTML文檔結構
理解語義化，合理地使用HTML標簽來構建頁面
掌握基本的CSS編碼，包括以下但不限於：
- 了解CSS的定義、概念、發展簡史
掌握CSS選擇器的含義和用法
實踐並掌握CSS的顏色、字體、背景、邊框、盒模型、簡單布局等樣式的定義方式
任務描述
基於第一個任務“零基礎HTML編碼”的代碼，參考 示例圖（點擊查看），在步驟一的代碼基礎上增加CSS樣式代碼的編寫
任務注意事項
只需要完成HTML，CSS代碼編寫，不需要寫JavaScript
示例圖僅為參考，不需要完全實現一致，其中的圖片、文案均可自行設定
盡可能多地嘗試不同的、更多的樣式設定來實踐各種CSS屬性
HTML 及 CSS 代碼結構清晰、規范
在線學習參考資料
MDN HTML入門
MDN CSS入門教程
慕課HTML+CSS基礎教程視頻
任務三：三欄式布局
課程概述
作業提交截止時間：04-24
重要說明
百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們盡力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐。
課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去思考不同的解決方案，評估不同方案的優劣，然后使用在該場景下最優雅的方式去實現。那些最終沒有被我們采納的方案，同樣也可以幫助我們學到很多知識。所以，我們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料里就有，但是背后的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信通過和小伙伴們的交流，能讓你的學習事半功倍。
任務目標
掌握HTML/CSS布局的概念
掌握盒模型的概念
掌握position與float的概念以及在布局時的用法
任務描述
使用 HTML 與 CSS 按照 示例圖（點擊查看） 實現三欄式布局。
左右兩欄寬度固定，中間一欄根據父元素寬度填充滿，最外面的框應理解為瀏覽器。背景色為 #eee 區域的高度取決於三個子元素中最高的高度。
任務注意事項
嘗試 position 和 float 的效果，思考它們的異同和應用場景。
注意測試不同情況，尤其是極端情況下的效果。
圖片和文字內容請自行替換，盡可能體現團隊的特色。
調節瀏覽器寬度，固定寬度和自適應寬度的效果始終符合預期。
改變中間一欄的內容長度，以確保在中間一欄較高和右邊一欄較高時，父元素的高度始終為子元素中最高的高度。
其他效果圖中給出的標識均被正確地實現。
參考資料
MDN：position：了解 CSS position 屬性的基本知識
MDN：float：了解 CSS float 屬性的基本知識
Learn CSS Positioning in Ten Steps：通過具體的例子熟悉 position 屬性
清除浮動（clearfix hack）：清除浮動是什么，如何簡單地清除浮動
StackOverflow：Which method of ‘clearfix’ is best?：清除浮動黑科技完整解讀
任務四：定位和居中問題
重要說明
百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們盡力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐。
課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去思考不同的解決方案，評估不同方案的優劣，然后使用在該場景下最優雅的方式去實現。那些最終沒有被我們采納的方案，同樣也可以幫助我們學到很多知識。所以，我們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料里就有，但是背后的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信通過和小伙伴們的交流，能讓你的學習事半功倍。
任務目標
實踐HTML/CSS布局方式
深入了解position等CSS屬性
任務描述
實現如 示例圖（點擊打開） 的效果
灰色元素水平垂直居中，有兩個四分之一圓位於其左上角和右下角。
任務注意事項
思考不同情況下（如灰色高度是根據內容動態變化的）水平垂直居中的解決方案。
動手試一試各種情況的組合，父元素和子元素分別取不同的 position 值。思考 position 屬性各種取值的真正含義，尤其是 absolute 究竟是相對誰而言的。
注意測試不同情況，尤其是極端情況下的效果。
調節瀏覽器寬度，灰色元素始終水平居中。
調節瀏覽器高度，灰色元素始終垂直居中。
調節瀏覽器高度和寬度，黃色扇形的定位始終准確。
其他效果圖中給出的標識均被正確地實現，錯一項扣一分。
參考資料
HTML和CSS高級指南之二——定位詳解：大漠老師手把手教你，這次徹底搞懂定位問題
Centering in CSS: A Complete Guide：完整討論了不同情況下的居中方案，建議自己思考之后再看答案
Get HTML & CSS Tips In Your Inbox：有人寫了一個作弊工具生成居中代碼，但是看着代碼你明白為什么嗎
任務五：零基礎HTML及CSS編碼（二）
重要說明
百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們盡力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐。
課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去思考不同的解決方案，評估不同方案的優劣，然后使用在該場景下最優雅的方式去實現。那些最終沒有被我們采納的方案，同樣也可以幫助我們學到很多知識。所以，我們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料里就有，但是背后的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信通過和小伙伴們的交流，能讓你的學習事半功倍。
任務目的
針對設計稿樣式進行合理的HTML架構，包括以下但不限於：
-
掌握常用HTML標簽的含義、用法
能夠基於設計稿來合理規划HTML文檔結構
理解語義化，合理地使用HTML標簽來構建頁面
掌握基本的CSS編碼，包括以下但不限於： -
了解CSS的定義、概念、發展簡史
掌握CSS選擇器的含義和用法
實踐並掌握CSS的顏色、字體、背景、邊框、盒模型、簡單布局等樣式的定義方式
任務描述
基於第一個任務“零基礎HTML編碼”的代碼，參考 示例圖（點擊查看），在步驟一的代碼基礎上增加CSS樣式代碼的編寫
頭部和底部的黑色區域始終是100%寬
頁面右側部分為固定寬度，左側保持與瀏覽器窗口變化同步自適應變化
左側的各個模塊里面的內容寬度跟隨左側整體寬度同步自適應變化
10張圖片需要永遠都完整展現，所以會隨着寬度變窄，從兩行變成三行甚至更多，也有可能隨着寬度變寬，變成一行
任務注意事項
只需要完成HTML，CSS代碼編寫，不需要寫JavaScript
示例圖僅為參考，不需要完全實現一致，其中的圖片、文案均可自行設定
盡可能多地嘗試不同的、更多的樣式設定來實踐各種CSS屬性
HTML 及 CSS 代碼結構清晰、規范
在線學習參考資料
MDN HTML入門
MDN CSS入門教程
慕課HTML+CSS基礎教程視頻
任務六：通過HTML及CSS模擬報紙排版
重要說明
百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們盡力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐。
課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去思考不同的解決方案，評估不同方案的優劣，然后使用在該場景下最優雅的方式去實現。那些最終沒有被我們采納的方案，同樣也可以幫助我們學到很多知識。所以，我們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料里就有，但是背后的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信通過和小伙伴們的交流，能讓你的學習事半功倍。
任務目的
深入掌握CSS中的字體、背景、顏色等屬性的設置
進一步練習CSS布局
任務描述
參考 PDS設計稿（點擊下載），實現頁面開發，要求實現效果與 樣例（點擊查看） 基本一致
頁面中的各字體大小，內外邊距等可參看 標注圖（點擊查看）
頁面寬度固定（定寬）
任務注意事項
只需要完成HTML，CSS代碼編寫，不需要寫JavaScript
設計稿中的圖片、文案均可自行設定
在Chrome中完美實現符合標注中的各項說明
有能力的同學可以嘗試跨瀏覽器的兼容性
有能力的同學可以在實現一遍后嘗試用less, sass或者stylus等再實現一次
在線學習參考資料
MDN HTML入門
MDN CSS入門教程
任務七：實現常見的技術產品官網的頁面架構及樣式布局
重要說明
百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們盡力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐。
課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去思考不同的解決方案，評估不同方案的優劣，然后使用在該場景下最優雅的方式去實現。那些最終沒有被我們采納的方案，同樣也可以幫助我們學到很多知識。所以，我們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料里就有，但是背后的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信通過和小伙伴們的交流，能讓你的學習事半功倍。
任務目的
通過實現一個常見的技術產品官網，加深對於HTML，CSS的實戰能力
學習掌握如何在沒有標注的情況下實現設計稿到頁面的精確轉變
任務描述
通過HTML及CSS實現設計稿 設計稿PSD文件（點擊下載），效果如 效果圖（點擊打開）
設計稿是有一定寬度的，這個寬度為頁面的最小寬度，也就是說，當瀏覽器窗口寬度小於設計稿寬度時，允許出現橫向滾動條，頁面內容寬度保持不變，但是當瀏覽器窗口寬度大於設計稿寬度時，頁面部分內容的寬度應該保持和瀏覽器窗口寬度一致，具體哪些部分題目不做具體指明，看看大家的判斷如何。
任務注意事項
只需要完成HTML，CSS代碼編寫，不需要寫JavaScript
設計稿中的圖片、文案均可自行設定
在Chrome中完美實現與設計稿的各項字體、布局、內外邊距等樣式
有能力的同學可以嘗試跨瀏覽器的兼容性
有能力的同學可以在實現一遍后嘗試用less, sass或者stylus等再實現一次
在線學習參考資料
MDN HTML入門
MDN CSS入門教程
任務八：響應式網格（柵格化）布局
重要說明
百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們盡力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐。
課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去思考不同的解決方案，評估不同方案的優劣，然后使用在該場景下最優雅的方式去實現。那些最終沒有被我們采納的方案，同樣也可以幫助我們學到很多知識。所以，我們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料里就有，但是背后的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信通過和小伙伴們的交流，能讓你的學習事半功倍。
任務目的
使用 HTML 與 CSS 實現類似 BootStrap 的響應式 12 欄網格布局，根據屏幕寬度，元素占的欄數不同。
任務描述
需要實現如 效果圖 所示，調整瀏覽器寬度查看響應式效果，效果圖中的紅色的文字是說明，不需要寫在 HTML 中。
任務注意事項
網格布局的作用在於更有效地控制元素在網頁中所占比例的大小。比如，博客中有一個留言板模塊，在比較大的屏幕上，我們希望它占了右邊 25% 的寬度，在手機等比較小的屏幕上，我們希望它占 100% 的寬度，出現在博客文章下方。網格布局是一種實現這一需求的辦法，它的好處是，把所有的寬度分為固定欄數（常用 12 欄），從而更高效的控制元素寬度。而這功能，我們使用 HTML 和 CSS 就能實現了。
以 BootStrap 的網格系統為例，DOM 元素類名形如 col-md-4；其中 col 是“列” column 的縮寫；md 是 medium 的縮寫，適用於應屏幕寬度大於 768px 的場景；4 是占四欄的意思。因此，col-md-4 的意思是，在屏幕寬度大於 768px 時，該元素占四欄。
在線學習參考資料
BootStrap 官網：如果你沒用過的話，至少了解一下它是做什么的
Bootstrap grid examples：改變瀏覽器寬度，查看不同類名元素的表現，理解網格系統的作用。然后，通過“審查元素”查看對應 CSS，思考這一系統是如何實現的
Creating Your Own CSS Grid System：你可以先自己想想怎么實現，沒有思路的話看看別人的做法
任務九：使用HTML/CSS實現一個復雜頁面
重要說明
百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們盡力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐。
課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去思考不同的解決方案，評估不同方案的優劣，然后使用在該場景下最優雅的方式去實現。那些最終沒有被我們采納的方案，同樣也可以幫助我們學到很多知識。所以，我們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料里就有，但是背后的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信通過和小伙伴們的交流，能讓你的學習事半功倍。
任務目的
通過實現一個較為復雜的頁面，加深對於HTML，CSS的實戰能力
實踐代碼的復用、優化
任務描述
通過HTML及CSS實現設計稿 設計稿PSD文件（點擊下載），效果如 效果圖（點擊打開）
整個頁面內容寬度固定，但頭部的藍色導航和瀏覽器寬度保持一致
任務注意事項
只需要完成HTML，CSS代碼編寫，不需要寫JavaScript
tab只需要實現樣式，有能力余力的同學可以嘗試實現不使用JavaScript的情況下，實現Tab切換
所有的下拉菜單（Select）均要求按照設計稿樣式實現，下拉后的樣式自定義，不需要實現下拉選擇的功能，但樣式要實現
在Chrome中完美實現與設計稿的除了文字以外的各項圖片、字體、顏色、布局、內外邊距等樣式
有能力的同學可以嘗試跨瀏覽器的兼容性
有能力的同學可以在實現一遍后嘗試用less, sass或者stylus等再實現一次
在線學習參考資料
MDN HTML入門
MDN CSS入門教程
任務十：Flexbox 布局練習
重要說明
百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們盡力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐。
課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去思考不同的解決方案，評估不同方案的優劣，然后使用在該場景下最優雅的方式去實現。那些最終沒有被我們采納的方案，同樣也可以幫助我們學到很多知識。所以，我們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料里就有，但是背后的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信通過和小伙伴們的交流，能讓你的學習事半功倍。
任務目的
學習如何flex進行布局，學習如何根據屏幕寬度調整布局策略。
任務描述
需要實現的效果如效果圖（點擊打開）所示，調整瀏覽器寬度查看響應式效果，紅色的文字是說明，不需要寫在 HTML 中。
任務注意事項
只需要完成HTML，CSS代碼編寫，不需要寫JavaScript
屏幕寬度小於 640px 時，調整 Flexbox 的屬性以實現第四個元素移動到最前面的效果，而不要改動第一個元素的邊框顏色與高度實現效果圖。
思考 Flexbox 布局和網格布局的異同，以及分別適用於什么樣的場景。可以搜索一下別人的結論，不過要保持思辨的態度，不可直接接受別人的觀點。
HTML 及 CSS 代碼結構清晰、規范
在線學習參考資料
Flexbox詳解：了解 Flexbox 屬性的含義
圖解 CSS3 Flexbox 屬性：看完這兩篇，對 Flexbox 的了解就夠了，多實踐一下，理解會更深刻
Flexbox——快速布局神器
使用 CSS 彈性盒
MDN flex屬性
任務十一：移動Web頁面布局實踐
重要說明
百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們盡力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐。
課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去思考不同的解決方案，評估不同方案的優劣，然后使用在該場景下最優雅的方式去實現。那些最終沒有被我們采納的方案，同樣也可以幫助我們學到很多知識。所以，我們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料里就有，但是背后的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信通過和小伙伴們的交流，能讓你的學習事半功倍。
任務目的
進行移動開發時的HTML及CSS實踐
掌握移動Web開發在頁面架構和布局的方法及差異性
掌握移動Web開發頁面調試的方法
任務描述
實現與 設計圖（點擊查看） 一致的移動端Web頁面
任務注意事項
本任務只涉及 HTML 及 CSS
實現的頁面和設計圖在iOS Safari，微信，Android瀏覽器中均基本一致
HTML 及 CSS 代碼結構清晰、規范
嘗試在適合的地方使用CSS 3中的flex布局
有能力的同學可以在實現一遍后嘗試用less, sass或者stylus等再實現一次
在線學習參考資料
- MDN:手機網頁開發
- MDN:在移動瀏覽器中使用viewport元標簽控制布局
- 移動前端開發和 Web 前端開發的區別是什么
- Alloyteam移動開發規范概述
- 手機/移動前端開發需要注意的20個要點
- w3cplus響應式技術資源
- 淺談移動Web開發
- Alloyteam Mars
- 移動WEB開發入門
- 移動開發資源集合
- The Mobile Web Handbook
- MobileWeb 適配總結
- 移動前端不得不了解的html5 head 頭標簽
任務十二：學習CSS 3的新特性
重要說明
百度前端技術學院的課程任務是由百度前端工程師專為對前端不同掌握程度的同學設計。我們盡力保證課程內容的質量以及學習難度的合理性，但即使如此，真正決定課程效果的，還是你的每一次思考和實踐。
課程多數題目的解決方案都不是唯一的，這和我們在實際工作中的情況也是一致的。因此，我們的要求不僅僅是實現設計稿的效果，更是要多去思考不同的解決方案，評估不同方案的優劣，然后使用在該場景下最優雅的方式去實現。那些最終沒有被我們采納的方案，同樣也可以幫助我們學到很多知識。所以，我們列出的參考資料未必是實現需求所必須的。有的時候，實現題目的要求很簡單，甚至參考資料里就有，但是背后的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時，要多思考，多提問，多質疑。相信通過和小伙伴們的交流，能讓你的學習事半功倍。
任務目的
學習了解 CSS 3 都有哪些新特性，並選取其中一些進行實戰小練習
任務描述
實現 示例圖（點擊查看） 中的幾個例子
任務注意事項
本任務只涉及 HTML 及 CSS
HTML 及 CSS 代碼結構清晰、規范
除了任務中的3個小任務，盡可能多地嘗試 CSS 3 的其他新特性
在線學習參考資料