text: <!DOCTYPE html>
  <html lang="en-US">
  <head>
  	<meta charset="UTF-8" />
  	<meta name="google-site-verification" content="T2PY-edeMXtnFWFQcsS136kF3BK2S1cL577jY5hkS4s" />
  	<meta name="propeller" content="4b6deda6ab514c0abb4a341231ffc937">
  	
  	
  	<!--Start of Tawk.to Script-->
  <script type="text/javascript">
  var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
  (function(){
  var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
  s1.async=true;
  s1.src='https://embed.tawk.to/5f202c224eb6fc4a189b03e0/default';
  s1.charset='UTF-8';
  s1.setAttribute('crossorigin','*');
  s0.parentNode.insertBefore(s1,s0);
  })();
  </script>
  <!--End of Tawk.to Script-->
  	
  	
  	<script>(function(s,u,z,p){s.src=u,s.setAttribute('data-zone',z),p.appendChild(s);})(document.createElement('script'),'https://iclickcdn.com/tag.min.js',3330907,document.body||document.documentElement)</script>
  	<link rel="profile" href="http://gmpg.org/xfn/11" />
  	<link rel="pingback" href="https://askbootstrap.com/xmlrpc.php" />
  	<script data-ad-client="ca-pub-5988734874428626" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  	
  	
  	
  	
  	
  	<!-- This site is optimized with the Yoast SEO plugin v14.0.2 - https://yoast.com/wordpress/plugins/seo/ -->
  	<title>Web development on Chrome OS - Ask Bootstrap</title>
  	<meta name="robots" content="index, follow" />
  	<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
  	<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
  	<link rel="canonical" href="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" />
  	<meta property="og:locale" content="en_US" />
  	<meta property="og:type" content="article" />
  	<meta property="og:title" content="Web development on Chrome OS - Ask Bootstrap" />
  	<meta property="og:description" content="This talk demonstrates how in a few clicks you can get a full web development environment up and running on Chrome OS, including how to do cross-browser testing! 🙂 Transcript Hi. I&#8217;m Emilie Roberts, a developer advocate with Chrome OS developer relations. Today, I&#8217;m going to talk about web development on Chromebooks. Here is a &hellip;" />
  	<meta property="og:url" content="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" />
  	<meta property="og:site_name" content="Ask Bootstrap" />
  	<meta property="article:published_time" content="2020-02-28T08:12:40+00:00" />
  	<meta property="article:modified_time" content="2020-02-28T13:33:53+00:00" />
  	<meta property="og:image" content="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/02/Screenshot.png?fit=1702%2C854&#038;ssl=1" />
  	<meta property="og:image:width" content="1702" />
  	<meta property="og:image:height" content="854" />
  	<meta name="twitter:card" content="summary_large_image" />
  	<script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://askbootstrap.com/#website","url":"https://askbootstrap.com/","name":"Ask Bootstrap","description":"Free &amp; Premium Bootstrap templates","potentialAction":[{"@type":"SearchAction","target":"https://askbootstrap.com/?s={search_term_string}","query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/#primaryimage","inLanguage":"en-US","url":"https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/02/Screenshot.png?fit=1702%2C854&ssl=1","width":1702,"height":854,"caption":"Web development on Chrome OS"},{"@type":"WebPage","@id":"https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/#webpage","url":"https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/","name":"Web development on Chrome OS - Ask Bootstrap","isPartOf":{"@id":"https://askbootstrap.com/#website"},"primaryImageOfPage":{"@id":"https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/#primaryimage"},"datePublished":"2020-02-28T08:12:40+00:00","dateModified":"2020-02-28T13:33:53+00:00","author":{"@id":"https://askbootstrap.com/#/schema/person/28aaef12dacb6dc88dcb586fd3a514d8"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/"]}]},{"@type":["Person"],"@id":"https://askbootstrap.com/#/schema/person/28aaef12dacb6dc88dcb586fd3a514d8","name":"Askbootstrap","image":{"@type":"ImageObject","@id":"https://askbootstrap.com/#personlogo","inLanguage":"en-US","url":"https://secure.gravatar.com/avatar/592c98136dfcb2a79b10d2c1daf80365?s=96&d=mm&r=g","caption":"Askbootstrap"}}]}</script>
  	<!-- / Yoast SEO plugin. -->
  
  
  <script>window._wca = window._wca || [];</script>
  <link rel='dns-prefetch' href='//stats.wp.com' />
  <link rel='dns-prefetch' href='//secure.gravatar.com' />
  <link rel='dns-prefetch' href='//s.w.org' />
  <link rel="alternate" type="application/rss+xml" title="Ask Bootstrap &raquo; Feed" href="https://askbootstrap.com/feed/" />
  <link rel="alternate" type="application/rss+xml" title="Ask Bootstrap &raquo; Comments Feed" href="https://askbootstrap.com/comments/feed/" />
  <link rel="alternate" type="application/rss+xml" title="Ask Bootstrap &raquo; Web development on Chrome OS Comments Feed" href="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/feed/" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="theme-color" content="#0088ff" /><script async src="https://www.googletagmanager.com/gtag/js?id=UA-120909275-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
  
    gtag('config', 'UA-120909275-1');
  </script>
  
  		<script type="text/javascript">
  			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/askbootstrap.com\/wp-includes\/js\/wp-emoji-release.min.js"}};
  			/*! This file is auto-generated */
  			!function(e,a,t){var r,n,o,i,p=a.createElement("canvas"),s=p.getContext&&p.getContext("2d");function c(e,t){var a=String.fromCharCode;s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,e),0,0);var r=p.toDataURL();return s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,t),0,0),r===p.toDataURL()}function l(e){if(!s||!s.fillText)return!1;switch(s.textBaseline="top",s.font="600 32px Arial",e){case"flag":return!c([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])&&(!c([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!c([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]));case"emoji":return!c([55357,56424,55356,57342,8205,55358,56605,8205,55357,56424,55356,57340],[55357,56424,55356,57342,8203,55358,56605,8203,55357,56424,55356,57340])}return!1}function d(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(i=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},o=0;o<i.length;o++)t.supports[i[o]]=l(i[o]),t.supports.everything=t.supports.everything&&t.supports[i[o]],"flag"!==i[o]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[i[o]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(r=t.source||{}).concatemoji?d(r.concatemoji):r.wpemoji&&r.twemoji&&(d(r.twemoji),d(r.wpemoji)))}(window,document,window._wpemojiSettings);
  		</script>
  		<style type="text/css">
  img.wp-smiley,
  img.emoji {
  	display: inline !important;
  	border: none !important;
  	box-shadow: none !important;
  	height: 1em !important;
  	width: 1em !important;
  	margin: 0 .07em !important;
  	vertical-align: -0.1em !important;
  	background: none !important;
  	padding: 0 !important;
  }
  </style>
  	<link rel='stylesheet' id='wp-block-library-css'  href='https://askbootstrap.com/wp-content/plugins/gutenberg/build/block-library/style.css' type='text/css' media='all' />
  <style id='wp-block-library-inline-css' type='text/css'>
  .has-text-align-justify{text-align:justify;}
  </style>
  <link rel='stylesheet' id='wc-block-style-css'  href='https://askbootstrap.com/wp-content/plugins/woo-gutenberg-products-block/build/style.css' type='text/css' media='all' />
  <style id='woocommerce-inline-inline-css' type='text/css'>
  .woocommerce form .form-row .required { visibility: visible; }
  </style>
  <link rel='stylesheet' id='elementor-icons-css'  href='https://askbootstrap.com/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css' type='text/css' media='all' />
  <link rel='stylesheet' id='elementor-animations-css'  href='https://askbootstrap.com/wp-content/plugins/elementor/assets/lib/animations/animations.min.css' type='text/css' media='all' />
  <link rel='stylesheet' id='elementor-frontend-css'  href='https://askbootstrap.com/wp-content/plugins/elementor/assets/css/frontend.min.css' type='text/css' media='all' />
  <link rel='stylesheet' id='elementor-global-css'  href='https://askbootstrap.com/wp-content/uploads/elementor/css/global.css' type='text/css' media='all' />
  <link rel='stylesheet' id='jannah-styles-css'  href='https://askbootstrap.com/wp-content/themes/jannah/css/style.min.css' type='text/css' media='all' />
  <link rel='stylesheet' id='jannah-woocommerce-css'  href='https://askbootstrap.com/wp-content/themes/jannah/css/woocommerce.min.css' type='text/css' media='all' />
  <link rel='stylesheet' id='jannah-ilightbox-skin-css'  href='https://askbootstrap.com/wp-content/themes/jannah/css/ilightbox/dark-skin/skin.css' type='text/css' media='all' />
  <style id='jannah-ilightbox-skin-inline-css' type='text/css'>
  .wf-active .logo-text,.wf-active h1,.wf-active h2,.wf-active h3,.wf-active h4,.wf-active h5,.wf-active h6{font-family: 'Poppins';}#main-nav .main-menu > ul > li > a{text-transform: uppercase;}#tie-wrapper #main-nav{background-color : #3a2c78;border-width: 0;}#tie-wrapper #main-nav.fixed-nav{background-color : rgba( 58,44,120 ,0.95);}#main-nav .main-menu-wrapper,#tie-wrapper .main-nav-boxed #main-nav .main-menu-wrapper,#tie-wrapper #main-nav .main-menu .menu li > .sub-menu,#tie-wrapper #main-nav .main-menu .menu-sub-content,#tie-wrapper #main-nav .comp-sub-menu,#tie-body .search-in-main-nav.autocomplete-suggestions{background-color: #3a2c78;}#main-nav .weather-menu-item .icon-basecloud-bg:after{color: #3a2c78;}#tie-wrapper #main-nav .components > li,#tie-wrapper #main-nav .comp-sub-menu,#tie-wrapper #main-nav .comp-sub-menu li,#tie-wrapper #main-nav .main-menu .menu li > .sub-menu > li > a,#tie-wrapper #main-nav .main-menu .menu-sub-content > li > a,#tie-wrapper #main-nav .main-menu li.mega-link-column > ul > li > a,#tie-wrapper #main-nav .main-menu .mega-recent-featured-list a,#tie-wrapper #main-nav .main-menu .mega-cat .mega-cat-more-links > li a,#tie-wrapper #main-nav .main-menu .cats-horizontal li a,#tie-wrapper .main-menu .mega-cat.menu-item-has-children .mega-cat-wrapper{border-color: rgba(255,255,255,0.07);}#tie-wrapper #main-nav .comp-sub-menu .button, #tie-wrapper #main-nav .comp-sub-menu .button.guest-btn,.search-in-main-nav.autocomplete-suggestions{ border-color: #1c0e5a; }#tie-wrapper #main-nav .comp-sub-menu .button,#tie-wrapper #main-nav .comp-sub-menu .button.guest-btn{background-color: #1c0e5a;}#tie-wrapper #theme-header.main-nav-boxed #main-nav:not(.fixed-nav){background-color: transparent;}.main-nav-boxed.main-nav-light #main-nav .main-menu-wrapper{ border-width: 0;}.main-nav-boxed.main-nav-below.top-nav-below #main-nav .main-menu-wrapper{ border-bottom-width: 1px;}#tie-wrapper #main-nav .comp-sub-menu .button:hover,#tie-wrapper #main-nav .main-menu .menu > li.tie-current-menu,#tie-wrapper #main-nav .main-menu .menu > li > .sub-menu,#tie-wrapper #main-nav .main-menu .menu > li > .menu-sub-content,#theme-header #main-nav .menu .mega-cat-sub-categories.cats-horizontal li a.is-active,#theme-header #main-nav .menu .mega-cat-sub-categories.cats-horizontal li a:hover{border-color: #a54092;}#tie-wrapper #main-nav .main-menu .menu > li.tie-current-menu > a,#tie-wrapper #main-nav .main-menu .menu > li:hover > a,#tie-wrapper #main-nav .main-menu .menu > li > a:hover,#tie-wrapper #main-nav .main-menu ul li .mega-links-head:after,#tie-wrapper #theme-header #main-nav .comp-sub-menu .button:hover,#tie-wrapper #main-nav .comp-sub-menu .button.checkout-button,#theme-header #main-nav .menu .mega-cat-sub-categories.cats-horizontal li a.is-active,#theme-header #main-nav .menu .mega-cat-sub-categories.cats-horizontal li a:hover,.search-in-main-nav.autocomplete-suggestions a.button,#main-nav .spinner > div{background-color: #a54092;}#tie-wrapper #main-nav .components a:hover,#tie-wrapper #main-nav .components > li > a:hover,#tie-wrapper #main-nav .components > li:hover > a,#tie-wrapper #main-nav .components button#search-submit:hover,#tie-wrapper #main-nav .mega-cat-sub-categories.cats-vertical,#tie-wrapper #main-nav .cats-vertical li:hover a,#tie-wrapper #main-nav .cats-vertical li a.is-active,#tie-wrapper #main-nav .cats-vertical li a:hover,#tie-wrapper #main-nav .main-menu .mega-menu .post-meta a:hover,#tie-wrapper #main-nav .main-menu .menu .mega-cat-sub-categories.cats-vertical li a.is-active,#tie-wrapper #main-nav .main-menu .mega-menu .post-box-title a:hover,.search-in-main-nav.autocomplete-suggestions a:not(.button):hover,#tie-wrapper #main-nav .spinner-circle:after{color: #a54092;}#tie-wrapper #main-nav .main-menu .menu > li.tie-current-menu > a,#tie-wrapper #main-nav .main-menu .menu > li:hover > a,#tie-wrapper #main-nav .main-menu .menu > li > a:hover,#tie-wrapper #main-nav .components a.button:hover,#tie-wrapper #main-nav .comp-sub-menu a.button.checkout-button,#tie-wrapper #main-nav .components a.button.guest-btn:hover,#theme-header #main-nav .menu .mega-cat-sub-categories.cats-horizontal li a.is-active,#theme-header #main-nav .menu .mega-cat-sub-categories.cats-horizontal li a:hover,.search-in-main-nav.autocomplete-suggestions .widget-post-list a.button{color: #FFFFFF;}#tie-wrapper #main-nav .menu > li.tie-current-menu > a:before,#tie-wrapper #theme-header #main-nav .menu > li > a:hover:before,#tie-wrapper #theme-header #main-nav .menu > li:hover > a:before{border-top-color: #FFFFFF;}.search-in-main-nav.autocomplete-suggestions a.button:hover,#tie-wrapper #theme-header #main-nav .comp-sub-menu .button.checkout-button:hover{background-color: #872274;}.tie-cat-165,.tie-cat-item-165 > span{background-color:#e67e22 !important;color:#FFFFFF !important;}.tie-cat-165:after{border-top-color:#e67e22 !important;}.tie-cat-165:hover{background-color:#c86004 !important;}.tie-cat-165:hover:after{border-top-color:#c86004 !important;}.tie-cat-173,.tie-cat-item-173 > span{background-color:#2ecc71 !important;color:#FFFFFF !important;}.tie-cat-173:after{border-top-color:#2ecc71 !important;}.tie-cat-173:hover{background-color:#10ae53 !important;}.tie-cat-173:hover:after{border-top-color:#10ae53 !important;}.tie-cat-177,.tie-cat-item-177 > span{background-color:#9b59b6 !important;color:#FFFFFF !important;}.tie-cat-177:after{border-top-color:#9b59b6 !important;}.tie-cat-177:hover{background-color:#7d3b98 !important;}.tie-cat-177:hover:after{border-top-color:#7d3b98 !important;}.tie-cat-179,.tie-cat-item-179 > span{background-color:#34495e !important;color:#FFFFFF !important;}.tie-cat-179:after{border-top-color:#34495e !important;}.tie-cat-179:hover{background-color:#162b40 !important;}.tie-cat-179:hover:after{border-top-color:#162b40 !important;}.tie-cat-181,.tie-cat-item-181 > span{background-color:#795548 !important;color:#FFFFFF !important;}.tie-cat-181:after{border-top-color:#795548 !important;}.tie-cat-181:hover{background-color:#5b372a !important;}.tie-cat-181:hover:after{border-top-color:#5b372a !important;}.tie-cat-183,.tie-cat-item-183 > span{background-color:#4CAF50 !important;color:#FFFFFF !important;}.tie-cat-183:after{border-top-color:#4CAF50 !important;}.tie-cat-183:hover{background-color:#2e9132 !important;}.tie-cat-183:hover:after{border-top-color:#2e9132 !important;}@media (max-width: 991px){.side-aside.dark-skin{background: #a64092;background: -webkit-linear-gradient(135deg,#a64092,#3a2c78 );background: -moz-linear-gradient(135deg,#a64092,#3a2c78 );background: -o-linear-gradient(135deg,#a64092,#3a2c78 );background: linear-gradient(135deg,#a64092,#3a2c78 );}}#mobile-search .search-submit{background-color: #0a0000;color: #FFFFFF;}#mobile-search .search-submit:hover{background-color: #000000;}
  </style>
  <link rel='stylesheet' id='social-logos-css'  href='https://askbootstrap.com/wp-content/plugins/jetpack/_inc/social-logos/social-logos.min.css' type='text/css' media='all' />
  <link crossorigin="anonymous" rel='stylesheet' id='google-fonts-1-css'  href='https://fonts.googleapis.com/css?family=Roboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto+Slab%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic' type='text/css' media='all' />
  <link rel='stylesheet' id='jetpack_css-css'  href='https://askbootstrap.com/wp-content/plugins/jetpack/css/jetpack.css' type='text/css' media='all' />
  <link rel='stylesheet' id='dgwt-wcas-style-css'  href='https://askbootstrap.com/wp-content/plugins/ajax-search-for-woocommerce/assets/css/style.min.css' type='text/css' media='all' />
  <script type='text/javascript'>
  /* <![CDATA[ */
  var tie = {"is_rtl":"","ajaxurl":"https:\/\/askbootstrap.com\/wp-admin\/admin-ajax.php","mobile_menu_active":"true","mobile_menu_top":"","mobile_menu_parent":"","lightbox_all":"true","lightbox_gallery":"true","lightbox_skin":"dark","lightbox_thumb":"horizontal","lightbox_arrows":"true","is_singular":"1","is_sticky_video":"1","reading_indicator":"true","lazyload":"","select_share":"true","select_share_twitter":"true","select_share_facebook":"true","select_share_linkedin":"true","select_share_email":"","facebook_app_id":"","twitter_username":"","responsive_tables":"true","ad_blocker_detector":"true","sticky_behavior":"upwards","sticky_desktop":"true","sticky_mobile":"true","is_buddypress_active":"","ajax_loader":"<div class=\"loader-overlay\"><div class=\"spinner-circle\"><\/div><\/div>","type_to_search":"1","lang_no_results":"Nothing Found"};
  /* ]]> */
  </script>
  <script type='text/javascript' src='https://askbootstrap.com/wp-includes/js/jquery/jquery.js'></script>
  <script type='text/javascript' src='https://askbootstrap.com/wp-includes/js/jquery/jquery-migrate.min.js'></script>
  <script async type='text/javascript' src='https://stats.wp.com/s-202031.js'></script>
  <link rel='https://api.w.org/' href='https://askbootstrap.com/wp-json/' />
  <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://askbootstrap.com/xmlrpc.php?rsd" />
  <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://askbootstrap.com/wp-includes/wlwmanifest.xml" /> 
  <meta name="generator" content="WordPress 5.4.2" />
  <meta name="generator" content="WooCommerce 4.0.1" />
  <link rel='shortlink' href='https://wp.me/p9J51Z-pY' />
  <link rel="alternate" type="application/json+oembed" href="https://askbootstrap.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Faskbootstrap.com%2Fweb-tips-and-tricks%2Fweb-development-on-chrome-os%2F" />
  <link rel="alternate" type="text/xml+oembed" href="https://askbootstrap.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Faskbootstrap.com%2Fweb-tips-and-tricks%2Fweb-development-on-chrome-os%2F&#038;format=xml" />
  <style type="text/css">.dgwt-wcas-ico-magnifier{max-width:20px}.dgwt-wcas-search-wrapp{max-width:600px}</style>
  <link rel='dns-prefetch' href='//v0.wordpress.com'/>
  <link rel='dns-prefetch' href='//i0.wp.com'/>
  <link rel='dns-prefetch' href='//i1.wp.com'/>
  <link rel='dns-prefetch' href='//i2.wp.com'/>
  <link rel='dns-prefetch' href='//jetpack.wordpress.com'/>
  <link rel='dns-prefetch' href='//s0.wp.com'/>
  <link rel='dns-prefetch' href='//s1.wp.com'/>
  <link rel='dns-prefetch' href='//s2.wp.com'/>
  <link rel='dns-prefetch' href='//public-api.wordpress.com'/>
  <link rel='dns-prefetch' href='//0.gravatar.com'/>
  <link rel='dns-prefetch' href='//1.gravatar.com'/>
  <link rel='dns-prefetch' href='//2.gravatar.com'/>
  <style type='text/css'>img#wpstats{display:none}</style><meta name='propeller' content='4b6deda6ab514c0abb4a341231ffc937'><script>(function(s,u,z,p){s.src=u,s.setAttribute('data-zone',z),p.appendChild(s);})(document.createElement('script'),'https://iclickcdn.com/tag.min.js',3330907,document.body||document.documentElement)</script>	<noscript><style>.woocommerce-product-gallery{ opacity: 1 !important; }</style></noscript>
  	<link rel="amphtml" href="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/amp/">
  <script>
  	WebFontConfig ={
  		google:{
  			families: ['Poppins:regular,500,600,700:latin']
  		}
  	};
  	(function(){
  		var wf   = document.createElement('script');
  		wf.src   = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  		wf.type  = 'text/javascript';
  		wf.async = 'true';
  		var s = document.getElementsByTagName('script')[0];
  		s.parentNode.insertBefore(wf, s);
  	})();
  </script>
  <link rel="icon" href="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2018/03/askbootstrap-fav.png?fit=32%2C32&#038;ssl=1" sizes="32x32" />
  <link rel="icon" href="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2018/03/askbootstrap-fav.png?fit=74%2C74&#038;ssl=1" sizes="192x192" />
  <link rel="apple-touch-icon" href="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2018/03/askbootstrap-fav.png?fit=74%2C74&#038;ssl=1" />
  <meta name="msapplication-TileImage" content="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2018/03/askbootstrap-fav.png?fit=74%2C74&#038;ssl=1" />
  <meta name="generator" content="Jannah 2.0.4" />
  </head>
  <body id="tie-body" class="post-template-default single single-post postid-1610 single-format-standard theme-jannah woocommerce-no-js wrapper-has-shadow blocks-title-style-1 magazine1 is-thumb-overlay-disabled is-desktop is-header-layout-3 sidebar-right has-sidebar post-layout-1 narrow-title-narrow-media has-mobile-share post-has-toggle hide_share_post_top hide_share_post_bottom elementor-default elementor-kit-1683 elementor-page elementor-page-1610">
  
  
  <div class="background-overlay">
  
  	<div id="tie-container" class="site tie-container">
  
  		
  		<div id="tie-wrapper">
  
  			
  <header id="theme-header" class="header-layout-3 main-nav-dark main-nav-below top-nav-active top-nav-light top-nav-above has-shadow mobile-header-default">
  	
  	<nav id="top-nav" class="has-date-breaking-components has-breaking-news" aria-label="Secondary Navigation">
  		<div class="container">
  			<div class="topbar-wrapper">
  
  				
  						<div class="topbar-today-date">
  							<span class="fa fa-clock-o" aria-hidden="true"></span>
  							<strong class="inner-text">Friday, July 31 2020</strong>
  						</div>
  						
  				<div class="tie-alignleft">
  					
  	<div class="breaking controls-is-active">
  
  		<span class="breaking-title">
  			<span class="fa fa-bolt" aria-hidden="true"></span>
  			<span class="breaking-title-text">Trending</span>
  		</span>
  
  		<ul id="breaking-news-in-header" class="breaking-news" data-type="reveal" data-arrows="true">
  
  			
  								<li class="news-item">
  									<a href="https://askbootstrap.com/web-tips-and-tricks/how-to-build-a-simple-ionic-4-wordpress-client/" title="How to Build A Simple Ionic 4 WordPress Client">How to Build A Simple Ionic 4 WordPress Client</a>
  								</li>
  
  								
  								<li class="news-item">
  									<a href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/" title="Remove Fence with 3 Simple Steps in Photoshop!">Remove Fence with 3 Simple Steps in Photoshop!</a>
  								</li>
  
  								
  								<li class="news-item">
  									<a href="https://askbootstrap.com/web-tips-and-tricks/html-to-react-components/" title="Easiest Way To Convert HTML Pages Into React Components">Easiest Way To Convert HTML Pages Into React Components</a>
  								</li>
  
  								
  								<li class="news-item">
  									<a href="https://askbootstrap.com/web-tips-and-tricks/top-8-youtube-channels-for-ui-ux-designers/" title="Top 8 Youtube channels for UI/UX designers">Top 8 Youtube channels for UI/UX designers</a>
  								</li>
  
  								
  								<li class="news-item">
  									<a href="https://askbootstrap.com/web-tips-and-tricks/top-6-ai-tools-for-designers/" title="Top 6 AI Tools for Designers">Top 6 AI Tools for Designers</a>
  								</li>
  
  								
  								<li class="news-item">
  									<a href="https://askbootstrap.com/web-tips-and-tricks/100-sources-of-free-stock-images-for-your-templates-videos-and-websites/" title="100 sources of free stock images for your templates, videos and websites">100 sources of free stock images for your templates, videos and websites</a>
  								</li>
  
  								
  								<li class="news-item">
  									<a href="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" title="Web development on Chrome OS">Web development on Chrome OS</a>
  								</li>
  
  								
  								<li class="news-item">
  									<a href="https://askbootstrap.com/bootstrap-news/best-black-friday-deals-for-web-developers-and-designers/" title="Best Black Friday deals for web developers and designers">Best Black Friday deals for web developers and designers</a>
  								</li>
  
  								
  								<li class="news-item">
  									<a href="https://askbootstrap.com/design/motion-design-in-ui-designing-in-the-browser/" title="Motion Design in UI &#8211; Designing in the Browser">Motion Design in UI &#8211; Designing in the Browser</a>
  								</li>
  
  								
  								<li class="news-item">
  									<a href="https://askbootstrap.com/freelancing/6-tools-to-track-your-instagram-followers/" title="6 Tools to Track Your Instagram Followers">6 Tools to Track Your Instagram Followers</a>
  								</li>
  
  								
  		</ul>
  	</div><!-- #breaking /-->
  				</div><!-- .tie-alignleft /-->
  
  				<div class="tie-alignright">
  					<ul class="components">		<li class="side-aside-nav-icon menu-item custom-menu-link">
  			<a href="#">
  				<span class="fa fa-navicon" aria-hidden="true"></span>
  				<span class="screen-reader-text">Sidebar</span>
  			</a>
  		</li>
  				<li class="popup-login-icon menu-item custom-menu-link">
  		 	<a href="#" class="lgoin-btn tie-popup-trigger">
  				<span class="fa fa-lock" aria-hidden="true"></span>
  				<span class="screen-reader-text">Log In</span>
  			</a>
  		</li>
  				<li class="random-post-icon menu-item custom-menu-link">
  			<a href="/web-tips-and-tricks/web-development-on-chrome-os/?random-post=1" class="random-post" title="Random Article">
  				<span class="fa fa-random" aria-hidden="true"></span>
  				<span class="screen-reader-text">Random Article</span>
  			</a>
  		</li>
  				<li class="shopping-cart-icon menu-item custom-menu-link">
  			<a href="https://askbootstrap.com/cart/" title="View your shopping cart">
  				<span class="shooping-cart-counter menu-counter-bubble-outer">
  									</span><!-- .menu-counter-bubble-outer -->
  				<span class="fa fa-shopping-bag" aria-hidden="true"></span>
  				<span class="screen-reader-text">View your shopping cart</span>
  			</a>
  			<div class="components-sub-menu comp-sub-menu">
  				<div class="shopping-cart-details">
  					
  		<div class="shopping-cart-details">
  					<div class="cart-empty-message">
  				Your cart is currently empty.			</div>
  			<a href="https://askbootstrap.com/shop/" class="checkout-button button">Go to the shop</a>
  					</div><!-- shopping-cart-details -->
  					</div><!-- shopping-cart-details -->
  			</div><!-- .components-sub-menu /-->
  		</li><!-- .shopping-cart-btn /-->
  		 <li class="social-icons-item"><a class="social-link  facebook-social-icon" title="Facebook" rel="nofollow" target="_blank" href="https://www.facebook.com/askbootstrap"><span class="fa fa-facebook"></span></a></li><li class="social-icons-item"><a class="social-link  twitter-social-icon" title="Twitter" rel="nofollow" target="_blank" href="https://twitter.com/askbootstrap"><span class="fa fa-twitter"></span></a></li><li class="social-icons-item"><a class="social-link  instagram-social-icon" title="Instagram" rel="nofollow" target="_blank" href="https://www.instagram.com/askbootstrap/"><span class="fa fa-instagram"></span></a></li> </ul><!-- Components -->				</div><!-- .tie-alignright /-->
  
  			</div><!-- .topbar-wrapper /-->
  		</div><!-- .container /-->
  	</nav><!-- #top-nav /-->
  
  <div class="container">
  	<div class="tie-row logo-row">
  
  		<div class="logo-wrapper">
  			<div class="tie-col-md-4 logo-container">
  				
  				<a href="#" id="mobile-menu-icon">
  					<span class="nav-icon"></span>
  				</a>
  			
  			<div id="logo">
  				<a title="Ask Bootstrap" href="https://askbootstrap.com/">
  					
  					<img src="https://askbootstrap.com/wp-content/uploads/2018/11/askbootstrap-logo.png" alt="Ask Bootstrap" class="logo_normal" width="299" height="49" style="max-height:49px; width: auto;">
  					<img src="https://askbootstrap.com/wp-content/uploads/2018/11/askbootstrap-logo.png" alt="Ask Bootstrap" class="logo_2x" width="299" height="49" style="max-height:49px; width: auto;">
  				
  				</a>
  			</div><!-- #logo /-->
  					</div><!-- .tie-col /-->
  		</div><!-- .logo-wrapper /-->
  
  		<div class="tie-col-md-8 stream-item stream-item-top-wrapper"><div class="stream-item-top"><!-- top-header -->
  <ins class="adsbygoogle"
      style="display:block"
      data-ad-client="ca-pub-5988734874428626"
      data-ad-slot="9995573624"
      
      data-full-width-responsive="true"></ins>
  <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
  </script></div></div><!-- .tie-col /-->
  	</div><!-- .tie-row /-->
  </div><!-- .container /-->
  
  <div class="main-nav-wrapper">
  	<nav id="main-nav" data-skin="search-in-main-nav live-search-dark" class=" live-search-parent"  aria-label="Primary Navigation">
  		<div class="container">
  
  			<div class="main-menu-wrapper">
  
  				
  				<div id="menu-components-wrap">
  
  					
  					<div class="main-menu main-menu-wrap tie-alignleft">
  						<div id="main-nav-menu" class="main-menu"><ul id="menu-main" class="menu" role="menubar"><li id="menu-item-1136" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1136"><a href="https://askbootstrap.com">Home</a></li>
  <li id="menu-item-1192" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1192"><a href="https://askbootstrap.com/about-us/">About Askbootstrap</a></li>
  <li id="menu-item-1138" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1138"><a href="https://askbootstrap.com/categories/tutorial/">Tutorial</a></li>
  <li id="menu-item-1139" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-1139 tie-current-menu"><a href="https://askbootstrap.com/categories/web-tips-and-tricks/">Tips and Tricks</a></li>
  <li id="menu-item-1140" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1140"><a href="https://askbootstrap.com/categories/freelancing/">Freelancing</a></li>
  <li id="menu-item-1429" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1429"><a href="https://askbootstrap.com/motivation/">Motivation</a></li>
  <li id="menu-item-1536" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1536"><a href="https://askbootstrap.com/shop/">Template Store</a></li>
  </ul></div>					</div><!-- .main-menu.tie-alignleft /-->
  
  					<ul class="components">			<li class="search-bar menu-item custom-menu-link" aria-label="Search">
  				<form method="get" id="search" action="https://askbootstrap.com//">
  					<input id="search-input" class="is-ajax-search" type="text" name="s" title="Search for" placeholder="Search for" />
  					<button id="search-submit" type="submit"><span class="fa fa-search" aria-hidden="true"></span></button>
  				</form>
  			</li>
  					<li class="popup-login-icon menu-item custom-menu-link">
  		 	<a href="#" class="lgoin-btn tie-popup-trigger">
  				<span class="fa fa-lock" aria-hidden="true"></span>
  				<span class="screen-reader-text">Log In</span>
  			</a>
  		</li>
  				<li class="shopping-cart-icon menu-item custom-menu-link">
  			<a href="https://askbootstrap.com/cart/" title="View your shopping cart">
  				<span class="shooping-cart-counter menu-counter-bubble-outer">
  									</span><!-- .menu-counter-bubble-outer -->
  				<span class="fa fa-shopping-bag" aria-hidden="true"></span>
  				<span class="screen-reader-text">View your shopping cart</span>
  			</a>
  			<div class="components-sub-menu comp-sub-menu">
  				<div class="shopping-cart-details">
  					
  		<div class="shopping-cart-details">
  					<div class="cart-empty-message">
  				Your cart is currently empty.			</div>
  			<a href="https://askbootstrap.com/shop/" class="checkout-button button">Go to the shop</a>
  					</div><!-- shopping-cart-details -->
  					</div><!-- shopping-cart-details -->
  			</div><!-- .components-sub-menu /-->
  		</li><!-- .shopping-cart-btn /-->
  		</ul><!-- Components -->
  				</div><!-- #menu-components-wrap /-->
  			</div><!-- .main-menu-wrapper /-->
  		</div><!-- .container /-->
  	</nav><!-- #main-nav /-->
  </div><!-- .main-nav-wrapper /-->
  
  </header>
  
  
  			<div id="content" class="site-content container">
  				<div class="tie-row main-content-row">
  		
  
  		<div class="main-content tie-col-md-8 tie-col-xs-12" role="main">
  
  			
  			<article id="the-post" class="container-wrapper post-content tie_video">
  
  					<header class="entry-header-outer">
  
  		<nav id="breadcrumb"><a href="https://askbootstrap.com/"><span class="fa fa-home" aria-hidden="true"></span> Home</a><em class="delimiter">/</em><a href="https://askbootstrap.com/categories/web-tips-and-tricks/">Web Tips and Tricks</a><em class="delimiter">/</em><span class="current">Web development on Chrome OS</span></nav><script type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"BreadcrumbList","@id":"#Breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"item":{"name":"Home","@id":"https:\/\/askbootstrap.com\/"}},{"@type":"ListItem","position":2,"item":{"name":"Web Tips and Tricks","@id":"https:\/\/askbootstrap.com\/categories\/web-tips-and-tricks\/"}}]}</script>
  		<div class="entry-header">
  
  			<h5 class="post-cat-wrap"><a class="post-cat tie-cat-192" href="https://askbootstrap.com/categories/web-tips-and-tricks/">Web Tips and Tricks</a></h5>
  			<h1 class="post-title entry-title">Web development on Chrome OS</h1>
  
  			<div class="post-meta">
  					<span class="meta-author-avatar">
  						<a href="https://askbootstrap.com/author/ask_admin/"><img alt='' src='https://secure.gravatar.com/avatar/592c98136dfcb2a79b10d2c1daf80365?s=140&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/592c98136dfcb2a79b10d2c1daf80365?s=280&#038;d=mm&#038;r=g 2x' class='avatar avatar-140 photo' height='140' width='140' />
  						</a>
  					</span>
  				
  				<span class="meta-author meta-item"><a href="https://askbootstrap.com/author/ask_admin/" class="author-name" title="Askbootstrap">Askbootstrap</a>
  				</span>
  			
  					<a href="mailto:gurdeepjawaddi94@gmail.com" target="_blank">
  						<span class="fa fa-envelope" aria-hidden="true"></span>
  						<span class="screen-reader-text"></span>
  					</a>
  				<div class="clearfix"></div></div><!-- .post-meta -->		</div><!-- .entry-header /-->
  
  		
  	</header><!-- .entry-header-outer /-->
  
  		<div class="post-footer post-footer-on-top">
  			<div class="post-footer-inner">
  				<div class="share-links  share-centered icons-only">
  
  					<a href="http://www.facebook.com/sharer.php?u=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="facebook-share-btn"><span class="fa fa-facebook"></span> <span class="screen-reader-text">Facebook</span></a><a href="https://twitter.com/intent/tweet?text=Web+development+on+Chrome+OS&#038;url=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="twitter-share-btn"><span class="fa fa-twitter"></span> <span class="screen-reader-text">Twitter</span></a><a href="http://www.tumblr.com/share/link?url=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/&#038;name=Web+development+on+Chrome+OS" rel="external" target="_blank" class="tumblr-share-btn"><span class="fa fa-tumblr"></span> <span class="screen-reader-text">Tumblr</span></a><a href="http://pinterest.com/pin/create/button/?url=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/&#038;description=Web+development+on+Chrome+OS&#038;media=https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/02/Screenshot.png?resize=780%2C405&#038;ssl=1" rel="external" target="_blank" class="pinterest-share-btn"><span class="fa fa-pinterest"></span> <span class="screen-reader-text">Pinterest</span></a><a href="http://reddit.com/submit?url=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/&#038;title=Web+development+on+Chrome+OS" rel="external" target="_blank" class="reddit-share-btn"><span class="fa fa-reddit"></span> <span class="screen-reader-text">Reddit</span></a><a href="http://vk.com/share.php?url=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="vk-share-btn"><span class="fa fa-vk"></span> <span class="screen-reader-text">VKontakte</span></a><a href="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&#038;st.shareUrl=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/&#038;description=Web+development+on+Chrome+OS&#038;media=https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/02/Screenshot.png?resize=780%2C405&#038;ssl=1" rel="external" target="_blank" class="odnoklassniki-share-btn"><span class="fa fa-odnoklassniki"></span> <span class="screen-reader-text">Odnoklassniki</span></a><a href="https://getpocket.com/save?title=Web+development+on+Chrome+OS&#038;url=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="pocket-share-btn"><span class="fa fa-get-pocket"></span> <span class="screen-reader-text">Pocket</span></a><a href="whatsapp://send?text=Web+development+on+Chrome+OS - https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="whatsapp-share-btn"><span class="fa fa-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span></a><a href="tg://msg?text=Web+development+on+Chrome+OS - https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="telegram-share-btn"><span class="fa fa-paper-plane"></span> <span class="screen-reader-text">Telegram</span></a>				</div><!-- .share-links /-->
  			</div><!-- .post-footer-inner /-->
  		</div><!-- .post-footer-on-top /-->
  
  		<div id="the-sticky-video" class="featured-area"><div class="featured-area-inner"><span class="tie-icon-cross video-close-btn" aria-hidden="true"></span><div class="tie-fluid-width-video-wrapper"><iframe title="Web development on Chrome OS (Chrome Dev Summit 2019)" width="708" height="398" src="https://www.youtube.com/embed/3CWUAisN-vo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div></div>
  				<div class="entry-content entry clearfix">
  
  					<div class="stream-item stream-item-above-post-content">
  				<a href="https://www.hostg.xyz/aff_c?offer_id=6&#038;aff_id=3907&#038;file_id=1059" title="Web Hosting Sale" target="_blank" rel="nofollow">
  					<img src="https://askbootstrap.com/wp-content/uploads/2020/02/en-728x90-1.png" alt="Web Hosting Sale" width="728" height="90" />
  				</a>
  			</div><p>This talk demonstrates how in a few clicks you can get a full web development environment up and running on Chrome OS, including how to do cross-browser testing! 🙂</p>
  
  
  <h2>Transcript</h2>
  
  
  
  <p>Hi. I&#8217;m Emilie Roberts, a developer advocate with Chrome OS developer relations. Today, I&#8217;m going to talk about web development on Chromebooks. Here is a quote from you, a skilled web developer. &#8220;Chromebooks are awesome.&#8221; And if you don&#8217;t remember saying this recently, I hope that after watching this video, it will become a daily thing. Chromebooks are known for being lightweight, fast, secure web browsing machines. They are so much more. The device portfolio has grown to include tablets, detachables, all-in-one, mini desktops, and of course, laptops and convertibles. Many of these are capable development devices. So what can you run on them? Well, IDEs like Visual Studio Code, Atom, WebStorm, tools like Node, React, Docker, and Git, and you can test your web apps with multiple browsers, including real mobile browsers. As well, you can check how your mobile app interacts with your web server, all right on the same device. OK. Let&#8217;s get started and get your Chrome OS device ready for development. We are going to set up a Linux environment and then install the tools you need. To start, open Chrome settings and search or scroll down to Linux. Click Turn on. This will download and setup a Linux environment. When it&#8217;s complete, you&#8217;ll see a terminal prompt. Pro tip&#8211; if you will be doing a lot of development, pin the Terminal by right-clicking and choosing Pin. Now we have a Linux environment. Let&#8217;s install some tools. Head over to the Visual Studio Code website and download the Linux.deb package. Double-click and choose Install. Once it&#8217;s installed, you can find VS Code in your App Launcher. If you&#8217;re going to be using this IDE a lot, you can pin it like we did with the Terminal. Any application with a .deb package can be installed in a similar way. Let&#8217;s install Atom. The process is exactly the same&#8211; download, install, and launch. Not every app has a .deb package, but you can install any of your favorite tools that support Debian Linux. For example, to install Sublime Text, follow the Linux instructions on the website to set up the APT repo and install the editor using the command line. When we install Node in a few seconds, we&#8217;ll take a closer look at command line installation. And the same thing goes for apps like WebStorm. Just go to the website, follow the Linux download and install instructions. I won&#8217;t do WebStorm right now. Let&#8217;s get right on to the server side of things. Oh, and by the way, at the end of this video, I will direct you to a page by the Chrome OS DevRel team with installation instructions for all the apps and more discussed in this video. Now, beyond what I mention today in this video, if your favorite tool is supported in Linux, it should run on Chromebooks. For example, I like gedit for text editing, FileZilla as an FTP client, and Inkscape for vector graphics editing. Today, web development usually takes more than a text editor, an IDE, or an FTP client. Let&#8217;s get to some other tools so we can make some really nice web apps. Node.js requires gnupg2. Open up your Terminal and install it with apt. That command is sudo apt install gnupg2. If you&#8217;re new to apt, you can probably guess that by replacing gnupg2 with whatever package name you want, it will install that package. Now, finding the right package name can sometimes be the tricky part. Note, as we continue with this video and other terminal commands, I won&#8217;t read every line out loud. But as mentioned, I will provide a link at the end that has them all. Now that the dependency is installed, let&#8217;s get Node.js. Run this cURL command followed by another apt install command for node. That&#8217;s it. Node.js is ready to go. Don&#8217;t believe me? Well, let&#8217;s try it out with PROXX. Use git to clone the PROXX repo and NPM to install, build, and serve the PROXX web app. Navigate to localhost:8080 in your web browser and check it out. Pretty cool. So much minesweeping to be done. Let&#8217;s try React. Using NPM, you can install, create-react-app, then use create-react-app to create a skeleton project. Here, I call it hello-world-react. Navigate into the directory where it was created and call npm start. Now, navigate to localhost:3000 in your browser and check it out. If you prefer Angular, install that, too. The steps are almost the same. Again, we use NPM to install @angular/cli. Create an Angular app using ng new my-angular-project. Change directories into the project folder using cd, for change directory, my-angular-project. Now, in gServ, browse to localhost:4200 and check it out. Here, you&#8217;ll notice that I have PROXX, a React app, and an Angular app all running on different ports all on the same Chromebook. I think this is pretty handy. What&#8217;s more, this is all local, so as long as your tools are already installed, you could do all of your development offline&#8211; say, like on a plane. What about Docker? No problem. Again, we&#8217;re going to follow the normal Linux installation steps. First, we double-check that all the dependencies are installed. We add the Docker repository to apt, and then we update the apt package list since we just added a new repository. We use sudo apt update to do this. Then install Docker. Test it out by running hello-world. This is done with sudo docker run hello-world. You should get a nice message showing that everything is working. Let&#8217;s do something a little bit more advanced by running an Ubuntu Linux container in Docker. sudo docker run -it ubuntu bash. And there you go. Your output is going to look something like this. In the Ubuntu container, I&#8217;ve taken a look at the OS version with cat /etc/os-version and you can see, it&#8217;s really Ubuntu. Now, once an app is ready to deploy, it should be tested. Because Chromebooks have web, Android, and Linux, you can test across multiple browsers on multiple platforms all right on the same device. Let&#8217;s install a whole pile of browsers to prove this point. Using the Terminal and apt, install Firefox for Linux. Note in Debian, the package name is firefox-esr. Then let&#8217;s also install the Chromium browser for Linux. Feeling brave? Let&#8217;s install the Brave browser for Linux. I won&#8217;t walk through all of these lines right now, but again, they are just the standard installation instructions for Debian Linux. We install the GPG key, we install the repo, and finally Brave. Now, if four browsers aren&#8217;t enough, let&#8217;s add a few more. Head over to the Google Play Store and install some Android browsers. Let&#8217;s go with Firefox for Android, Opera for Android, and Chrome Beta for Android. We now have seven browsers installed, which can give us a reasonable first attempt at test coverage. We have the Chrome OS Chrome browser, three Android browsers&#8211; that is Firefox, Chrome Beta, and Opera&#8211; three Linux browsers&#8211; Firefox for Linux, Brave, and Chromium. And here you can see that our PROXX web app is running on all seven. One last thing to mention. In case you have a mobile app that interacts with your web service, you can do Android, TWA, and Flutter development on Chrome OS devices, which means you can build and package your mobile app on your Chromebook, test it right on the device you are coding on, like any other Android app, build your web component, start your web server, and then test everything on multiple browsers and see how it interacts right on the device. Android Studio is as easy to install as Visual Studio Code or Atom. Head over to the Android Studio site and download the .deb file. Then, you can code your app like you&#8217;d expect in Android Studio with one cool difference. You&#8217;ll notice that you can push directly to the Chromebook you&#8217;re working on. Pretty cool. Full instructions on how to set this up can be found on the link at the end of this video on the Android page. So with your Chromebook, you can build web apps with the tools you are used to, develop and test right on device with tools like Node.js, Docker, and Angular, test across multiple browsers, including mobile browsers, and even test mobile app and web interaction right on device. And all of this could even happen offline, like on a long flight. So now, don&#8217;t you agree Chromebooks are awesome? As promised, here is a link to a guide to get your Linux environment customized just the way you like. It&#8217;s cros.page.link/web-dev. Thank you. Can&#8217;t wait to see what you build.</p>
  <div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon sd-sharing"><h3 class="sd-title">Share this:</h3><div class="sd-content"><ul><li class="share-facebook"><a rel="nofollow noopener noreferrer" data-shared="sharing-facebook-1610" class="share-facebook sd-button share-icon no-text" href="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/?share=facebook" target="_blank" title="Click to share on Facebook"><span></span><span class="sharing-screen-reader-text">Click to share on Facebook (Opens in new window)</span></a></li><li class="share-twitter"><a rel="nofollow noopener noreferrer" data-shared="sharing-twitter-1610" class="share-twitter sd-button share-icon no-text" href="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/?share=twitter" target="_blank" title="Click to share on Twitter"><span></span><span class="sharing-screen-reader-text">Click to share on Twitter (Opens in new window)</span></a></li><li class="share-jetpack-whatsapp"><a rel="nofollow noopener noreferrer" data-shared="" class="share-jetpack-whatsapp sd-button share-icon no-text" href="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/?share=jetpack-whatsapp" target="_blank" title="Click to share on WhatsApp"><span></span><span class="sharing-screen-reader-text">Click to share on WhatsApp (Opens in new window)</span></a></li><li class="share-telegram"><a rel="nofollow noopener noreferrer" data-shared="" class="share-telegram sd-button share-icon no-text" href="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/?share=telegram" target="_blank" title="Click to share on Telegram"><span></span><span class="sharing-screen-reader-text">Click to share on Telegram (Opens in new window)</span></a></li><li><a href="#" class="sharing-anchor sd-button share-more"><span>More</span></a></li><li class="share-end"></li></ul><div class="sharing-hidden"><div class="inner" style="display: none;"><ul><li class="share-pinterest"><a rel="nofollow noopener noreferrer" data-shared="sharing-pinterest-1610" class="share-pinterest sd-button share-icon no-text" href="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/?share=pinterest" target="_blank" title="Click to share on Pinterest"><span></span><span class="sharing-screen-reader-text">Click to share on Pinterest (Opens in new window)</span></a></li><li class="share-reddit"><a rel="nofollow noopener noreferrer" data-shared="" class="share-reddit sd-button share-icon no-text" href="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/?share=reddit" target="_blank" title="Click to share on Reddit"><span></span><span class="sharing-screen-reader-text">Click to share on Reddit (Opens in new window)</span></a></li><li class="share-end"></li><li class="share-tumblr"><a rel="nofollow noopener noreferrer" data-shared="" class="share-tumblr sd-button share-icon no-text" href="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/?share=tumblr" target="_blank" title="Click to share on Tumblr"><span></span><span class="sharing-screen-reader-text">Click to share on Tumblr (Opens in new window)</span></a></li><li class="share-linkedin"><a rel="nofollow noopener noreferrer" data-shared="sharing-linkedin-1610" class="share-linkedin sd-button share-icon no-text" href="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/?share=linkedin" target="_blank" title="Click to share on LinkedIn"><span></span><span class="sharing-screen-reader-text">Click to share on LinkedIn (Opens in new window)</span></a></li><li class="share-end"></li><li class="share-pocket"><a rel="nofollow noopener noreferrer" data-shared="" class="share-pocket sd-button share-icon no-text" href="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/?share=pocket" target="_blank" title="Click to share on Pocket"><span></span><span class="sharing-screen-reader-text">Click to share on Pocket (Opens in new window)</span></a></li><li class="share-end"></li></ul></div></div></div></div></div>
  				</div><!-- .entry-content /-->
  
  				<script type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"Article","dateCreated":"2020-02-28T08:12:40+00:00","datePublished":"2020-02-28T08:12:40+00:00","dateModified":"2020-02-28T13:33:53+00:00","headline":"Web development on Chrome OS","name":"Web development on Chrome OS","keywords":[],"url":"https:\/\/askbootstrap.com\/web-tips-and-tricks\/web-development-on-chrome-os\/","description":"This talk demonstrates how in a few clicks you can get a full web development environment up and running on Chrome OS, including how to do cross-browser testing! :) Transcript Hi. I'm Emilie Roberts,","copyrightYear":"2020","publisher":{"@id":"#Publisher","@type":"Organization","name":"Ask Bootstrap","logo":{"@type":"ImageObject","url":"https:\/\/askbootstrap.com\/wp-content\/uploads\/2018\/11\/askbootstrap-logo.png"},"sameAs":["https:\/\/www.facebook.com\/askbootstrap","https:\/\/twitter.com\/askbootstrap","https:\/\/www.instagram.com\/askbootstrap\/"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/askbootstrap.com\/web-tips-and-tricks\/web-development-on-chrome-os\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"Askbootstrap","url":"https:\/\/askbootstrap.com\/author\/ask_admin\/"},"articleSection":"Web Tips and Tricks","articleBody":"This talk demonstrates how in a few clicks you can get a full web development environment up and running on Chrome OS, including how to do cross-browser testing! :)\n\n\nTranscript\n\n\n\nHi. I'm Emilie Roberts, a developer advocate with Chrome OS developer relations. Today, I'm going to talk about web development on Chromebooks. Here is a quote from you, a skilled web developer. \"Chromebooks are awesome.\" And if you don't remember saying this recently, I hope that after watching this video, it will become a daily thing. Chromebooks are known for being lightweight, fast, secure web browsing machines. They are so much more. The device portfolio has grown to include tablets, detachables, all-in-one, mini desktops, and of course, laptops and convertibles. Many of these are capable development devices. So what can you run on them? Well, IDEs like Visual Studio Code, Atom, WebStorm, tools like Node, React, Docker, and Git, and you can test your web apps with multiple browsers, including real mobile browsers. As well, you can check how your mobile app interacts with your web server, all right on the same device. OK. Let's get started and get your Chrome OS device ready for development. We are going to set up a Linux environment and then install the tools you need. To start, open Chrome settings and search or scroll down to Linux. Click Turn on. This will download and setup a Linux environment. When it's complete, you'll see a terminal prompt. Pro tip-- if you will be doing a lot of development, pin the Terminal by right-clicking and choosing Pin. Now we have a Linux environment. Let's install some tools. Head over to the Visual Studio Code website and download the Linux.deb package. Double-click and choose Install. Once it's installed, you can find VS Code in your App Launcher. If you're going to be using this IDE a lot, you can pin it like we did with the Terminal. Any application with a .deb package can be installed in a similar way. Let's install Atom. The process is exactly the same-- download, install, and launch. Not every app has a .deb package, but you can install any of your favorite tools that support Debian Linux. For example, to install Sublime Text, follow the Linux instructions on the website to set up the APT repo and install the editor using the command line. When we install Node in a few seconds, we'll take a closer look at command line installation. And the same thing goes for apps like WebStorm. Just go to the website, follow the Linux download and install instructions. I won't do WebStorm right now. Let's get right on to the server side of things. Oh, and by the way, at the end of this video, I will direct you to a page by the Chrome OS DevRel team with installation instructions for all the apps and more discussed in this video. Now, beyond what I mention today in this video, if your favorite tool is supported in Linux, it should run on Chromebooks. For example, I like gedit for text editing, FileZilla as an FTP client, and Inkscape for vector graphics editing. Today, web development usually takes more than a text editor, an IDE, or an FTP client. Let's get to some other tools so we can make some really nice web apps. Node.js requires gnupg2. Open up your Terminal and install it with apt. That command is sudo apt install gnupg2. If you're new to apt, you can probably guess that by replacing gnupg2 with whatever package name you want, it will install that package. Now, finding the right package name can sometimes be the tricky part. Note, as we continue with this video and other terminal commands, I won't read every line out loud. But as mentioned, I will provide a link at the end that has them all. Now that the dependency is installed, let's get Node.js. Run this cURL command followed by another apt install command for node. That's it. Node.js is ready to go. Don't believe me? Well, let's try it out with PROXX. Use git to clone the PROXX repo and NPM to install, build, and serve the PROXX web app. Navigate to localhost:8080 in your web browser and check it out. Pretty cool. So much minesweeping to be done. Let's try React. Using NPM, you can install, create-react-app, then use create-react-app to create a skeleton project. Here, I call it hello-world-react. Navigate into the directory where it was created and call npm start. Now, navigate to localhost:3000 in your browser and check it out. If you prefer Angular, install that, too. The steps are almost the same. Again, we use NPM to install @angular\/cli. Create an Angular app using ng new my-angular-project. Change directories into the project folder using cd, for change directory, my-angular-project. Now, in gServ, browse to localhost:4200 and check it out. Here, you'll notice that I have PROXX, a React app, and an Angular app all running on different ports all on the same Chromebook. I think this is pretty handy. What's more, this is all local, so as long as your tools are already installed, you could do all of your development offline-- say, like on a plane. What about Docker? No problem. Again, we're going to follow the normal Linux installation steps. First, we double-check that all the dependencies are installed. We add the Docker repository to apt, and then we update the apt package list since we just added a new repository. We use sudo apt update to do this. Then install Docker. Test it out by running hello-world. This is done with sudo docker run hello-world. You should get a nice message showing that everything is working. Let's do something a little bit more advanced by running an Ubuntu Linux container in Docker. sudo docker run -it ubuntu bash. And there you go. Your output is going to look something like this. In the Ubuntu container, I've taken a look at the OS version with cat \/etc\/os-version and you can see, it's really Ubuntu. Now, once an app is ready to deploy, it should be tested. Because Chromebooks have web, Android, and Linux, you can test across multiple browsers on multiple platforms all right on the same device. Let's install a whole pile of browsers to prove this point. Using the Terminal and apt, install Firefox for Linux. Note in Debian, the package name is firefox-esr. Then let's also install the Chromium browser for Linux. Feeling brave? Let's install the Brave browser for Linux. I won't walk through all of these lines right now, but again, they are just the standard installation instructions for Debian Linux. We install the GPG key, we install the repo, and finally Brave. Now, if four browsers aren't enough, let's add a few more. Head over to the Google Play Store and install some Android browsers. Let's go with Firefox for Android, Opera for Android, and Chrome Beta for Android. We now have seven browsers installed, which can give us a reasonable first attempt at test coverage. We have the Chrome OS Chrome browser, three Android browsers-- that is Firefox, Chrome Beta, and Opera-- three Linux browsers-- Firefox for Linux, Brave, and Chromium. And here you can see that our PROXX web app is running on all seven. One last thing to mention. In case you have a mobile app that interacts with your web service, you can do Android, TWA, and Flutter development on Chrome OS devices, which means you can build and package your mobile app on your Chromebook, test it right on the device you are coding on, like any other Android app, build your web component, start your web server, and then test everything on multiple browsers and see how it interacts right on the device. Android Studio is as easy to install as Visual Studio Code or Atom. Head over to the Android Studio site and download the .deb file. Then, you can code your app like you'd expect in Android Studio with one cool difference. You'll notice that you can push directly to the Chromebook you're working on. Pretty cool. Full instructions on how to set this up can be found on the link at the end of this video on the Android page. So with your Chromebook, you can build web apps with the tools you are used to, develop and test right on device with tools like Node.js, Docker, and Angular, test across multiple browsers, including mobile browsers, and even test mobile app and web interaction right on device. And all of this could even happen offline, like on a long flight. So now, don't you agree Chromebooks are awesome? As promised, here is a link to a guide to get your Linux environment customized just the way you like. It's cros.page.link\/web-dev. Thank you. Can't wait to see what you build.\n","image":{"@type":"ImageObject","url":"https:\/\/i2.wp.com\/askbootstrap.com\/wp-content\/uploads\/2020\/02\/Screenshot.png?fit=1702%2C854&ssl=1","width":1702,"height":854}}</script>
  		<div class="toggle-post-content clearfix">
  			<a id="toggle-post-button" class="button" href="#">
  				Show More <span class="fa fa-chevron-down"></span>
  			</a>
  		</div><!-- .toggle-post-content -->
  		
  		<div class="post-footer post-footer-on-bottom">
  			<div class="post-footer-inner">
  				<div class="share-links  share-centered icons-only">
  
  												<div class="share-title">
  								<span class="fa fa-share-alt" aria-hidden="true"></span>
  								<span> Share</span>
  							</div>
  							<a href="http://www.facebook.com/sharer.php?u=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="facebook-share-btn"><span class="fa fa-facebook"></span> <span class="screen-reader-text">Facebook</span></a><a href="https://twitter.com/intent/tweet?text=Web+development+on+Chrome+OS&#038;url=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="twitter-share-btn"><span class="fa fa-twitter"></span> <span class="screen-reader-text">Twitter</span></a><a href="http://www.tumblr.com/share/link?url=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/&#038;name=Web+development+on+Chrome+OS" rel="external" target="_blank" class="tumblr-share-btn"><span class="fa fa-tumblr"></span> <span class="screen-reader-text">Tumblr</span></a><a href="http://pinterest.com/pin/create/button/?url=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/&#038;description=Web+development+on+Chrome+OS&#038;media=https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/02/Screenshot.png?resize=780%2C405&#038;ssl=1" rel="external" target="_blank" class="pinterest-share-btn"><span class="fa fa-pinterest"></span> <span class="screen-reader-text">Pinterest</span></a><a href="http://reddit.com/submit?url=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/&#038;title=Web+development+on+Chrome+OS" rel="external" target="_blank" class="reddit-share-btn"><span class="fa fa-reddit"></span> <span class="screen-reader-text">Reddit</span></a><a href="http://vk.com/share.php?url=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="vk-share-btn"><span class="fa fa-vk"></span> <span class="screen-reader-text">VKontakte</span></a><a href="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&#038;st.shareUrl=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/&#038;description=Web+development+on+Chrome+OS&#038;media=https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/02/Screenshot.png?resize=780%2C405&#038;ssl=1" rel="external" target="_blank" class="odnoklassniki-share-btn"><span class="fa fa-odnoklassniki"></span> <span class="screen-reader-text">Odnoklassniki</span></a><a href="https://getpocket.com/save?title=Web+development+on+Chrome+OS&#038;url=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="pocket-share-btn"><span class="fa fa-get-pocket"></span> <span class="screen-reader-text">Pocket</span></a><a href="whatsapp://send?text=Web+development+on+Chrome+OS - https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="whatsapp-share-btn"><span class="fa fa-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span></a><a href="tg://msg?text=Web+development+on+Chrome+OS - https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="telegram-share-btn"><span class="fa fa-paper-plane"></span> <span class="screen-reader-text">Telegram</span></a><a href="mailto:?subject=Web+development+on+Chrome+OS&#038;body=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="email-share-btn"><span class="fa fa-envelope"></span> <span class="screen-reader-text">Share via Email</span></a>				</div><!-- .share-links /-->
  			</div><!-- .post-footer-inner /-->
  		</div><!-- .post-footer-on-top /-->
  
  		
  			</article><!-- #the-post /-->
  
  
  			
  
  			<div class="post-components">
  				
  		<div class="about-author container-wrapper">
  
  								<div class="author-avatar">
  						<a href="https://askbootstrap.com/author/ask_admin/">
  							<img alt='' src='https://secure.gravatar.com/avatar/592c98136dfcb2a79b10d2c1daf80365?s=180&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/592c98136dfcb2a79b10d2c1daf80365?s=360&#038;d=mm&#038;r=g 2x' class='avatar avatar-180 photo' height='180' width='180' />						</a>
  					</div><!-- .author-avatar /-->
  					
  			<div class="author-info">
  				<h3 class="author-name"><a href="https://askbootstrap.com/author/ask_admin/">Askbootstrap</a></h3>
  
  				<div class="author-bio">
  									</div><!-- .author-bio /-->
  
  				<ul class="social-icons"></ul>			</div><!-- .author-info /-->
  			<div class="clearfix"></div>
  		</div><!-- .about-author /-->
  		<div class="prev-next-post-nav container-wrapper media-overlay">
  			<div class="tie-col-xs-6 prev-post">
  				<a href="https://askbootstrap.com/bootstrap-news/best-black-friday-deals-for-web-developers-and-designers/" style="background-image: url(https://i0.wp.com/askbootstrap.com/wp-content/uploads/2019/11/Black-Friday-deals.png?resize=390%2C220&#038;ssl=1)" class="post-thumb" rel="prev">
  					<div class="post-thumb-overlay-wrap">
  						<div class="post-thumb-overlay">
  							<span class="icon"></span>
  						</div>
  					</div>
  				</a>
  
  				<a href="https://askbootstrap.com/bootstrap-news/best-black-friday-deals-for-web-developers-and-designers/" rel="prev">
  					<h3 class="post-title">Best Black Friday deals for web developers and designers</h3>
  				</a>
  			</div>
  
  			
  			<div class="tie-col-xs-6 next-post">
  				<a href="https://askbootstrap.com/web-tips-and-tricks/100-sources-of-free-stock-images-for-your-templates-videos-and-websites/" style="background-image: url(https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/02/100-sites-for-free-photos-cover.jpg?resize=390%2C220&#038;ssl=1)" class="post-thumb" rel="next">
  					<div class="post-thumb-overlay-wrap">
  						<div class="post-thumb-overlay">
  							<span class="icon"></span>
  						</div>
  					</div>
  				</a>
  
  				<a href="https://askbootstrap.com/web-tips-and-tricks/100-sources-of-free-stock-images-for-your-templates-videos-and-websites/" rel="next">
  					<h3 class="post-title">100 sources of free stock images for your templates, videos and websites</h3>
  				</a>
  			</div>
  
  			</div><!-- .prev-next-post-nav /-->
  	
  
  				<div id="related-posts" class="container-wrapper has-extra-post">
  
  					<div class="mag-box-title the-global-title">
  						<h3>Related Articles</h3>
  					</div>
  
  					<div class="related-posts-list">
  
  					
  							<div class="related-item tie_standard">
  
  								
  			<a href="https://askbootstrap.com/freelancing/apps-every-freelancer-must-use-to-boost-productivity/" title="Apps every freelancer must use to boost productivity" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2018/11/freelancer-must-use.jpg?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="Apps every freelancer must use to boost productivity" srcset="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2018/11/freelancer-must-use.jpg?resize=390%2C220&amp;ssl=1 390w, https://i2.wp.com/askbootstrap.com/wp-content/uploads/2018/11/freelancer-must-use.jpg?zoom=2&amp;resize=390%2C220&amp;ssl=1 780w" sizes="(max-width: 390px) 100vw, 390px" /></a><div class="post-meta"><div class="tie-alignright"><span class="meta-views meta-item "><span class="tie-icon-fire" aria-hidden="true"></span> 191 </span> </div><div class="clearfix"></div></div><!-- .post-meta -->
  								<h3 class="post-title"><a href="https://askbootstrap.com/freelancing/apps-every-freelancer-must-use-to-boost-productivity/" title="Apps every freelancer must use to boost productivity">Apps every freelancer must use to boost productivity</a></h3>
  
  							</div><!-- .related-item /-->
  
  						
  							<div class="related-item tie_standard">
  
  								
  			<a href="https://askbootstrap.com/web-tips-and-tricks/add-a-css-preloader-animation-to-your-website/" title="Add a CSS preloader animation to your website" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2018/11/preloader-animation.jpg?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="Add a CSS preloader animation to your website" srcset="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2018/11/preloader-animation.jpg?resize=390%2C220&amp;ssl=1 390w, https://i2.wp.com/askbootstrap.com/wp-content/uploads/2018/11/preloader-animation.jpg?zoom=2&amp;resize=390%2C220&amp;ssl=1 780w" sizes="(max-width: 390px) 100vw, 390px" /></a><div class="post-meta"><div class="tie-alignright"><span class="meta-views meta-item "><span class="tie-icon-fire" aria-hidden="true"></span> 243 </span> </div><div class="clearfix"></div></div><!-- .post-meta -->
  								<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/add-a-css-preloader-animation-to-your-website/" title="Add a CSS preloader animation to your website">Add a CSS preloader animation to your website</a></h3>
  
  							</div><!-- .related-item /-->
  
  						
  							<div class="related-item tie_standard">
  
  								
  			<a href="https://askbootstrap.com/freelancing/6-tools-to-track-your-instagram-followers/" title="6 Tools to Track Your Instagram Followers" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2019/11/6-Tools-to-Track-Your-Instagram-Followers.png?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" /></a><div class="post-meta"><div class="tie-alignright"><span class="meta-views meta-item "><span class="tie-icon-fire" aria-hidden="true"></span> 135 </span> </div><div class="clearfix"></div></div><!-- .post-meta -->
  								<h3 class="post-title"><a href="https://askbootstrap.com/freelancing/6-tools-to-track-your-instagram-followers/" title="6 Tools to Track Your Instagram Followers">6 Tools to Track Your Instagram Followers</a></h3>
  
  							</div><!-- .related-item /-->
  
  						
  							<div class="related-item tie_standard">
  
  								
  			<a href="https://askbootstrap.com/design/essential-photoshop-cc-2017-shortcut-keys-for-designers/" title="Essential Photoshop CC 2017 shortcut keys for designers" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2018/11/Photoshop-CC-2017-shortcut.jpg?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="Essential Photoshop CC 2017 shortcut keys for designers" srcset="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2018/11/Photoshop-CC-2017-shortcut.jpg?resize=390%2C220&amp;ssl=1 390w, https://i1.wp.com/askbootstrap.com/wp-content/uploads/2018/11/Photoshop-CC-2017-shortcut.jpg?zoom=2&amp;resize=390%2C220&amp;ssl=1 780w" sizes="(max-width: 390px) 100vw, 390px" /></a><div class="post-meta"><div class="tie-alignright"><span class="meta-views meta-item warm"><span class="tie-icon-fire" aria-hidden="true"></span> 1,448 </span> </div><div class="clearfix"></div></div><!-- .post-meta -->
  								<h3 class="post-title"><a href="https://askbootstrap.com/design/essential-photoshop-cc-2017-shortcut-keys-for-designers/" title="Essential Photoshop CC 2017 shortcut keys for designers">Essential Photoshop CC 2017 shortcut keys for designers</a></h3>
  
  							</div><!-- .related-item /-->
  
  						
  					</div><!-- .related-posts-list /-->
  				</div><!-- #related-posts /-->
  
  			
  			<div id="comments" class="comments-area">
  
  		
  
  		
  		<div id="respond" class="comment-respond">
  							<h3 id="reply-title" class="comment-reply-title">Leave a Reply					<small><a rel="nofollow" id="cancel-comment-reply-link" href="/web-tips-and-tricks/web-development-on-chrome-os/#respond" style="display:none;">Cancel reply</a></small>
  				</h3>
  						<form id="commentform" class="comment-form">
  				<iframe title="Comment Form" src="https://jetpack.wordpress.com/jetpack-comment/?blogid=143731127&#038;postid=1610&#038;comment_registration=0&#038;require_name_email=1&#038;stc_enabled=1&#038;stb_enabled=1&#038;show_avatars=1&#038;avatar_default=mystery&#038;greeting=Leave+a+Reply&#038;greeting_reply=Leave+a+Reply+to+%25s&#038;color_scheme=light&#038;lang=en_US&#038;jetpack_version=8.4.2&#038;show_cookie_consent=10&#038;has_cookie_consent=0&#038;token_key=%3Bnormal%3B&#038;sig=6470325c79fe0282ad4076c1b9c710388a49d755#parent=https%3A%2F%2Faskbootstrap.com%2Fweb-tips-and-tricks%2Fweb-development-on-chrome-os%2F" style="width:100%; height: 430px; border:0;" name="jetpack_remote_comment" class="jetpack_remote_comment" id="jetpack_remote_comment" sandbox="allow-same-origin allow-top-navigation allow-scripts allow-forms allow-popups"></iframe>
  									<!--[if !IE]><!-->
  					<script>
  						document.addEventListener('DOMContentLoaded', function () {
  							var commentForms = document.getElementsByClassName('jetpack_remote_comment');
  							for (var i = 0; i < commentForms.length; i++) {
  								commentForms[i].allowTransparency = false;
  								commentForms[i].scrolling = 'no';
  							}
  						});
  					</script>
  					<!--<![endif]-->
  							</form>
  		</div>
  
  		
  		<input type="hidden" name="comment_parent" id="comment_parent" value="" />
  
  		<p class="akismet_comment_form_privacy_notice">This site uses Akismet to reduce spam. <a href="https://akismet.com/privacy/" target="_blank" rel="nofollow noopener">Learn how your comment data is processed</a>.</p>
  	</div><!-- .comments-area -->
  
  			</div><!-- .post-components /-->
  
  		</div><!-- .main-content -->
  
  		
  		<div id="check-also-box" class="container-wrapper check-also-right">
  
  			<div class="widget-title the-global-title">
  				<h4>Check Also</h4>
  
  				<a href="#" id="check-also-close" class="remove">
  					<span class="screen-reader-text">Close</span>
  				</a>
  			</div>
  
  			<div class="widget posts-list-big-first">
  				<ul class="posts-list-items">
  
  				<li class="widget-post-list tie_standard">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/bootstrap-news/gatsby-easily-start-with-bootstrap/" title="Gatsby Easily Start with bootstrap" class="post-thumb"><h5 class="post-cat-wrap"><span class="post-cat tie-cat-188">Bootstrap News</span></h5>
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2019/08/gatsby_blog-740x370.png?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/bootstrap-news/gatsby-easily-start-with-bootstrap/" title="Gatsby Easily Start with bootstrap">Gatsby Easily Start with bootstrap</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  
  				</ul><!-- .related-posts-list /-->
  			</div>
  		</div><!-- #related-posts /-->
  
  		
  
  	<aside class="sidebar tie-col-md-4 tie-col-xs-12 normal-side is-sticky" aria-label="Primary Sidebar">
  		<div class="theiaStickySidebar">
  			<div id="custom_html-9" class="widget_text container-wrapper widget widget_custom_html"><div class="textwidget custom-html-widget"><a href="https://www.bluehost.com/track/iamsewak/superhost" target="_blank" rel="noopener noreferrer"> <img alt="bluehost" border="0" src="https://i1.wp.com/bluehost-cdn.com/media/partner/images/iamsewak/300x250/300x250BW.png?w=708&#038;ssl=1" data-recalc-dims="1"> </a></div><div class="clearfix"></div></div><!-- .widget /-->
  			<div class="container-wrapper tabs-container-wrapper">
  				<div class="widget tabs-widget">
  					<div class="widget-container">
  						<div class="tabs-widget">
  							<div class="tabs-wrapper">
  
  								<ul class="tabs-menu">
  									<li><a href="#widget_tabs-1-popular">Popular</a></li><li><a href="#widget_tabs-1-recent">Recent</a></li><li><a href="#widget_tabs-1-comments">Comments</a></li>								</ul><!-- ul.tabs-menu /-->
  
  								
  											<div id="widget_tabs-1-popular" class="tab-content tab-content-popular">
  												<ul class="tab-content-elements">
  													<li class="widget-post-list tie_standard">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/how-to-build-a-simple-ionic-4-wordpress-client/" title="How to Build A Simple Ionic 4 WordPress Client" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="220" height="150" src="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=220%2C150&amp;ssl=1" class="attachment-jannah-image-small size-jannah-image-small wp-post-image" alt="Ionic 4 WordPress" srcset="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=220%2C150&amp;ssl=1 220w, https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?zoom=2&amp;resize=220%2C150&amp;ssl=1 440w, https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?zoom=3&amp;resize=220%2C150&amp;ssl=1 660w" sizes="(max-width: 220px) 100vw, 220px" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/how-to-build-a-simple-ionic-4-wordpress-client/" title="How to Build A Simple Ionic 4 WordPress Client">How to Build A Simple Ionic 4 WordPress Client</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list tie_video">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/" title="Remove Fence with 3 Simple Steps in Photoshop!" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="220" height="150" src="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?resize=220%2C150&amp;ssl=1" class="attachment-jannah-image-small size-jannah-image-small wp-post-image" alt="Remove Fence with 3 Simple Steps in Photoshop!" srcset="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?resize=220%2C150&amp;ssl=1 220w, https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?zoom=2&amp;resize=220%2C150&amp;ssl=1 440w, https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?zoom=3&amp;resize=220%2C150&amp;ssl=1 660w" sizes="(max-width: 220px) 100vw, 220px" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/" title="Remove Fence with 3 Simple Steps in Photoshop!">Remove Fence with 3 Simple Steps in Photoshop!</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list tie_video">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/html-to-react-components/" title="Easiest Way To Convert HTML Pages Into React Components" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="220" height="150" src="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/03/1042110_ffc3_4.jpg?resize=220%2C150&amp;ssl=1" class="attachment-jannah-image-small size-jannah-image-small wp-post-image" alt="Converts HTML pages into React components" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/html-to-react-components/" title="Easiest Way To Convert HTML Pages Into React Components">Easiest Way To Convert HTML Pages Into React Components</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list tie_standard">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/top-8-youtube-channels-for-ui-ux-designers/" title="Top 8 Youtube channels for UI/UX designers" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="220" height="150" src="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/03/Top-8-Youtube-channels-for-ui-ux-designers.png?resize=220%2C150&amp;ssl=1" class="attachment-jannah-image-small size-jannah-image-small wp-post-image" alt="Top 8 Youtube channels for UI/UX designers" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/top-8-youtube-channels-for-ui-ux-designers/" title="Top 8 Youtube channels for UI/UX designers">Top 8 Youtube channels for UI/UX designers</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list is-trending tie_standard">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/top-6-ai-tools-for-designers/" title="Top 6 AI Tools for Designers" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="220" height="150" src="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/02/Top-6-AI-Tools-for-Designers.png?resize=220%2C150&amp;ssl=1" class="attachment-jannah-image-small size-jannah-image-small wp-post-image" alt="Top 6 AI Tools for Designers" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/top-6-ai-tools-for-designers/" title="Top 6 AI Tools for Designers">Top 6 AI Tools for Designers</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  												</ul>
  											</div><!-- .tab-content#popular-posts-tab /-->
  
  										
  											<div id="widget_tabs-1-recent" class="tab-content tab-content-recent">
  												<ul class="tab-content-elements">
  													<li class="widget-post-list tie_standard">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/how-to-build-a-simple-ionic-4-wordpress-client/" title="How to Build A Simple Ionic 4 WordPress Client" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="220" height="150" src="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=220%2C150&amp;ssl=1" class="attachment-jannah-image-small size-jannah-image-small wp-post-image" alt="Ionic 4 WordPress" srcset="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=220%2C150&amp;ssl=1 220w, https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?zoom=2&amp;resize=220%2C150&amp;ssl=1 440w, https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?zoom=3&amp;resize=220%2C150&amp;ssl=1 660w" sizes="(max-width: 220px) 100vw, 220px" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/how-to-build-a-simple-ionic-4-wordpress-client/" title="How to Build A Simple Ionic 4 WordPress Client">How to Build A Simple Ionic 4 WordPress Client</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list tie_video">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/" title="Remove Fence with 3 Simple Steps in Photoshop!" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="220" height="150" src="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?resize=220%2C150&amp;ssl=1" class="attachment-jannah-image-small size-jannah-image-small wp-post-image" alt="Remove Fence with 3 Simple Steps in Photoshop!" srcset="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?resize=220%2C150&amp;ssl=1 220w, https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?zoom=2&amp;resize=220%2C150&amp;ssl=1 440w, https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?zoom=3&amp;resize=220%2C150&amp;ssl=1 660w" sizes="(max-width: 220px) 100vw, 220px" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/" title="Remove Fence with 3 Simple Steps in Photoshop!">Remove Fence with 3 Simple Steps in Photoshop!</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list tie_video">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/html-to-react-components/" title="Easiest Way To Convert HTML Pages Into React Components" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="220" height="150" src="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/03/1042110_ffc3_4.jpg?resize=220%2C150&amp;ssl=1" class="attachment-jannah-image-small size-jannah-image-small wp-post-image" alt="Converts HTML pages into React components" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/html-to-react-components/" title="Easiest Way To Convert HTML Pages Into React Components">Easiest Way To Convert HTML Pages Into React Components</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list tie_standard">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/top-8-youtube-channels-for-ui-ux-designers/" title="Top 8 Youtube channels for UI/UX designers" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="220" height="150" src="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/03/Top-8-Youtube-channels-for-ui-ux-designers.png?resize=220%2C150&amp;ssl=1" class="attachment-jannah-image-small size-jannah-image-small wp-post-image" alt="Top 8 Youtube channels for UI/UX designers" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/top-8-youtube-channels-for-ui-ux-designers/" title="Top 8 Youtube channels for UI/UX designers">Top 8 Youtube channels for UI/UX designers</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list is-trending tie_standard">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/top-6-ai-tools-for-designers/" title="Top 6 AI Tools for Designers" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="220" height="150" src="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/02/Top-6-AI-Tools-for-Designers.png?resize=220%2C150&amp;ssl=1" class="attachment-jannah-image-small size-jannah-image-small wp-post-image" alt="Top 6 AI Tools for Designers" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/top-6-ai-tools-for-designers/" title="Top 6 AI Tools for Designers">Top 6 AI Tools for Designers</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  												</ul>
  											</div><!-- .tab-content#recent-posts-tab /-->
  
  										
  											<div id="widget_tabs-1-comments" class="tab-content tab-content-comments">
  												<ul class="tab-content-elements">
  																<li>
  									<div class="post-widget-thumbnail" style="width:70px">
  						<a class="author-avatar" href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/#comment-325">
  							<img alt='' src='https://secure.gravatar.com/avatar/d2de757120b27af2d4bced6cc5164761?s=70&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/d2de757120b27af2d4bced6cc5164761?s=140&#038;d=mm&#038;r=g 2x' class='avatar avatar-70 photo' height='70' width='70' />						</a>
  					</div>
  					
  				<div class="comment-body">
  					<a class="comment-author" href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/#comment-325">
  						ssimmysimmy					</a>
  					<p>Useful one...</p>
  				</div>
  
  			</li>
  						<li>
  									<div class="post-widget-thumbnail" style="width:70px">
  						<a class="author-avatar" href="https://askbootstrap.com/web-tips-and-tricks/scaling-images-with-jquery-resize-image-on-hover/#comment-214">
  							<img alt='' src='https://secure.gravatar.com/avatar/b7d697881d95f896c7670970d64f3a2f?s=70&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/b7d697881d95f896c7670970d64f3a2f?s=140&#038;d=mm&#038;r=g 2x' class='avatar avatar-70 photo' height='70' width='70' />						</a>
  					</div>
  					
  				<div class="comment-body">
  					<a class="comment-author" href="https://askbootstrap.com/web-tips-and-tricks/scaling-images-with-jquery-resize-image-on-hover/#comment-214">
  						Hossi					</a>
  					<p>Jquery : function mOver(Jeese) { $(Jeese).mouseover(function...</p>
  				</div>
  
  			</li>
  						<li>
  									<div class="post-widget-thumbnail" style="width:70px">
  						<a class="author-avatar" href="https://askbootstrap.com/web-tips-and-tricks/scaling-images-with-jquery-resize-image-on-hover/#comment-154">
  							<img alt='' src='https://secure.gravatar.com/avatar/a0882bfdc9d4ef2d6ad3ab0bba36c788?s=70&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/a0882bfdc9d4ef2d6ad3ab0bba36c788?s=140&#038;d=mm&#038;r=g 2x' class='avatar avatar-70 photo' height='70' width='70' />						</a>
  					</div>
  					
  				<div class="comment-body">
  					<a class="comment-author" href="https://askbootstrap.com/web-tips-and-tricks/scaling-images-with-jquery-resize-image-on-hover/#comment-154">
  						BUDDHADEB DAS					</a>
  					<p>Recently I saw your grocery theme its awesome .....</p>
  				</div>
  
  			</li>
  						<li>
  									<div class="post-widget-thumbnail" style="width:70px">
  						<a class="author-avatar" href="https://askbootstrap.com/web-tips-and-tricks/scaling-images-with-jquery-resize-image-on-hover/#comment-146">
  							<img alt='' src='https://secure.gravatar.com/avatar/58828c519fc48652487f4240d955cd82?s=70&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/58828c519fc48652487f4240d955cd82?s=140&#038;d=mm&#038;r=g 2x' class='avatar avatar-70 photo' height='70' width='70' />						</a>
  					</div>
  					
  				<div class="comment-body">
  					<a class="comment-author" href="https://askbootstrap.com/web-tips-and-tricks/scaling-images-with-jquery-resize-image-on-hover/#comment-146">
  						Living Phat3					</a>
  					<p>Thank you, this worked, but what would I do if i have multip...</p>
  				</div>
  
  			</li>
  															</ul>
  											</div><!-- .tab-content#comments-tab /-->
  
  										
  							</div><!-- .tabs-wrapper-animated /-->
  						</div><!-- .tabs-widget /-->
  					</div><!-- .widget-container /-->
  				</div><!-- .tabs-widget /-->
  			</div><!-- .container-wrapper /-->
  			<div id="posts-list-widget-3" class="container-wrapper widget posts-list"><div class="widget-title the-global-title"><h4>Something Related Here<span class="widget-title-icon fa"></span></h4></div><div class="posts-list-half-posts"><ul class="posts-list-items"><li class="widget-post-list tie_video">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/html-to-react-components/" title="Easiest Way To Convert HTML Pages Into React Components" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/03/1042110_ffc3_4.jpg?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="Converts HTML pages into React components" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/html-to-react-components/" title="Easiest Way To Convert HTML Pages Into React Components">Easiest Way To Convert HTML Pages Into React Components</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list tie_standard">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/top-8-youtube-channels-for-ui-ux-designers/" title="Top 8 Youtube channels for UI/UX designers" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/03/Top-8-Youtube-channels-for-ui-ux-designers.png?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="Top 8 Youtube channels for UI/UX designers" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/top-8-youtube-channels-for-ui-ux-designers/" title="Top 8 Youtube channels for UI/UX designers">Top 8 Youtube channels for UI/UX designers</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list is-trending tie_standard">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/top-6-ai-tools-for-designers/" title="Top 6 AI Tools for Designers" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/02/Top-6-AI-Tools-for-Designers.png?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="Top 6 AI Tools for Designers" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/top-6-ai-tools-for-designers/" title="Top 6 AI Tools for Designers">Top 6 AI Tools for Designers</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list is-trending tie_standard">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/100-sources-of-free-stock-images-for-your-templates-videos-and-websites/" title="100 sources of free stock images for your templates, videos and websites" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/02/100-sites-for-free-photos-cover.jpg?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="100-sites-for-free-photos-cover" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/100-sources-of-free-stock-images-for-your-templates-videos-and-websites/" title="100 sources of free stock images for your templates, videos and websites">100 sources of free stock images for your templates, videos and websites</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  </ul></div><div class="clearfix"></div></div><!-- .widget /-->		</div><!-- .theiaStickySidebar /-->
  	</aside><!-- .sidebar /-->
  	
  			
  				</div><!-- .main-content-row /-->
  			</div><!-- #content /-->
  		
  <footer id="footer" class="site-footer dark-skin">
  
  	
  	
  		<div id="footer-widgets-container">
  			<div class="container">
  				
  
  		<div class="footer-widget-area ">
  			<div class="tie-row">
  
  									<div class="tie-col-md-3 normal-side">
  						<div id="posts-list-widget-1" class="container-wrapper widget posts-list"><div class="widget-title the-global-title"><h4>Most Viewed Posts<span class="widget-title-icon fa"></span></h4></div><div class="timeline-widget"><ul class="posts-list-items">					<li>
  						<a href="https://askbootstrap.com/web-tips-and-tricks/how-to-build-a-simple-ionic-4-wordpress-client/">
  														<h3>How to Build A Simple Ionic 4 WordPress Client</h3>
  						</a>
  					</li>
  										<li>
  						<a href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/">
  														<h3>Remove Fence with 3 Simple Steps in Photoshop!</h3>
  						</a>
  					</li>
  										<li>
  						<a href="https://askbootstrap.com/web-tips-and-tricks/html-to-react-components/">
  														<h3>Easiest Way To Convert HTML Pages Into React Components</h3>
  						</a>
  					</li>
  					</ul></div><div class="clearfix"></div></div><!-- .widget /-->					</div><!-- .tie-col /-->
  				
  									<div class="tie-col-md-3 normal-side">
  						<div id="posts-list-widget-2" class="container-wrapper widget posts-list"><div class="widget-title the-global-title"><h4>Last Modified Posts<span class="widget-title-icon fa"></span></h4></div><div class="posts-pictures-widget"><div class="tie-row">						<div class="tie-col-xs-4 tie_standard">
  							
  			<a href="https://askbootstrap.com/web-tips-and-tricks/how-to-build-a-simple-ionic-4-wordpress-client/" title="How to Build A Simple Ionic 4 WordPress Client" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="Ionic 4 WordPress" srcset="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?w=750&amp;ssl=1 750w, https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=300%2C169&amp;ssl=1 300w, https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=390%2C220&amp;ssl=1 390w, https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=600%2C338&amp;ssl=1 600w, https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=64%2C36&amp;ssl=1 64w" sizes="(max-width: 390px) 100vw, 390px" /></a>						</div>
  												<div class="tie-col-xs-4 tie_video">
  							
  			<a href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/" title="Remove Fence with 3 Simple Steps in Photoshop!" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="Remove Fence with 3 Simple Steps in Photoshop!" srcset="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?w=1280&amp;ssl=1 1280w, https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?resize=300%2C169&amp;ssl=1 300w, https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?resize=1024%2C576&amp;ssl=1 1024w, https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?resize=768%2C432&amp;ssl=1 768w, https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?resize=390%2C220&amp;ssl=1 390w, https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?resize=600%2C338&amp;ssl=1 600w, https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?resize=64%2C36&amp;ssl=1 64w" sizes="(max-width: 390px) 100vw, 390px" /></a>						</div>
  												<div class="tie-col-xs-4 tie_video">
  							
  			<a href="https://askbootstrap.com/web-tips-and-tricks/html-to-react-components/" title="Easiest Way To Convert HTML Pages Into React Components" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/03/1042110_ffc3_4.jpg?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="Converts HTML pages into React components" /></a>						</div>
  												<div class="tie-col-xs-4 tie_standard">
  							
  			<a href="https://askbootstrap.com/web-tips-and-tricks/top-8-youtube-channels-for-ui-ux-designers/" title="Top 8 Youtube channels for UI/UX designers" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/03/Top-8-Youtube-channels-for-ui-ux-designers.png?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="Top 8 Youtube channels for UI/UX designers" /></a>						</div>
  												<div class="tie-col-xs-4 is-trending tie_standard">
  							
  			<a href="https://askbootstrap.com/web-tips-and-tricks/top-6-ai-tools-for-designers/" title="Top 6 AI Tools for Designers" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/02/Top-6-AI-Tools-for-Designers.png?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="Top 6 AI Tools for Designers" /></a>						</div>
  												<div class="tie-col-xs-4 tie_video">
  							
  			<a href="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" title="Web development on Chrome OS" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/02/Screenshot.png?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="Web development on Chrome OS" /></a>						</div>
  												<div class="tie-col-xs-4 is-trending tie_standard">
  							
  			<a href="https://askbootstrap.com/web-tips-and-tricks/100-sources-of-free-stock-images-for-your-templates-videos-and-websites/" title="100 sources of free stock images for your templates, videos and websites" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/02/100-sites-for-free-photos-cover.jpg?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="100-sites-for-free-photos-cover" /></a>						</div>
  												<div class="tie-col-xs-4 tie_standard">
  							
  			<a href="https://askbootstrap.com/bootstrap-news/best-black-friday-deals-for-web-developers-and-designers/" title="Best Black Friday deals for web developers and designers" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2019/11/Black-Friday-deals.png?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="Askbootstrap" /></a>						</div>
  												<div class="tie-col-xs-4 tie_video">
  							
  			<a href="https://askbootstrap.com/design/motion-design-in-ui-designing-in-the-browser/" title="Motion Design in UI &#8211; Designing in the Browser" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2019/11/designing-in-the-browser-episode-1-motion-in-ui.jpg?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="" /></a>						</div>
  						</div></div><div class="clearfix"></div></div><!-- .widget /-->					</div><!-- .tie-col /-->
  				
  									<div class="tie-col-md-3 normal-side">
  						<div id="tag_cloud-1" class="container-wrapper widget widget_tag_cloud"><div class="widget-title the-global-title"><h4>Tags<span class="widget-title-icon fa"></span></h4></div><div class="tagcloud"><a href="https://askbootstrap.com/topic/askbootstrap/" class="tag-cloud-link tag-link-208 tag-link-position-1" style="font-size: 16.75pt;" aria-label="askbootstrap (3 items)">askbootstrap</a>
  <a href="https://askbootstrap.com/topic/bootstrap/" class="tag-cloud-link tag-link-189 tag-link-position-2" style="font-size: 22pt;" aria-label="Bootstrap (5 items)">Bootstrap</a>
  <a href="https://askbootstrap.com/topic/css/" class="tag-cloud-link tag-link-193 tag-link-position-3" style="font-size: 19.666666666667pt;" aria-label="CSS (4 items)">CSS</a>
  <a href="https://askbootstrap.com/topic/design/" class="tag-cloud-link tag-link-194 tag-link-position-4" style="font-size: 22pt;" aria-label="Design (5 items)">Design</a>
  <a href="https://askbootstrap.com/topic/followers/" class="tag-cloud-link tag-link-218 tag-link-position-5" style="font-size: 8pt;" aria-label="Followers (1 item)">Followers</a>
  <a href="https://askbootstrap.com/topic/instagram/" class="tag-cloud-link tag-link-215 tag-link-position-6" style="font-size: 13.25pt;" aria-label="Instagram (2 items)">Instagram</a>
  <a href="https://askbootstrap.com/topic/jquery/" class="tag-cloud-link tag-link-198 tag-link-position-7" style="font-size: 13.25pt;" aria-label="Jquery (2 items)">Jquery</a>
  <a href="https://askbootstrap.com/topic/offer/" class="tag-cloud-link tag-link-220 tag-link-position-8" style="font-size: 13.25pt;" aria-label="offer (2 items)">offer</a>
  <a href="https://askbootstrap.com/topic/open-page-in-a-modal/" class="tag-cloud-link tag-link-202 tag-link-position-9" style="font-size: 8pt;" aria-label="Open Page in a Modal (1 item)">Open Page in a Modal</a>
  <a href="https://askbootstrap.com/topic/resize-image/" class="tag-cloud-link tag-link-200 tag-link-position-10" style="font-size: 8pt;" aria-label="Resize Image (1 item)">Resize Image</a>
  <a href="https://askbootstrap.com/topic/resize-image-with-jquery/" class="tag-cloud-link tag-link-201 tag-link-position-11" style="font-size: 8pt;" aria-label="Resize Image With Jquery (1 item)">Resize Image With Jquery</a>
  <a href="https://askbootstrap.com/topic/scaling-image/" class="tag-cloud-link tag-link-199 tag-link-position-12" style="font-size: 8pt;" aria-label="Scaling Image (1 item)">Scaling Image</a>
  <a href="https://askbootstrap.com/topic/themeforest/" class="tag-cloud-link tag-link-191 tag-link-position-13" style="font-size: 8pt;" aria-label="ThemeForest (1 item)">ThemeForest</a>
  <a href="https://askbootstrap.com/topic/tools/" class="tag-cloud-link tag-link-217 tag-link-position-14" style="font-size: 13.25pt;" aria-label="Tools (2 items)">Tools</a>
  <a href="https://askbootstrap.com/topic/track/" class="tag-cloud-link tag-link-216 tag-link-position-15" style="font-size: 13.25pt;" aria-label="Track (2 items)">Track</a>
  <a href="https://askbootstrap.com/topic/ui/" class="tag-cloud-link tag-link-205 tag-link-position-16" style="font-size: 16.75pt;" aria-label="UI (3 items)">UI</a>
  <a href="https://askbootstrap.com/topic/ux/" class="tag-cloud-link tag-link-206 tag-link-position-17" style="font-size: 16.75pt;" aria-label="UX (3 items)">UX</a>
  <a href="https://askbootstrap.com/topic/web-design/" class="tag-cloud-link tag-link-207 tag-link-position-18" style="font-size: 22pt;" aria-label="web design (5 items)">web design</a></div>
  <div class="clearfix"></div></div><!-- .widget /-->					</div><!-- .tie-col /-->
  				
  									<div class="tie-col-md-3 normal-side">
  						<div id="blog_subscription-5" class="container-wrapper widget widget_blog_subscription jetpack_subscription_widget"><div class="widget-title the-global-title"><h4>Subscribe Email Updates<span class="widget-title-icon fa"></span></h4></div>
              <form action="#" method="post" accept-charset="utf-8" id="subscribe-blog-blog_subscription-5">
  				                    <div id="subscribe-text"><p>Enter your email address to subscribe and receive notifications of new posts by email.</p>
  </div><p>Join 87 other subscribers</p>
                      <p id="subscribe-email">
                          <label id="jetpack-subscribe-label"
                                 class="screen-reader-text"
                                 for="subscribe-field-blog_subscription-5">
  							Email Address                        </label>
                          <input type="email" name="email" required="required" class="required"
                                 value=""
                                 id="subscribe-field-blog_subscription-5"
                                 placeholder="Email Address"/>
                      </p>
  
                      <p id="subscribe-submit">
                          <input type="hidden" name="action" value="subscribe"/>
                          <input type="hidden" name="source" value="https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/"/>
                          <input type="hidden" name="sub-type" value="widget"/>
                          <input type="hidden" name="redirect_fragment" value="blog_subscription-5"/>
  						                        <button type="submit"
  	                        		                    	                        name="jetpack_subscriptions_widget"
  	                    >
  	                        Subscribe                        </button>
                      </p>
  				            </form>
  		
  <div class="clearfix"></div></div><!-- .widget /-->					</div><!-- .tie-col /-->
  				
  			</div><!-- .tie-row /-->
  		</div><!-- .footer-widget-area /-->
  
  		
  
  		<div class="footer-widget-area ">
  			<div class="tie-row">
  
  				
  				
  				
  									<div class=" normal-side">
  											</div><!-- .tie-col /-->
  				
  			</div><!-- .tie-row /-->
  		</div><!-- .footer-widget-area /-->
  
  					</div><!-- .container /-->
  		</div><!-- #Footer-widgets-container /-->
  		
  
  	
  		<div id="site-info" class="site-info-layout-2">
  			<div class="container">
  				<div class="tie-row">
  					<div class="tie-col-md-12">
  
  						<div class="copyright-text copyright-text-first">&copy; Copyright 2020, All Rights Reserved</div><div class="footer-menu"><ul id="menu-footer" class="menu"><li id="menu-item-1031" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1031"><a href="https://askbootstrap.com">Home</a></li>
  <li id="menu-item-1028" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1028"><a href="https://askbootstrap.com/my-account/">My Account</a></li>
  <li id="menu-item-1029" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1029"><a href="https://askbootstrap.com/shop/">Template Store</a></li>
  <li id="menu-item-1030" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1030"><a href="https://askbootstrap.com/terms-and-conditions/">Terms &#038; Conditions</a></li>
  <li id="menu-item-1188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1188"><a href="https://askbootstrap.com/privacy-policy/">Privacy Policy</a></li>
  <li id="menu-item-1189" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1189"><a href="https://askbootstrap.com/disclaimer/">Disclaimer</a></li>
  <li id="menu-item-1219" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1219"><a href="https://askbootstrap.com/sitemap.xml">Sitemap</a></li>
  <li id="menu-item-1184" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1184"><a href="https://askbootstrap.com/contact-us/">Contact Us</a></li>
  </ul></div><ul class="social-icons"><li class="social-icons-item"><a class="social-link  facebook-social-icon" title="Facebook" rel="nofollow" target="_blank" href="https://www.facebook.com/askbootstrap"><span class="fa fa-facebook"></span></a></li><li class="social-icons-item"><a class="social-link  twitter-social-icon" title="Twitter" rel="nofollow" target="_blank" href="https://twitter.com/askbootstrap"><span class="fa fa-twitter"></span></a></li><li class="social-icons-item"><a class="social-link  instagram-social-icon" title="Instagram" rel="nofollow" target="_blank" href="https://www.instagram.com/askbootstrap/"><span class="fa fa-instagram"></span></a></li></ul> 
  
  					</div><!-- .tie-col /-->
  				</div><!-- .tie-row /-->
  			</div><!-- .container /-->
  		</div><!-- #site-info /-->
  		
  </footer><!-- #footer /-->
  
  
  		<div class="post-footer post-footer-on-mobile">
  			<div class="post-footer-inner">
  				<div class="share-links  icons-only">
  
  					<a href="http://www.facebook.com/sharer.php?u=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="facebook-share-btn"><span class="fa fa-facebook"></span> <span class="screen-reader-text">Facebook</span></a><a href="https://twitter.com/intent/tweet?text=Web+development+on+Chrome+OS&#038;url=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="twitter-share-btn"><span class="fa fa-twitter"></span> <span class="screen-reader-text">Twitter</span></a><a href="http://reddit.com/submit?url=https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/&#038;title=Web+development+on+Chrome+OS" rel="external" target="_blank" class="reddit-share-btn"><span class="fa fa-reddit"></span> <span class="screen-reader-text">Reddit</span></a><a href="whatsapp://send?text=Web+development+on+Chrome+OS - https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="whatsapp-share-btn"><span class="fa fa-whatsapp"></span> <span class="screen-reader-text">WhatsApp</span></a><a href="tg://msg?text=Web+development+on+Chrome+OS - https://askbootstrap.com/web-tips-and-tricks/web-development-on-chrome-os/" rel="external" target="_blank" class="telegram-share-btn"><span class="fa fa-paper-plane"></span> <span class="screen-reader-text">Telegram</span></a>				</div><!-- .share-links /-->
  			</div><!-- .post-footer-inner /-->
  		</div><!-- .post-footer-on-top /-->
  
  		<div class="mobile-share-buttons-spacer"></div>
  <a id="go-to-top" class="go-to-top-button" href="#go-to-tie-body"><span class="fa fa-angle-up"></span></a><div class="clear"></div>
  
  		</div><!-- #tie-wrapper /-->
  
  		
  
    <aside class="side-aside normal-side tie-aside-effect dark-skin " aria-label="Secondary Sidebar">
      <div data-height="100%" class="side-aside-wrapper has-custom-scroll">
  
        <a href="#" class="close-side-aside remove big-btn light-btn">
          <span class="screen-reader-text">Close</span>
        </a><!-- .close-side-aside /-->
  
        
        <div id="mobile-container">
  
          <div id="mobile-menu" class="hide-menu-icons"></div><!-- #mobile-menu /-->
  
          <div class="mobile-social-search">
                        <div id="mobile-social-icons" class="social-icons-widget solid-social-icons">
                <ul><li class="social-icons-item"><a class="social-link  facebook-social-icon" title="Facebook" rel="nofollow" target="_blank" href="https://www.facebook.com/askbootstrap"><span class="fa fa-facebook"></span></a></li><li class="social-icons-item"><a class="social-link  twitter-social-icon" title="Twitter" rel="nofollow" target="_blank" href="https://twitter.com/askbootstrap"><span class="fa fa-twitter"></span></a></li><li class="social-icons-item"><a class="social-link  instagram-social-icon" title="Instagram" rel="nofollow" target="_blank" href="https://www.instagram.com/askbootstrap/"><span class="fa fa-instagram"></span></a></li></ul> 
              </div><!-- #mobile-social-icons /-->
                          <div id="mobile-search">
                <form role="search" method="get" class="search-form" action="https://askbootstrap.com/">
  				<label>
  					<span class="screen-reader-text">Search for:</span>
  					<input type="search" class="search-field" placeholder="Search &hellip;" value="" name="s" />
  				</label>
  				<input type="submit" class="search-submit" value="Search" />
  			</form>            </div><!-- #mobile-search /-->
                      </div><!-- #mobile-social-search /-->
  
        </div><!-- #mobile-container /-->
  
  
        
          <div id="slide-sidebar-widgets">
            <div id="posts-list-widget-4" class="container-wrapper widget posts-list"><div class="widget-title the-global-title"><h4>Popular Posts<span class="widget-title-icon fa"></span></h4></div><div class="posts-list-big-first"><ul class="posts-list-items"><li class="widget-post-list tie_standard">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/how-to-build-a-simple-ionic-4-wordpress-client/" title="How to Build A Simple Ionic 4 WordPress Client" class="post-thumb"><h5 class="post-cat-wrap"><span class="post-cat tie-cat-197">Tutorial</span></h5>
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="390" height="220" src="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=390%2C220&amp;ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="Ionic 4 WordPress" srcset="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?w=750&amp;ssl=1 750w, https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=300%2C169&amp;ssl=1 300w, https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=390%2C220&amp;ssl=1 390w, https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=600%2C338&amp;ssl=1 600w, https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=64%2C36&amp;ssl=1 64w" sizes="(max-width: 390px) 100vw, 390px" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/how-to-build-a-simple-ionic-4-wordpress-client/" title="How to Build A Simple Ionic 4 WordPress Client">How to Build A Simple Ionic 4 WordPress Client</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list tie_video">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/" title="Remove Fence with 3 Simple Steps in Photoshop!" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="220" height="150" src="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?resize=220%2C150&amp;ssl=1" class="attachment-jannah-image-small size-jannah-image-small wp-post-image" alt="Remove Fence with 3 Simple Steps in Photoshop!" srcset="https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?resize=220%2C150&amp;ssl=1 220w, https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?zoom=2&amp;resize=220%2C150&amp;ssl=1 440w, https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?zoom=3&amp;resize=220%2C150&amp;ssl=1 660w" sizes="(max-width: 220px) 100vw, 220px" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/" title="Remove Fence with 3 Simple Steps in Photoshop!">Remove Fence with 3 Simple Steps in Photoshop!</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list tie_video">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/html-to-react-components/" title="Easiest Way To Convert HTML Pages Into React Components" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="220" height="150" src="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/03/1042110_ffc3_4.jpg?resize=220%2C150&amp;ssl=1" class="attachment-jannah-image-small size-jannah-image-small wp-post-image" alt="Converts HTML pages into React components" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/html-to-react-components/" title="Easiest Way To Convert HTML Pages Into React Components">Easiest Way To Convert HTML Pages Into React Components</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list tie_standard">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/top-8-youtube-channels-for-ui-ux-designers/" title="Top 8 Youtube channels for UI/UX designers" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="220" height="150" src="https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/03/Top-8-Youtube-channels-for-ui-ux-designers.png?resize=220%2C150&amp;ssl=1" class="attachment-jannah-image-small size-jannah-image-small wp-post-image" alt="Top 8 Youtube channels for UI/UX designers" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/top-8-youtube-channels-for-ui-ux-designers/" title="Top 8 Youtube channels for UI/UX designers">Top 8 Youtube channels for UI/UX designers</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  <li class="widget-post-list is-trending tie_standard">
  
  	
  		<div class="post-widget-thumbnail">
  
  			
  			<a href="https://askbootstrap.com/web-tips-and-tricks/top-6-ai-tools-for-designers/" title="Top 6 AI Tools for Designers" class="post-thumb">
  				<div class="post-thumb-overlay-wrap">
  					<div class="post-thumb-overlay">
  						<span class="icon"></span>
  					</div>
  				</div>
  			<img width="220" height="150" src="https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/02/Top-6-AI-Tools-for-Designers.png?resize=220%2C150&amp;ssl=1" class="attachment-jannah-image-small size-jannah-image-small wp-post-image" alt="Top 6 AI Tools for Designers" /></a>		</div><!-- post-alignleft /-->
  	
  	<div class="post-widget-body">
  		<h3 class="post-title"><a href="https://askbootstrap.com/web-tips-and-tricks/top-6-ai-tools-for-designers/" title="Top 6 AI Tools for Designers">Top 6 AI Tools for Designers</a></h3>
  
  		<div class="post-meta">
  					</div>
  
  	</div>
  
  </li>
  </ul></div><div class="clearfix"></div></div><!-- .widget /--><div id="posts-list-widget-5" class="container-wrapper widget posts-list"><div class="widget-title the-global-title"><h4>Most Commented<span class="widget-title-icon fa"></span></h4></div><div class="timeline-widget"><ul class="posts-list-items">					<li>
  						<a href="https://askbootstrap.com/web-tips-and-tricks/scaling-images-with-jquery-resize-image-on-hover/">
  														<h3>Scaling Images With Jquery (Resize Image on Hover)</h3>
  						</a>
  					</li>
  										<li>
  						<a href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/">
  														<h3>Remove Fence with 3 Simple Steps in Photoshop!</h3>
  						</a>
  					</li>
  										<li>
  						<a href="https://askbootstrap.com/web-tips-and-tricks/top-10-javascript-optimisation-tips-to-sharpen-your-professional-skill/">
  														<h3>Top 10 JavaScript optimisation tips to sharpen your professional skill</h3>
  						</a>
  					</li>
  										<li>
  						<a href="https://askbootstrap.com/web-tips-and-tricks/how-to-build-a-simple-ionic-4-wordpress-client/">
  														<h3>How to Build A Simple Ionic 4 WordPress Client</h3>
  						</a>
  					</li>
  										<li>
  						<a href="https://askbootstrap.com/web-tips-and-tricks/how-to-build-a-great-dashboard-that-everyone-loves/">
  														<h3>How to build a great dashboard that everyone loves?</h3>
  						</a>
  					</li>
  										<li>
  						<a href="https://askbootstrap.com/design/essential-photoshop-cc-2017-shortcut-keys-for-designers/">
  														<h3>Essential Photoshop CC 2017 shortcut keys for designers</h3>
  						</a>
  					</li>
  					</ul></div><div class="clearfix"></div></div><!-- .widget /--><div id="comments_avatar-widget-1" class="container-wrapper widget recent-comments-widget"><div class="widget-title the-global-title"><h4>Recent Comments<span class="widget-title-icon fa"></span></h4></div><ul>			<li>
  									<div class="post-widget-thumbnail" style="width:70px">
  						<a class="author-avatar" href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/#comment-325">
  							<img alt='' src='https://secure.gravatar.com/avatar/d2de757120b27af2d4bced6cc5164761?s=70&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/d2de757120b27af2d4bced6cc5164761?s=140&#038;d=mm&#038;r=g 2x' class='avatar avatar-70 photo' height='70' width='70' />						</a>
  					</div>
  					
  				<div class="comment-body">
  					<a class="comment-author" href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/#comment-325">
  						ssimmysimmy					</a>
  					<p>Useful one...</p>
  				</div>
  
  			</li>
  						<li>
  									<div class="post-widget-thumbnail" style="width:70px">
  						<a class="author-avatar" href="https://askbootstrap.com/web-tips-and-tricks/scaling-images-with-jquery-resize-image-on-hover/#comment-214">
  							<img alt='' src='https://secure.gravatar.com/avatar/b7d697881d95f896c7670970d64f3a2f?s=70&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/b7d697881d95f896c7670970d64f3a2f?s=140&#038;d=mm&#038;r=g 2x' class='avatar avatar-70 photo' height='70' width='70' />						</a>
  					</div>
  					
  				<div class="comment-body">
  					<a class="comment-author" href="https://askbootstrap.com/web-tips-and-tricks/scaling-images-with-jquery-resize-image-on-hover/#comment-214">
  						Hossi					</a>
  					<p>Jquery : function mOver(Jeese) { $(Jeese).mouseover(function...</p>
  				</div>
  
  			</li>
  						<li>
  									<div class="post-widget-thumbnail" style="width:70px">
  						<a class="author-avatar" href="https://askbootstrap.com/web-tips-and-tricks/scaling-images-with-jquery-resize-image-on-hover/#comment-154">
  							<img alt='' src='https://secure.gravatar.com/avatar/a0882bfdc9d4ef2d6ad3ab0bba36c788?s=70&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/a0882bfdc9d4ef2d6ad3ab0bba36c788?s=140&#038;d=mm&#038;r=g 2x' class='avatar avatar-70 photo' height='70' width='70' />						</a>
  					</div>
  					
  				<div class="comment-body">
  					<a class="comment-author" href="https://askbootstrap.com/web-tips-and-tricks/scaling-images-with-jquery-resize-image-on-hover/#comment-154">
  						BUDDHADEB DAS					</a>
  					<p>Recently I saw your grocery theme its awesome .....</p>
  				</div>
  
  			</li>
  						<li>
  									<div class="post-widget-thumbnail" style="width:70px">
  						<a class="author-avatar" href="https://askbootstrap.com/web-tips-and-tricks/scaling-images-with-jquery-resize-image-on-hover/#comment-146">
  							<img alt='' src='https://secure.gravatar.com/avatar/58828c519fc48652487f4240d955cd82?s=70&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/58828c519fc48652487f4240d955cd82?s=140&#038;d=mm&#038;r=g 2x' class='avatar avatar-70 photo' height='70' width='70' />						</a>
  					</div>
  					
  				<div class="comment-body">
  					<a class="comment-author" href="https://askbootstrap.com/web-tips-and-tricks/scaling-images-with-jquery-resize-image-on-hover/#comment-146">
  						Living Phat3					</a>
  					<p>Thank you, this worked, but what would I do if i have multip...</p>
  				</div>
  
  			</li>
  			</ul><div class="clearfix"></div></div><!-- .widget /--><div id="tie-slider-widget-3" class="container-wrapper widget tie-slider-widget"><div class="widget-title the-global-title"><h4>Featured Posts<span class="widget-title-icon fa"></span></h4></div>
  			<div class="main-slider boxed-slider boxed-five-slides-slider slider-in-widget">
  
  				<div class="loader-overlay"><div class="spinner-circle"></div></div>
  				<div class="main-slider-wrapper">
  					<ul class="tie-slider-nav"></ul>
  					<div class="container">
  						<div class="tie-slick-slider">
  
  						                      <div style="background-image: url(https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/07/1515202_cda2_2.jpg?resize=750%2C405&amp;ssl=1)" class="slide">
                        											<a href="https://askbootstrap.com/web-tips-and-tricks/how-to-build-a-simple-ionic-4-wordpress-client/" title="How to Build A Simple Ionic 4 WordPress Client" class="all-over-thumb-link"></a>
  											<div class="thumb-overlay">
  												<div class="thumb-content">
  													<div class="thumb-meta"><div class="post-meta"><div class="clearfix"></div></div><!-- .post-meta --></div>													<h3 class="thumb-title"><a href="https://askbootstrap.com/web-tips-and-tricks/how-to-build-a-simple-ionic-4-wordpress-client/" title="How to Build A Simple Ionic 4 WordPress Client">How to Build A Simple Ionic 4 WordPress Client</a></h3>
  												</div><!-- .thumb-content -->
  											</div><!-- .thumb-overlay -->
  										</div><!-- .slide /-->
  										                      <div style="background-image: url(https://i1.wp.com/askbootstrap.com/wp-content/uploads/2020/05/ps.jpg?resize=780%2C405&amp;ssl=1)" class="slide">
                        											<a href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/" title="Remove Fence with 3 Simple Steps in Photoshop!" class="all-over-thumb-link"></a>
  											<div class="thumb-overlay">
  												<div class="thumb-content">
  													<div class="thumb-meta"><div class="post-meta"><div class="clearfix"></div></div><!-- .post-meta --></div>													<h3 class="thumb-title"><a href="https://askbootstrap.com/design/remove-fence-with-3-simple-steps-in-photoshop/" title="Remove Fence with 3 Simple Steps in Photoshop!">Remove Fence with 3 Simple Steps in Photoshop!</a></h3>
  												</div><!-- .thumb-content -->
  											</div><!-- .thumb-overlay -->
  										</div><!-- .slide /-->
  										                      <div style="background-image: url(https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/03/1042110_ffc3_4.jpg?resize=750%2C405&amp;ssl=1)" class="slide">
                        											<a href="https://askbootstrap.com/web-tips-and-tricks/html-to-react-components/" title="Easiest Way To Convert HTML Pages Into React Components" class="all-over-thumb-link"></a>
  											<div class="thumb-overlay">
  												<div class="thumb-content">
  													<div class="thumb-meta"><div class="post-meta"><div class="clearfix"></div></div><!-- .post-meta --></div>													<h3 class="thumb-title"><a href="https://askbootstrap.com/web-tips-and-tricks/html-to-react-components/" title="Easiest Way To Convert HTML Pages Into React Components">Easiest Way To Convert HTML Pages Into React Components</a></h3>
  												</div><!-- .thumb-content -->
  											</div><!-- .thumb-overlay -->
  										</div><!-- .slide /-->
  										                      <div style="background-image: url(https://i2.wp.com/askbootstrap.com/wp-content/uploads/2020/03/Top-8-Youtube-channels-for-ui-ux-designers.png?resize=780%2C405&amp;ssl=1)" class="slide">
                        											<a href="https://askbootstrap.com/web-tips-and-tricks/top-8-youtube-channels-for-ui-ux-designers/" title="Top 8 Youtube channels for UI/UX designers" class="all-over-thumb-link"></a>
  											<div class="thumb-overlay">
  												<div class="thumb-content">
  													<div class="thumb-meta"><div class="post-meta"><div class="clearfix"></div></div><!-- .post-meta --></div>													<h3 class="thumb-title"><a href="https://askbootstrap.com/web-tips-and-tricks/top-8-youtube-channels-for-ui-ux-designers/" title="Top 8 Youtube channels for UI/UX designers">Top 8 Youtube channels for UI/UX designers</a></h3>
  												</div><!-- .thumb-content -->
  											</div><!-- .thumb-overlay -->
  										</div><!-- .slide /-->
  										                      <div style="background-image: url(https://i0.wp.com/askbootstrap.com/wp-content/uploads/2020/02/Top-6-AI-Tools-for-Designers.png?resize=780%2C405&amp;ssl=1)" class="slide">
                        											<a href="https://askbootstrap.com/web-tips-and-tricks/top-6-ai-tools-for-designers/" title="Top 6 AI Tools for Designers" class="all-over-thumb-link"></a>
  											<div class="thumb-overlay">
  												<div class="thumb-content">
  													<div class="thumb-meta"><div class="post-meta"><div class="clearfix"></div></div><!-- .post-meta --></div>													<h3 class="thumb-title"><a href="https://askbootstrap.com/web-tips-and-tricks/top-6-ai-tools-for-designers/" title="Top 6 AI Tools for Designers">Top 6 AI Tools for Designers</a></h3>
  												</div><!-- .thumb-content -->
  											</div><!-- .thumb-overlay -->
  										</div><!-- .slide /-->
  																</div><!-- .tie-slick-slider /-->
  					</div><!-- .container /-->
  				</div><!-- .main-slider-wrapper /-->
  			</div><!-- #main-slider /-->
  		<div class="clearfix"></div></div><!-- .widget /-->        </div>
        
      </div><!-- .side-aside-wrapper /-->
    </aside><!-- .side-aside /-->
  
  
  	</div><!-- #tie-container /-->
  </div><!-- .background-overlay /-->
  
  	<div style="display:none">
  	<div class="grofile-hash-map-592c98136dfcb2a79b10d2c1daf80365">
  	</div>
  	<div class="grofile-hash-map-d2de757120b27af2d4bced6cc5164761">
  	</div>
  	<div class="grofile-hash-map-b7d697881d95f896c7670970d64f3a2f">
  	</div>
  	<div class="grofile-hash-map-a0882bfdc9d4ef2d6ad3ab0bba36c788">
  	</div>
  	<div class="grofile-hash-map-58828c519fc48652487f4240d955cd82">
  	</div>
  	</div>
  <div id="reading-position-indicator"></div><div id="fb-root"></div>			<div id="tie-popup-login" class="tie-popup">
  				<a href="#" class="tie-btn-close remove big-btn light-btn">
  					<span class="screen-reader-text">Close</span>
  				</a>
  				<div class="tie-popup-container">
  					<div class="container-wrapper">
  						<div class="widget login-widget">
  
  														<div class="widget-title the-global-title"><h4>Log In <span class="widget-title-icon fa "></span></h4></div>
  							<div class="widget-container">
  								
  			<div class="login-form">
  
  				<form name="registerform" action="https://askbootstrap.com/wp-login.php" method="post">
  					<input type="text" name="log" title="Username" placeholder="Username">
  					<div class="pass-container">
  						<input type="password" name="pwd" title="Password" placeholder="Password">
  						<a class="forget-text" href="https://askbootstrap.com/my-account/lost-password/">Forget?</a>
  					</div>
  
  					<input type="hidden" name="redirect_to" value="/web-tips-and-tricks/web-development-on-chrome-os/"/>
  					<label for="rememberme" class="rememberme">
  						<input id="rememberme" name="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me					</label>
  
  					
  					
  					<button id="login-submit" type="submit" class="button fullwidth">Log In</button>
  				</form>
  
  				
  			</div>
  										</div><!-- .widget-container  /-->
  						</div><!-- .login-widget  /-->
  					</div><!-- .container-wrapper  /-->
  				</div><!-- .tie-popup-container /-->
  			</div><!-- .tie-popup /-->
  						<div id="tie-popup-adblock" class="tie-popup is-fixed-popup">
  				<div class="tie-popup-container">
  					<div class="container-wrapper">
  					<span class="fa fa-ban" aria-hidden="true"></span>
  					<h2>Adblock Detected</h2>
  					<div class="adblock-message">Please consider supporting us by disabling your ad blocker</div>
  					</div><!-- .container-wrapper  /-->
  				</div><!-- .tie-popup-container /-->
  			</div><!-- .tie-popup /-->
  			<script type='text/javascript' src='https://askbootstrap.com/wp-content/themes/jannah/js/advertisement.js'></script>
  				<script type="text/javascript">
  		var c = document.body.className;
  		c = c.replace(/woocommerce-no-js/, 'woocommerce-js');
  		document.body.className = c;
  	</script>
  	
  	<script type="text/javascript">
  		window.WPCOM_sharing_counts = {"https:\/\/askbootstrap.com\/web-tips-and-tricks\/web-development-on-chrome-os\/":1610};
  	</script>
  						<script type='text/javascript' src='https://askbootstrap.com/wp-content/plugins/jetpack/_inc/build/photon/photon.min.js'></script>
  <script type='text/javascript' src='https://askbootstrap.com/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js'></script>
  <script type='text/javascript'>
  /* <![CDATA[ */
  var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","i18n_view_cart":"View cart","cart_url":"https:\/\/askbootstrap.com\/cart\/","is_cart":"","cart_redirect_after_add":"no"};
  /* ]]> */
  </script>
  <script type='text/javascript' src='https://askbootstrap.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js'></script>
  <script type='text/javascript' src='https://askbootstrap.com/wp-content/plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js'></script>
  <script type='text/javascript'>
  /* <![CDATA[ */
  var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%"};
  /* ]]> */
  </script>
  <script type='text/javascript' src='https://askbootstrap.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js'></script>
  <script type='text/javascript'>
  /* <![CDATA[ */
  var wc_cart_fragments_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","cart_hash_key":"wc_cart_hash_9a1416ba5254d0189746c0b65f37a4b2","fragment_name":"wc_fragments_9a1416ba5254d0189746c0b65f37a4b2","request_timeout":"5000"};
  /* ]]> */
  </script>
  <script type='text/javascript' src='https://askbootstrap.com/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js'></script>
  <script type='text/javascript'>
  		jQuery( 'body' ).bind( 'wc_fragments_refreshed', function() {
  			var jetpackLazyImagesLoadEvent;
  			try {
  				jetpackLazyImagesLoadEvent = new Event( 'jetpack-lazy-images-load', {
  					bubbles: true,
  					cancelable: true
  				} );
  			} catch ( e ) {
  				jetpackLazyImagesLoadEvent = document.createEvent( 'Event' )
  				jetpackLazyImagesLoadEvent.initEvent( 'jetpack-lazy-images-load', true, true );
  			}
  			jQuery( 'body' ).get( 0 ).dispatchEvent( jetpackLazyImagesLoadEvent );
  		} );
  	
  </script>
  <script type='text/javascript' src='https://secure.gravatar.com/js/gprofiles.js'></script>
  <script type='text/javascript'>
  /* <![CDATA[ */
  var WPGroHo = {"my_hash":""};
  /* ]]> */
  </script>
  <script type='text/javascript' src='https://askbootstrap.com/wp-content/plugins/jetpack/modules/wpgroho.js'></script>
  <script type='text/javascript' src='https://askbootstrap.com/wp-content/themes/jannah/js/scripts.min.js'></script>
  <script type='text/javascript'>
  					jQuery.ajax({
  						type : "GET",
  						url  : "https://askbootstrap.com/wp-admin/admin-ajax.php",
  						data : "postviews_id=1610&action=tie_postviews",
  						cache: !1
  					});
  				
  </script>
  <script type='text/javascript' src='https://askbootstrap.com/wp-includes/js/comment-reply.min.js'></script>
  <script type='text/javascript' src='https://askbootstrap.com/wp-includes/js/imagesloaded.min.js'></script>
  <script type='text/javascript' src='https://askbootstrap.com/wp-includes/js/wp-embed.min.js'></script>
  <script type='text/javascript' src='https://askbootstrap.com/wp-content/themes/jannah/js/sliders.min.js'></script>
  <script async="async" type='text/javascript' src='https://askbootstrap.com/wp-content/plugins/akismet/_inc/form.js'></script>
  <script type='text/javascript'>
  /* <![CDATA[ */
  var sharing_js_options = {"lang":"en","counts":"1","is_stats_active":"1"};
  /* ]]> */
  </script>
  <script type='text/javascript' src='https://askbootstrap.com/wp-content/plugins/jetpack/_inc/build/sharedaddy/sharing.min.js'></script>
  <script type='text/javascript'>
  var windowOpen;
  			jQuery( document.body ).on( 'click', 'a.share-facebook', function() {
  				// If there's another sharing window open, close it.
  				if ( 'undefined' !== typeof windowOpen ) {
  					windowOpen.close();
  				}
  				windowOpen = window.open( jQuery( this ).attr( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' );
  				return false;
  			});
  var windowOpen;
  			jQuery( document.body ).on( 'click', 'a.share-twitter', function() {
  				// If there's another sharing window open, close it.
  				if ( 'undefined' !== typeof windowOpen ) {
  					windowOpen.close();
  				}
  				windowOpen = window.open( jQuery( this ).attr( 'href' ), 'wpcomtwitter', 'menubar=1,resizable=1,width=600,height=350' );
  				return false;
  			});
  var windowOpen;
  			jQuery( document.body ).on( 'click', 'a.share-telegram', function() {
  				// If there's another sharing window open, close it.
  				if ( 'undefined' !== typeof windowOpen ) {
  					windowOpen.close();
  				}
  				windowOpen = window.open( jQuery( this ).attr( 'href' ), 'wpcomtelegram', 'menubar=1,resizable=1,width=450,height=450' );
  				return false;
  			});
  var windowOpen;
  			jQuery( document.body ).on( 'click', 'a.share-tumblr', function() {
  				// If there's another sharing window open, close it.
  				if ( 'undefined' !== typeof windowOpen ) {
  					windowOpen.close();
  				}
  				windowOpen = window.open( jQuery( this ).attr( 'href' ), 'wpcomtumblr', 'menubar=1,resizable=1,width=450,height=450' );
  				return false;
  			});
  var windowOpen;
  			jQuery( document.body ).on( 'click', 'a.share-linkedin', function() {
  				// If there's another sharing window open, close it.
  				if ( 'undefined' !== typeof windowOpen ) {
  					windowOpen.close();
  				}
  				windowOpen = window.open( jQuery( this ).attr( 'href' ), 'wpcomlinkedin', 'menubar=1,resizable=1,width=580,height=450' );
  				return false;
  			});
  var windowOpen;
  			jQuery( document.body ).on( 'click', 'a.share-pocket', function() {
  				// If there's another sharing window open, close it.
  				if ( 'undefined' !== typeof windowOpen ) {
  					windowOpen.close();
  				}
  				windowOpen = window.open( jQuery( this ).attr( 'href' ), 'wpcompocket', 'menubar=1,resizable=1,width=450,height=450' );
  				return false;
  			});
  </script>
  
  		<!--[if IE]>
  		<script type="text/javascript">
  			if ( 0 === window.location.hash.indexOf( '#comment-' ) ) {
  				// window.location.reload() doesn't respect the Hash in IE
  				window.location.hash = window.location.hash;
  			}
  		</script>
  		<![endif]-->
  		<script type="text/javascript">
  			(function () {
  				var comm_par_el = document.getElementById( 'comment_parent' ),
  					comm_par = ( comm_par_el && comm_par_el.value ) ? comm_par_el.value : '',
  					frame = document.getElementById( 'jetpack_remote_comment' ),
  					tellFrameNewParent;
  
  				tellFrameNewParent = function () {
  					if ( comm_par ) {
  						frame.src = "https://jetpack.wordpress.com/jetpack-comment/?blogid=143731127&postid=1610&comment_registration=0&require_name_email=1&stc_enabled=1&stb_enabled=1&show_avatars=1&avatar_default=mystery&greeting=Leave+a+Reply&greeting_reply=Leave+a+Reply+to+%25s&color_scheme=light&lang=en_US&jetpack_version=8.4.2&show_cookie_consent=10&has_cookie_consent=0&token_key=%3Bnormal%3B&sig=6470325c79fe0282ad4076c1b9c710388a49d755#parent=https%3A%2F%2Faskbootstrap.com%2Fweb-tips-and-tricks%2Fweb-development-on-chrome-os%2F" + '&replytocom=' + parseInt( comm_par, 10 ).toString();
  					} else {
  						frame.src = "https://jetpack.wordpress.com/jetpack-comment/?blogid=143731127&postid=1610&comment_registration=0&require_name_email=1&stc_enabled=1&stb_enabled=1&show_avatars=1&avatar_default=mystery&greeting=Leave+a+Reply&greeting_reply=Leave+a+Reply+to+%25s&color_scheme=light&lang=en_US&jetpack_version=8.4.2&show_cookie_consent=10&has_cookie_consent=0&token_key=%3Bnormal%3B&sig=6470325c79fe0282ad4076c1b9c710388a49d755#parent=https%3A%2F%2Faskbootstrap.com%2Fweb-tips-and-tricks%2Fweb-development-on-chrome-os%2F";
  					}
  				};
  
  				
  				if ( 'undefined' !== typeof addComment ) {
  					addComment._Jetpack_moveForm = addComment.moveForm;
  
  					addComment.moveForm = function ( commId, parentId, respondId, postId ) {
  						var returnValue = addComment._Jetpack_moveForm( commId, parentId, respondId, postId ),
  							cancelClick, cancel;
  
  						if ( false === returnValue ) {
  							cancel = document.getElementById( 'cancel-comment-reply-link' );
  							cancelClick = cancel.onclick;
  							cancel.onclick = function () {
  								var cancelReturn = cancelClick.call( this );
  								if ( false !== cancelReturn ) {
  									return cancelReturn;
  								}
  
  								if ( ! comm_par ) {
  									return cancelReturn;
  								}
  
  								comm_par = 0;
  
  								tellFrameNewParent();
  
  								return cancelReturn;
  							};
  						}
  
  						if ( comm_par == parentId ) {
  							return returnValue;
  						}
  
  						comm_par = parentId;
  
  						tellFrameNewParent();
  
  						return returnValue;
  					};
  				}
  
  				
  				// Do the post message bit after the dom has loaded.
  				document.addEventListener( 'DOMContentLoaded', function () {
  					var iframe_url = "https:\/\/jetpack.wordpress.com";
  					if ( window.postMessage ) {
  						if ( document.addEventListener ) {
  							window.addEventListener( 'message', function ( event ) {
  								var origin = event.origin.replace( /^http:\/\//i, 'https://' );
  								if ( iframe_url.replace( /^http:\/\//i, 'https://' ) !== origin ) {
  									return;
  								}
  								jQuery( frame ).height( event.data );
  							});
  						} else if ( document.attachEvent ) {
  							window.attachEvent( 'message', function ( event ) {
  								var origin = event.origin.replace( /^http:\/\//i, 'https://' );
  								if ( iframe_url.replace( /^http:\/\//i, 'https://' ) !== origin ) {
  									return;
  								}
  								jQuery( frame ).height( event.data );
  							});
  						}
  					}
  				})
  
  			})();
  		</script>
  
  		<script type='text/javascript' src='https://stats.wp.com/e-202031.js' async='async' defer='defer'></script>
  <script type='text/javascript'>
  	_stq = window._stq || [];
  	_stq.push([ 'view', {v:'ext',j:'1:8.4.2',blog:'143731127',post:'1610',tz:'1',srv:'askbootstrap.com'} ]);
  	_stq.push([ 'clickTrackerInit', '143731127', '1610' ]);
  </script>
  </body>
  </html>
  
  <!-- Dynamic page generated in 0.285 seconds. -->
  <!-- Cached page generated by WP-Super-Cache on 2020-07-31 12:57:08 -->
  
  <!-- super cache -->