Code Monkey home page Code Monkey logo

frontend-intermediate-course's People

Contributors

aszx87410 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

dezchuang geoff8191 waiwai0308 gogogohuang vegeta-66 yuanyu90221 pychiang clingoram abvdsk yuki0916 advancedor96 itsems leowangj miau715 decadehew allenhsu168 itony215 sklack ponponwu chihshenghuang lucrecialin cestmia matin5 fuchiao zach0429 art-forks ptabc xiaoqingjia wahahaxdd azraeil albertmunto kckcc wiiatgit ntuaha mithril9901 tomatoprinx ugiyo wushian yrfang didi28108 alec0123321 iamcarriez iflin trnet4334 jamielin125 e920528 apextw kc17 gaitz visylockhart morax00123 yf-ashu shineve a922777 samanthachenyu frankurcrazy iiversonlin twjimwang paul61843 keronscribe mistborn6 wuchiwei ychuangab mantinglan iachievedream sgryan771211 luckytiger66 ucsgreenally noctishsu laiyenju tan-i-ham xu3cjo4vup kokokuo hui190822 qiiwiiq leonhsieh icodein kuohsiangyu2 pces8729 anthonyhappens peter11300 webdevsquad mmajiamin tomfrontend

frontend-intermediate-course's Issues

[作業] 繳交hw1

slack 帳號

ding_ding

哪一個作業

  1. 基本 HTML/CSS 練習：以 Twitch 為例

作業 Github 連結

https://github.com/advancedor96/frontend-intermediate-course/tree/master/answers/hw1
(index.html是我的版本。另外的index2.html是邊看胡立老師youtube解說所打下來的記錄而已)

作業 Github Page 連結

https://advancedor96.github.io/frontend-intermediate-course/answers/hw1/

其他補充說明

  • 全部用flexbox排版。

  • 字型使用微軟正黑體以及cursive。(隨便挑的)

  • 如果字變成很多超出範圍的話，會變成「....」

  • 不知道還有沒有bug

[作業] 繳交hw1

slack 帳號

martin

哪一個作業

  1. 基本 HTML/CSS 練習：以 Twitch 為例

作業 Github 連結

https://github.com/matin5/frontend-intermediate-course/tree/master/answers/hw1

作業 Github Page 連結

https://matin5.github.io/frontend-intermediate-course/answers/hw1/

問題

  1. 為什麼圖片1中紅色箭頭指的位置會有間隔呢? 找好久，還是看不出原因...
    圖片1

  2. 為什麼我在 background image 後加上 no-repeat center，背景會變成灰白，是我電腦的問題嗎? Safari 跟 Chrome 都一樣

body {
  background-image: url("../images/bg-default.jpg") no-repeat center;
  background-attachment: fixed;
  margin: 0;
}

圖片2

[作業] 繳交hw2

slack 帳號

decadehew

哪一個作業

  1. 讓畫面變得更動態：神奇的 CSS transition

作業 Github 連結

https://github.com/decadehew/frontend-intermediate-course/tree/master/answers/hw2

作業 Github Page 連結

https://decadehew.github.io/frontend-intermediate-course/answers/hw2/index.html

其他補充說明

這次作業是用huli老師作業1去模仿和做，理解後，覺得學到很多技巧，不錯實踐。
然後在用作業2要求進行把畫面更有動態，感覺有點象動畫圖。
希望可以學到老師寫網頁思考方式和技巧。

[作業]繳交Hw2

slack 帳號

gogogohuang

哪一個作業

  1. 讓畫面變得更動態：神奇的 CSS transition

作業 Github 連結

https://github.com/gogogohuang/frontend-intermediate-course/tree/master/answers/hw2

作業 Github Page 連結

https://gogogohuang.github.io/frontend-intermediate-course/answers/hw2/index.html

其他補充說明

  1. 重新用flex排版。
  2. 想問如何取消掉大頭貼的hover效果？想達到的效果是讓filter效果不在大頭貼上面運行。目前想到的辦法是分開實現filter。可以取消child的hover效果嗎？目前找到的pointer-event 好像在child無法work.@@

[問題] 縮小視窗當y軸 出現scroll bar時 覆蓋在背景圖上的 div延伸 問題

[問題] 縮小視窗當y軸 出現scroll bar時 覆蓋在背景圖上的 div延伸 問題

以下是目前做出的效果

連結如下
https://yuanyu90221.github.io/frontend-intermediate-course/answers/hw1
我的結構大致如下
<body>
<div class="mask">
</div>
</body>

