DEV Community

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

Posted on

20 8

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

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

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay