We'll have several cards, so for the container element it will be displayed as a grid. So for the nav tag, after making it a flex container, we use justify-content: space-between to align them. Then, we limit the main element's maximum width to 900px to make it look good on a large screen.įor the navbar, I want the logo to be at the left and the links at the right. Then we'll do some resets to prevent the default behavior. Here, as usual, we start by importing the fonts we need.

Now that we've gotten that out of the way, let's style it with CSS. container will hold our cards that we add later with JavaScript. We wrap everything in the main tag.Īnd create a navigation bar with the nav tag. 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.ĭon't worry about these new terms – we'll cover them below.įirst, we have to build our traditional web app. In the end, it's just your regular website that runs in a browser with some enhancements. So, let's get started with an important question: What the heck is a PWA? What is a Progressive Web App ?Ī Progressive Web App is a web app that delivers an app-like experience to users by using modern web capabilities. In this article, we are going to build a PWA from scratch with HTML, CSS, and JavaScript. With PWAs we can enhance our website with mobile app features which increase usability and offer a great user experience. Progressive web apps are a way to bring that native app feeling to a traditional web app.

Visual studio code icon png 512x512