CSS 結構如下

html{
	height: 100%;
}
body {
	background-image: url('../images/bg-default.jpg');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	height: 100%;
}
/*mask 透明度 0.5 */
.mask{
	box-sizing: border-box;
	background: rgba(0,0,0,.5);
	background-size: cover;
	z-index: -999;/*讓背景能放在底部 ref http://www.astralweb.com.tw/full-screen-backround-image/*/
	height: 100%;
	width: 100%;
	min-height: 100%;
	/*置中對齊*/
	display: flex;
	justify-content:  center; 
 }

但是 當我把時窗縮小時 並且scroll down畫面如下
2017_04_11_12_10_38_twitch_demo
.mask 卻無法照著我設定 height:100%;這樣的特性做延展
想請問該使用甚麼屬性才能讓這個 畫面被.mask這個遮罩填滿scrollable的畫面呢
目前查到的好像都是把 position設定成fixed 但這樣設定就無法做scroll down了

想問問 看看有沒有甚麼解法

[問題]縮小視窗當y軸 出現scroll bar時 覆蓋在背景圖上的 div延伸 問題

[問題] 縮小視窗當y軸 出現scroll bar時 覆蓋在背景圖上的 div延伸 問題

以下是目前做出的效果

連結如下
https://yuanyu90221.github.io/frontend-intermediate-course/answers/hw1
我的結構大致如下
<body>
<div class="mask">
</div>
</body>

CSS 結構如下

html{
	height: 100%;
}
body {
	background-image: url('../images/bg-default.jpg');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	height: 100%;
}
/*mask 透明度 0.5 */
.mask{
	box-sizing: border-box;
	background: rgba(0,0,0,.5);
	background-size: cover;
	z-index: -999;/*讓背景能放在底部 ref http://www.astralweb.com.tw/full-screen-backround-image/*/
	height: 100%;
	width: 100%;
	min-height: 100%;
	/*置中對齊*/
	display: flex;
	justify-content:  center; 
 }

但是 當我把時窗縮小時 並且scroll down畫面如下
2017_04_11_12_10_38_twitch_demo
.mask 卻無法照著我設定 height:100%;這樣的特性做延展
想請問該使用甚麼屬性才能讓這個 畫面被.mask這個遮罩填滿scrollable的畫面呢
目前查到的好像都是把 position設定成fixed 但這樣設定就無法做scroll down了

想問問 看看有沒有甚麼解法

[作業] 繳交 hw2

slack 帳號

miau

哪一個作業

  1. 讓畫面變得更動態：神奇的 CSS transition

作業 Github 連結

https://github.com/miau715/frontend-intermediate-course/tree/master/answers/hw2

作業 Github Page 連結

https://miau715.github.io/frontend-intermediate-course/answers/hw2/index.html

其他補充說明

直接將整個直播區塊加上 filter 時會讓下半部的實況主頭像、名稱一併變亮，但覺得效果並不好，特別是像目前使用的替代頭像顏色較淺時會有過曝般看不清楚的狀況，因此下半部改用變更背景色的方式處理。

[問題] 縮小視窗當y軸 出現scroll bar時 覆蓋在背景圖上的 div延伸 問題

[問題] 縮小視窗當y軸 出現scroll bar時 覆蓋在背景圖上的 div延伸 問題

以下是目前做出的效果

連結如下
https://yuanyu90221.github.io/frontend-intermediate-course/answers/hw1
我的結構大致如下
<body>
<div class="mask">
</div>
</body>

CSS 結構如下

html{
	height: 100%;
}
body {
	background-image: url('../images/bg-default.jpg');
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	height: 100%;
}
/*mask 透明度 0.5 */
.mask{
	box-sizing: border-box;
	background: rgba(0,0,0,.5);
	background-size: cover;
	z-index: -999;/*讓背景能放在底部 ref http://www.astralweb.com.tw/full-screen-backround-image/*/
	height: 100%;
	width: 100%;
	min-height: 100%;
	/*置中對齊*/
	display: flex;
	justify-content:  center; 
 }

但是 當我把時窗縮小時 並且scroll down畫面如下
2017_04_11_12_10_38_twitch_demo
.mask 卻無法照著我設定 height:100%;這樣的特性做延展
想請問該使用甚麼屬性才能讓這個 畫面被.mask這個遮罩填滿scrollable的畫面呢
目前查到的好像都是把 position設定成fixed 但這樣設定就無法做scroll down了

想問問 看看有沒有甚麼解法

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.