Teresa  Jerde

Teresa Jerde


How to build a PWA from scratch with HTML, CSS and JavaScript ?

Progressive web apps are a way to bring native app feeling into normal or traditional web apps. Indeed, with PWAs we can now enhance our website with mobile app features which increase a lot the usability and offer great user experience to our end-users.

In this article, we are going to build a PWA from scratch with HTML, CSS, and JavaScript. So, let’s get started by an important question: What the heck is PWA?

Sorry for the interrupt!

If you’re interested in learning JavaScript in a comprehensive way, I highly recommend this course: JavaScript - The Complete Guide 2020 (Beginner + Advanced)

It’s an affiliate link, so by purchasing, you support the blog at the same time.

What is Progressive Web App (PWA)?

A Progressive Web App is a web app that delivers an app-like experience to users by using modern web capabilities. In the end, it’s just your regular website that runs in a browser with some enhancements like the ability:

  • To install it on a mobile home screen
  • To access it when offline
  • To access the camera
  • Get push notifications
  • To do background synchronization

And so much more.

However, to be able to transform our traditional web app to a PWA, we have to adjust it a little bit, by adding a web app manifest file and a service worker.

Don’t worry about these new terms, we’ll cover them later.

But First, we have to build our web app or traditional web app if you want too. So, Let’s start with the markup.

#html #css #javascript

What is GEEK

Buddha Community

How to build a PWA from scratch with HTML, CSS and JavaScript ?
Lyda  White

Lyda White


How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

code savvy

code savvy


Product landing page using HTML CSS & JavaScript | web design


This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

📁 Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript 

Brooke  Giles

Brooke Giles


Scratch Card with HTML, CSS and JavaScript

This tutorial shows how to create a scratch card with HTML, CSS and JavaScript. Basic knowledge of Canvas might come in handy for this project, but it isn’t necessary.

00:00 Intro
00:05 Project Preview
00:53 HTML & CSS
06:07 Step 1: Create Initial References
06:36 Step 2: Implement The init()
08:32 Step 3: Detect If The Device Is A Touch Device
12:16 Step 4: Get Position Of Mouse/Touch
14:40 Step 5: Add Event Listeners To Canvas
15:41 Step 6: Function To Draw Scratch


We start with the HTML code. The HTML code creates elements necessary to build the structure of our scratch card. First, copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scratch Card</title>
    <!-- Google Fonts -->
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
    <div class="container">
      <div class="base">
        <h4>You Won</h4>
      <canvas id="scratch" width="200" height="200"></canvas>
    <!-- Script -->
    <script src="script.js"></script>


