Skip to content

Instantly share code, notes, and snippets.

View liuxiaomingskm's full-sized avatar

xiaoming liu liuxiaomingskm

View GitHub Profile
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400" >
<h1>This Button Does Nothing</h1>
<button class="btn">Click Me</button>
@liuxiaomingskm
liuxiaomingskm / index.html
Last active January 28, 2020 17:07
Loading Page(练习了循环往复的loading图标)
<div class="container">
<h1>This page takes forever to load.</h1>
</div>
@liuxiaomingskm
liuxiaomingskm / index.html
Created January 28, 2020 17:58
Super Simple Flexbox Side Nav(练习了flex-direciton,justify-content等内容)
<div class="sidebar">
<!-- This section shoudl be at the top-->
<div class="section1">
<div class="item">Messages</div>
<div class="item">Friends</div>
<div class="item">User Profile</div>
</div>
<!-- This section should be at the botto -->
<div class="section2">
<div class="item">Settings</div>
@liuxiaomingskm
liuxiaomingskm / dead-simple-flexbox-nav-starter.markdown
Created January 28, 2020 23:24
Dead Simple Flexbox Nav(响应式navbar)
@liuxiaomingskm
liuxiaomingskm / index.html
Last active January 29, 2020 05:16
Polygon Widget (练习了flex-basis flex-grow flex-shrink)
<div class="container">
<div class="box">
<h3>Rick and Morty the Game review: a fun romp blah blah</h3>
</div>
<div class="box middle">
<h3>Lord of the Ring Seventeen million review: a fun romp blah blah</h3> </div>
<div class="box">
<h3>Game of Thrones the game review: a fun romp blah blah</h3>
</div>
</div>
@liuxiaomingskm
liuxiaomingskm / flexbox-holy-grail-starter.markdown
Last active January 29, 2020 19:06
Flexbox Holy Grail(用flex沙盒练习了web design设计传统难题Holy Grail)
@liuxiaomingskm
liuxiaomingskm / index.html
Last active February 1, 2020 01:04
Random Dog Pictures AJAX(练习了传统XMLHttpRequest的写法并了解XML的work flow)
<div class="container">
<h1>Welcome To Random Dog Pictures</h1>
<img id="photo" src="https:\/\/dog.ceo\/api\/img\/deerhound-scottish\/n02092002_6780.jpg" alt="">
<button id="btn">Get Random Dog!</button>
</div>
@liuxiaomingskm
liuxiaomingskm / ajax-bitcoin-starter.markdown
Last active February 1, 2020 17:21
AJAX Bitcoin (练习了bitcoin api的使用和XMLHttpRequest的调用)
@liuxiaomingskm
liuxiaomingskm / fetch-handling-errors.markdown
Last active February 1, 2020 19:03
Fetch Handling Errors(取代XMLHttpRequest的fetch的写法和错误处理方式)
@liuxiaomingskm
liuxiaomingskm / index.html
Last active February 1, 2020 19:52
Fetch User Profile Generator(运用fetch随机显示随机用户相关信息,colt喜欢的fetch四步骤)
<h1 class="title"> Random User Generator</h1>
<div class="user-profile">
<img id="avatar" src="https://pbs.twimg.com/profile_images/743138182607175680/ZJzktgBk_400x400.jpg" />
<div id="fullname">Jon Snow</div>
<div id="username">
kingofnorth
</div>
<div class="description">
<div>Email: <span id="email">jon@hotmail.com</span></div>
<div>City: <span id="city">Winterfell</span></div>