Rehat Break Timer Product page

A product page

I made a product page for Rehat Break timer at the following link: https://rehat.sufiyanyasa.com.

I have not worked on html/web technologies for a long time. My last involvement in html was probably in 2012 (if I exclude this Jekyll blog). So, I have 8 years worth of knowledge and skills for me to catch up. First of all, I need to use the correct terminology. The current term is front end development instead of web development.

Working on the landing page for Rehat Break timer was really fun. I worked on it for 1 week before launching it live. I consumed as much best practice articles and tutorials on front-end development as I could. Even thought there are still some work needed but I think I made good progress. Thus, I am compiling what I learnt in this blog post ( for future self reference )

Disclaimer - As I am new in Front End development, my recommendations may not be considered best practices for scalable html/web. Thus, I do hope you question / ponder each of my recommendations.

First lets provide a definition for product/launch page.

In digital marketing, a product/launch/landing page is a standalone web page, created specifically for a marketing or advertising campaign. It’s where a visitor lands after they click on a html link from emails or specifically ads.

Coded with NuxtJS

Landing/product pages are best made as static websites.

Static websites are websites that rarely changes for every visitor. HTML files are considered the best medium for static websites. HTML files do not need to be processed and can be served directly from any server.

However, that does not mean, we have to write HTML by hand. We can still use programming languages to help generate these HTML files. There are abundance of tools out there, and I choose NuxtJS because it was a framework that I have read about previously.

NuxtJS is a framework build for Vue JS applications. Vue JS is Javascript framework to create single page applications. It is the main building block for NuxtJS. NuxtJS on the other hand can be thought of the bells and whistles for VueJS applications. As an example, NuxtJS has many plugins. To add a Google analytics plugin, you only need to run yarn add @nuxtjs/gtm and update a configration file. It is that easy.

Styled with TailwindCSS

There are many CSS frameworks to choose. I personally tried out Bulma and Bootstrap. They are very good CSS frameworks. After reading this article on "How to use Tailwind CSS with Nuxt.js". , I instantly felt that TailwindCSS would offer better maintainability in the future.

TailwindCSS does not have ready-made components. You will have to create them by yourself or source them from tailwindcomponents. Tailwindcomponents also provides template pages like landing pages or blogs.

Hosting on Netlify

Netlify is a cloud computing service that offers hosting and server-less backend services for web applications and static websites. Netlify current offers free hosting for static websites. Since our landing page is a static website, we pay $0 dollars to host them.

Netlify is also awesome because they offer a git-based deployment workflow. Deploying a new version of your site can be done with just a git push command. This makes deployment very easy. I am reminded of the old days, where source codes need to be pushed to servers via FTP.

Netlify has a CDN setup through out the globe. This means that our landing page is cached in 6 points of presence (POP). POP are a way to deploy your content closer to the customer. Reducing their waiting time and promote higher engagement on your site.

Netlify = Fast + Free + Easy

Secure with Lets Encrypt

SSL allows us to protect our customers privacy and security. In modern day front-end development, SSL is hard requirement. Even Google will penalize your site without SSL.

Let's Encrypt is a free, automated, and open certificate authority brought to you by the nonprofit Internet Security Research Group (ISRG). Lets Encrypt is integrated with Netlify. All you need to do is to verify your domain and you instantly have HTTPS support.

Conclusion

We covered NuxtJS, Tailwind, Netlify and Lets Encrypt. Of course, there are more topic that I have yet mentioned. Hopefully, I will be able to expand this post in the future.