Introduction:
The Internet has been one the greatest tool that has been a torchbearer for social evolution, the change has been particularly felt in the field of IT. We are coming across new ways of developing application and there has been a lot of buzz around these PWA's(Progressive Web App).
So what on earth is this PWA's????
Well simply put it is a way of developing a web application that has native application feel to it. This means they can work offline or even with low bandwidth. Also, these are reliable, engaging and super-fast.
This tutorial is a basic introduction to PWA. You might have heard the case-study, which says that Twitter has been doing phenomenally well since they have created Twitter PWA's and that there has been a significant increase in tweets sent by the user and all the associated statistics that might help you point one main thing, that PWA has been a god's gift(Technically that's not the case, as some developer/developers might have invested his/her/their time to provide us with a magnificent way of developing applications, but anyways)
How do we implement it:
Well, PWA's use different patterns and technologies to create a native app experience. We will be creating a static app that would display musical instruments and adopt Responsive web design philosophy as well. Responsive web design is a way of creating an application that would re-adjust itself as per the resolution of the screen.
Pre-requisite:
Basic Understanding of:
- HTML
- CSS(Grid and Flexbox)
- ES-6
Tools used:
There's no hard and fast rule to use a particular IDE or editor, so feel free to carry on with the tools you are comfortable with as long as it doesn't impede your productivity. I've used Microsoft Visual Code Studio for this very purpose.
Let's go
HTML
First, we need to create the skeleton with a navbar and div element. So let's create an HTML file and name it index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="Description" content="Author: Suhas Pindiproli,
The website has been created for tutorial purpose. The aim is
to create a progressive web app.
">
<title>Swarasmruti</title>
</head>
<body>
<main>
<h1>Swara-Smruti</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
</ul>
</nav>
<div class="container">
</div>
</main>
</body>
</html>
CSS
Similarly let's create a folder for css and name it stylesheet. Inside the stylesheet folder let's create a file and name it app.css
app.css
*{
margin : 0;
padding : 0;
box-sizing : border-box;
}
body {
font-size: 1rem;
}
main {
max-width: 900px;
margin: auto;
padding: 0.5rem;
text-align: center;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
list-style: none;
display: flex;
}
li {
margin-right: 1rem;
}
h1 {
margin-bottom: 0.5rem;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 0.75fr));
grid-gap: 1.2rem;
justify-content: center;
align-items: center;
margin: auto;
padding: 1rem 0;
}
We have created a flexbox navbar and a grid container.
Now we are good to go with our second tutorial where we will add images and write javascript code to fetch the images of musical-instrument. So stay tuned if you don't wanna miss out on some great stuff.
Thanks for reading!!!!
Top comments (0)