Use custom Font in web

  • convert tff font to webfont:
  • define font face in css 1st line
    @font-face {
        font-family: 'theFontNameHere';
        src: url('theFontNameHere-webfont.woff2') format('woff2'),
             url('theFontNameHere-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
            font-family: 'theFontNameHere';
<!DOCTYPE html>
<meta charset="UTF-8">

Problem and Solution

css file not loading

  • problem: some css file loaded while some not
  • solution: make sure no number in theCSSName.css

Responsive Design

Responsive Elements

CSS Pre-processor

  • SASS/SCSS/LESS likes, it turns what you write into a css code
    • in SASS, variable support, nesting

HTML pre-processor

  • hammer?

javascript pre-processor

  • coffeescript

to read about web


  • PACKT Responsive Web Design From Concept to Complete Site


HTML5 Elements (Widgets)


  • code for video
      min-width:100%; min-height:100%; 
      width: auto; height:auto; 
      background: url(./image/my_video.png) no-repeat;
      background-size: cover;
    <!-- if no poster, it will loop -->
    <video id='bgcover' autoplay poster='./image/my_video.png'>
      <source  src='./image/my_video.ogv' type='video/ogv' />
      <source  src='./image/my_video.webm' type='video/webm' />
      <source  src='./image/my_video.mp4' type='video/mp4' />

HTML 5 - Interactive Charts and Canvas

Web GL

Javascript for Web

  • toggle class without jquery:
    • function toggleColor() {
        var myButtonClasses = document.getElementById("btn1").classList;
        if (myButtonClasses.contains("blue")) {
        } else {
        if (myButtonClasses.contains("red")) {
        } else {
  • problem: when select dropdown, the select focus still stuck on the dropdown list, (when you press arrow key)
  • solution: to remove focus after choose, add onchange event and remove its focus
    const choice_input = document.querySelector(".my_choice")
    choice_input.onchange = function(event){
    choice_input.blur() // remove focus from this input
    // also if you have onload function, you can add this to onload to reset last choice when refresh browser
    const tmp_choice_input= document.querySelector(".my_choice")
    tmp_choice_input.selectedIndex = "0";
  • devwiki/html.txt
  • Last modified: 2022/07/08 02:08
  • by ying