With CSS, we style the scratch card according to our desired theme. For this copy, the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
body {
  height: 100vh;
  background: linear-gradient(135deg, #c3a3f1, #6414e9);
.container {
  width: 31em;
  height: 31em;
  background-color: #f5f5f5;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 0.6em;
#scratch {
  height: 200px;
  width: 200px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  text-align: center;
  cursor: grabbing;
  border-radius: 0.3em;
.base {
  background-color: #ffffff;
  font-family: "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1.2em 2.5em rgba(16, 2, 96, 0.15);
.base h3 {
  font-weight: 600;
  font-size: 1.5em;
  color: #17013b;
.base h4 {
  font-weight: 400;
  color: #746e7e;
#scratch {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;


Finally, we implement the logic of this code. To do that, copy the code below and paste it into your script file.

let canvas = document.getElementById("scratch");
let context = canvas.getContext("2d");

const init = () => {
  let gradientColor = context.createLinearGradient(0, 0, 135, 135);
  gradientColor.addColorStop(0, "#c3a3f1");
  gradientColor.addColorStop(1, "#6414e9");
  context.fillStyle = gradientColor;
  context.fillRect(0, 0, 200, 200);

//initially mouse X and mouse Y positions are 0
let mouseX = 0;
let mouseY = 0;
let isDragged = false;

//Events for touch and mouse
let events = {
  mouse: {
    down: "mousedown",
    move: "mousemove",
    up: "mouseup",
  touch: {
    down: "touchstart",
    move: "touchmove",
    up: "touchend",

let deviceType = "";

//Detech touch device
const isTouchDevice = () => {
  try {
    //We try to create TouchEvent. It would fail for desktops and throw error.
    deviceType = "touch";
    return true;
  } catch (e) {
    deviceType = "mouse";
    return false;

//Get left and top of canvas
let rectLeft = canvas.getBoundingClientRect().left;
let rectTop = canvas.getBoundingClientRect().top;

//Exact x and y position of mouse/touch
const getXY = (e) => {
  mouseX = (!isTouchDevice() ? e.pageX : e.touches[0].pageX) - rectLeft;
  mouseY = (!isTouchDevice() ? e.pageY : e.touches[0].pageY) - rectTop;

//Start Scratch
canvas.addEventListener(events[deviceType].down, (event) => {
  isDragged = true;
  //Get x and y position
  scratch(mouseX, mouseY);

canvas.addEventListener(events[deviceType].move, (event) => {
  if (!isTouchDevice()) {
  if (isDragged) {
    scratch(mouseX, mouseY);

//stop drawing
canvas.addEventListener(events[deviceType].up, () => {
  isDragged = false;

//If mouse leaves the square
canvas.addEventListener("mouseleave", () => {
  isDragged = false;

const scratch = (x, y) => {
  //destination-out draws new shapes behind the existing canvas content
  context.globalCompositeOperation = "destination-out";
  //arc makes circle - x,y,radius,start angle,end angle
  context.arc(x, y, 12, 0, 2 * Math.PI);

window.onload = init();

📁 Download Source Code : 

#html #css #js #javascript  

Nikunj Shah

Nikunj Shah


Build a PWA using HTML, CSS, and JavaScript

Looking at the web for a basic PWA online training exercise, everything I found was just too confused or required libraries/system/stage or another.

If we need to learn another innovation, we would preferably not get derailed with redundant subtleties …

We have indeed composed a basic introductory exercise to draw from different sources, which would not require external sources. Personally, I would prefer not to be distracted with irrelevant details when I learn a new technology.

In case you’re not familiar with Progressive Web Apps the essential thought is to utilize browser technologies to build a web application that works offline and has the look and feel of a native application. In this exercise, we’ll tell you the best way to to make the most straightforward application conceivable, that works without an internet connection, and can be added to your home screen.

You should know HTML, CSS, and JavaScript to get the most out of this tutorial. If you can code a web page and add some interactivity using plain-vanilla JavaScript, you should be able to follow. You’ll need a text editor, the latest Chrome version and a local web server to build this app.

In this tutorial, we used Adobe’s NetBeans, because it has a web server built, but you can use any text editor you’re comfortable with.

Step 1: The Setup

First of all, you have to create a directory for the app and add js, css, and_ images_ subdirectories. It should look like this when you’re finished:

/Hello-PWA   # Project Folder
/css     # Stylesheets
/js      # Javascript
/images  # Image files.

Open your project folder in Brackets to get started.

When writing the markup for a Progressive Web App there are 2 requirements to keep in mind:

1. Even if JavaScript is disabled, the app should keep showing some content. This prevents users from viewing a blank page if their internet connection is poor or if an older browser is used.

2. It should be responsive to a variety of devices and display properly. In other words, it must be mobile-friendly.

We will address the first requirement for our basic app by simply hard-coding the content and the second by adding a meta tag for the viewport. To do this, create an index.html file in the root folder of your project and add the following markup:

<!doctype html>
<html lang="en"> 
<meta charset="utf-8">
<title>Hello World</title> 
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body class="fullscreen">
<div class="container">   
<h1 class="title">Hello World!</h1> 

Second step: create a file named _style.css _in the css folder, such as:

body {font-family: sans-serif;} 
html, .fullscreen {display: flex;height: 100%; margin: 0;padding: 0;width: 100%; }  
.container {margin: auto;text-align: center;} 
.title {font-size: 3rem;}

The app can now be tested by clicking on the text editor preview button. This will open a browser window and serve up your page.

Step 2: Testing

Now that we have our “Hello world” the browser, we’re going to use Google’s Lighthouse to test the app and see how well it meets PWA standards. Press F12 to open the Chrome developer panel and click on the Lighthouse audit tab

Make sure you check the option "Progressive Web App. " For now, you can uncheck the others. Then click on the button "run tests. " Lighthouse should give you a score and a list of audits that the app has passed or failed after a minute or two. At this point, the app should score about 45. If everything has been properly coded, you will notice that most of the tests carried out are related to the requirements we outlined at the beginning:

1. If JavaScript is not available, our basic app contains some content.

2. Has a wide or initial scale tag.

3. The content of the viewport is correctly sized.

Step 3: Add a Service Worker

Our app’s next requirement is to register a service worker. Service workers are basically scripts that perform tasks that do not require user interaction in the background. This launches your users ’ main app while the service worker takes care of mundane things.

A service worker is an event-driven worker registered against an origin and a path. It takes the form of a JavaScript file that can control the web-page/site that it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situations (the most obvious one being when the network is not available). A service worker is run in a worker context: it therefore has no DOM access, and runs on a different thread to the main JavaScript that powers your app, so it is not blocking. It is designed to be fully async; as a consequence, APIs such as synchronous XHR and localStorage can’t be used inside a service worker. Service workers only run over HTTPS, for security reasons. Having modified network requests, wide open to man in the middle attacks would be really bad. In Firefox, Service Worker APIs are also hidden and cannot be used when the user is in private browsing mode.

For our app, we’ll use one to download and cache our content and then serve it back up from the cache when the user is offline.

Now, create a file named sw.js in the root folder and attempt to enter the contents of the following script. The reason it is stored in the root of the app is to give it access to all files of the app. This is because service workers only have access to files in the same directory and subdirectories.

var cacheName = 'hello-pwa'; 
var filesToCache = [
'/js/main.js'  ];  
self.addEventListener('install', function(e) { 
caches.open(cacheName).then(function(cache) { 
return cache.addAll(filesToCache);   
/* Serve cached content when offline */ 
self.addEventListener('fetch', function(e) {  
e.respondWith(      caches.match(e.request).then(function(response) {  
return response || fetch(e.request);

The script’s first lines declare two variables: cacheName and files ToCache.

CacheName is used to create access of an offline cache from Javascript in the browser. FilesToCache is an array that contains a list of all cached files. These files should be written as URLs. Note that the first is just "/, "the base URL.

This means that the browser caches index.html even if the user does not type the file name directly.

Next, we add a function to install the service worker and use cacheName to create the browser cache. Once the cache has been created, all the files listed in the ToCache array will be added. Please keep in mind that while this code is used for demonstration purposes, it is not intended for production, as it will stop if even one of the files is not loaded.)

Finally, we add a function to load in the cached files when the browser is offline.

Finally, when the browser is offline, we add a function to load into the cached files.

We need to register the service worker with our app now.

In the js folder, create a file named main.js and enter the following code:

window.onload = () => {  
'use strict';     
if ('serviceWorker' in navigator) {     

This code simply loads up the service worker script and gets it started.

Now, add the code to your app by adding the script to index.html just before the tag < /body > closes.

<script src="js/main.js"></script>

index.html should look like this:

<!doctype html>  
<html lang="en">  
<meta charset="utf-8">  
<title>Hello World</title>  
<link rel="stylesheet" href="css/style.css">     
<meta name="viewport" content="width=device-width, initial-scale=1.0">   
<body class="fullscreen">    
<div class="container">     
<h1 class="title">Hello World!</h1>   
<script src="js/main.js"></script>   

If you now run the Lighthouse audits, your score should rise to 64 and the service worker requirement passes.

Step 4: Add a Manifest

The ultimate requirement for a PWA is a manifest file. The manifest is a json file that specifies how the app looks and acts on devices. For instance, the orientation and theme color of the app can be set.

In your root folder, save a file called manifest.json and add the following content:

"name": "Hello World",   
"short_name": "Hello", 
"lang": "en-US",     
"start_url": "/index.html", 
"display": "standalone",  
"background_color": "white",   
"theme_color": "black" 

We set the title, background and theme colors for our app and tell the browser that it should be treated as an independent app without the chrome browser.

The fields are line by line as follows:

The app’s title/name. This is used when the user is asked to install the app. It should be the app’s full title.

Is the name of the app as shown on the icon app. It should be short.

The default language the app is geo-localized (en-Us in our case)…

When the app is launched, tell the browser which page to load. It’s generally index.html.

The shell type should be shown in the app. We use our app to look and feel like a standard native app on our own. Other settings are available to complete the screen or include the chrome browser.

The color of the splash screen that opens when the app launches.

Sets the color of the toolbar and in the task switcher.

Now, add the manifest to your app:

<link rel="manifest" href="/manifest.json">

You should also declare the theme color to match the one set in your manifest by adding a meta tag inside the head:

<meta name="theme-color" content="black"/>

App Icons

You may have noticed that Lighthouse is complaining about missing app icons after the previous step. Although the app is not strictly required to work offline, it allows your users to add the app to their home screen.

Add the icons to your manifest file after the short_name property.

And now. add them to index.html.

Step 5: Finish!

The coding is finished at this point and the last thing to do is upload the application to a web server!

Hope you enjoyed this tutorial.

Progressive Web Apps: Great Experiences Everywhere:

Progressive Web App tutorial – learn to build a PWA from scratch:

Build a Simple PWA based on Basic JavaScript using Google’s Workbox:

#pwa #html #css #javascript #web-development

code savvy

code savvy


Web Design Speed Code | HTML, CSS, JavaScript (GSAP) | Portfolio Design

Portfolio Website Design with HTML, CSS & Javascript


Hello Everyone, In this video we'll create a Portfolio Page design using HTML, CSS & JavaScript (GSAP) 📁

🧠 Knowledge : 

Html, CSS (Flexbox), JavaScript DOM, Javascript Animations.

Anyway, you can learn everything mentioned. Follow the tutorial.

⏱ Outline


#css #javascript  #JavaScript  #HTML #html 

Click to Watch Full Tutorial