Tips & Tricks

In this example, we create the block-grid effect by using CSS grid grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)).

Read more →

I created an example that demonstrates block-grid by using Flexbox.

https://codepen.io/makzan/pen/VbQdWJ/

Read more →

The code that disables auto-complete, auto-correct, auto-capitalize and spell check.

<input autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false">

Read more →

Read more →

A quick demo:

Read more →

CSS priority is determined by how specific the selector is.

Read more →

2 examples that apply a beautiful and useful effects when the input field is focused.

Read more →

In this short video, I showed the steps to setup a wordpress development environment in Cloud9. I also add some basic CSS styles on the theme.

Read more →

http://blog.createjs.com/stagegl-faster-better-stronger-webgl-update-easeljs/

StageGL is a drop-in replacement for the CreateJS Stage.

Read more →

http://codepen.io/nakome/pen/vmKwQg

Read more →

https://developer.apple.com/reference/livephotoskitjs/

<div
  data-live-photo
  data-shows-native-controls
  data-photo-src="https://cdn.makzan.net/IMG_7677.JPG"
  data-video-src="https://cdn.makzan.net/IMG_7677.mov"
  style="width:320px;height:320px;"
>    
  <img src='https://cdn.makzan.net/IMG_7677.JPG' alt='Sample Live Photo in Macao Science Center.'>
</div>

Read more →

https://hackernoon.com/javascript-learn-regular-expressions-for-beginners-bb6107015d91

Read more →

I created a web page to test if your mobile browser overrides the user-scalable meta configuration.

https://user-scalable-test.glitch.me/

Read more →

Read more →

*{
  box-sizing: border-box;
}

Read more →

ModernWeb.Design is an online mentorship community to learn web design. You can find tutorials, courses, and test projects (exercises) here.

Read more →