DEV Community

Cover image for Official Website is Live 🎉 - Built with TailwindCSS and AlpineJS and lots of 💗
Aashir Khan for Justify Agency

Posted on

Official Website is Live 🎉 - Built with TailwindCSS and AlpineJS and lots of 💗

This is the official website of Justify Agency, built with lots of patience, design work and 💖

Repo: GitHub Public

Watch the Video:

Visit it here: Click here

Technologies Used

  • TailwindCSS: We love this framework a lot, and we are absolutely not going away from it. It's fast, scalable, easy-to-use. We used it, at first it looks like that it's too heavy but after compilation, our CSS Size is only 3KB 🤯
  • AlpineJS: We don't like to play with DOM Selectors anymore, even for simpler things + We are using VueJS every day, so it's a deal-deal
  • Parcel**: It's Simple, that's it
  • IonIcons: This is completely biased, our cat loves it so 😍
  • Netlify: It's simple, with Free SSL + Auto-Deployment. We can roll-back easily and we're also using built-in form collector.
  • Sal.js: Lightweight scroll animation library (Zero Dependencies) and it's just super minimal.
  • GitHub: It's free for teams now so 🥳
  • Favicons - It worked for us, and provided us the zip file of different sizes

Page Speed Insights

Desktop

Desktop Score

Mobile

Mobile Score

Some Credits:

FreePik - Thanks for Illustrations

We are ready for the Launch!
Follow us on Twitter

Top comments (8)

Collapse
 
ziizium profile image
Habdul Hazeez • Edited

With JavaScript disabled in my browser Firefox 76.0.1, I get redirected to https://justifyagency.com/badbrowser

An image showing bad browser message on justifyagency.com

I'll take a further look and will edit this comment if necessary.

Edit 1: It looks like the site is a single index.html, the brand logo should link to index.html. It can either reload the page i.e. back to https://justifyagency.com or you can attach an HTML id and a user can use it to jump back to the beginning of the page. In addition, it is missing an alt attribute.

Justifyagency.com brand image missing an alt attribute as shown in Firefox 76.0.1 developer tools

Collapse
 
justaashir profile image
Aashir Khan

Thanks a lot!
That's some great destructive testing. I'll fix it as soon as possible

Collapse
 
ziizium profile image
Habdul Hazeez

You are welcome.

In addition, you can also use WAVE to test for accessibility issues.

Here is the result in Firefox 76.0.1.

Web Accessibility and Evaluation Tool result for Justagency.com

Thread Thread
 
justaashir profile image
Aashir Khan

I fixed previous issues, and thanks for this. 😊

Collapse
 
alphaion profile image
Rishabh Singh

Just checked your site, it's amazing
But it renders twitter page when I clicked the instagram logo btn.

Btw Great Work though!!

Collapse
 
justaashir profile image
Aashir Khan

Hi, Thanks 🙂

You saved the day, by reporting the icon/links bug 😬, Amazing Stupid Mistake

Collapse
 
pushpak1300 profile image
Pushpak Chhajed

Checked your site.Great animation great design and alpinejs is ❤️

Collapse
 
justaashir profile image
Aashir Khan

Thanks 😘

AlpineJS is super great, but I think I'll replace it with Vanilla cause I don't seem to find the solution to make a "scroll to top" button in AlpineJs