Member Confirmation for WebDevLetter

An email was sent to , Please check your inbox to confirm your subscription and receive member exclusive freebies.

i ship high quality
Applications

I ship & share everything I learn through and to help fellow developers grow faster.

0+

Years In Production

0M+

Views Across Platforms

0k+

Followers

0+

Newsletter Subscribers

01 / About Me

ImaFront-endEngineerwith3+yearsofexperiencebuildinghigh-qualitywebapplicationsthatnotonlylookgoodbutdeliveranawesomeuserexperiences.

IalsorunWebDevLetter
WebDevLetter
andWebDevVisuals,
WebDevVisuals
anewsletterandaneducationalplatformhelpingthousandsofdevelopersleveluptheirskillsandgrowfaster.

Ihelpthembysharingpracticaltips,strategies,andvaluablelessonsthatIlearnedthehardwayfrommyownexperience.

1.5 / Tech Stack

Frameworks & Libraries

Electron

React / NextJS

Astro

Redux / Zustand

Framer Motion

Expo

Styling & Languages

Typescript

JavaScript

TailwindCSS

Sass

CSS

Backend, DB & Tools

Node.js / Express

Stripe

Supabase

Figma

Firebase

SQLite

Drizzle

Apollo GraphQL

Git

02 / Work Experience

WebDevVisuals & WebDevLetter Jan 2024 — Present

Founder • Content Creator

Designed and shipped a developer education platform end to end using React, Supabase, and AstroJS, publishing educational visuals that drew 5M+ views and 600+ registered users.

Astro
Zustand
Tailwind
TypeScript
Supabase

SRSWTI Research Labs · New York, US (Remote) April 2024 – March 2026

Founding Engineer

Led all engineering as sole engineer on Bodega, an AI-powered Electron platform with 30+ screens, 6+ built-in apps (browser, mail, chat, notes, Speech Studio), and a custom Node.js backend with Stripe billing and webhooks.

Electron.js
React.js
TypeScript
Node.js
SQLite

Softalya Software Inc · Antalya, Turkey (Remote) January 2023 – April 2024

Frontend Developer

Built 3+ client-facing products end-to-end including a full hotel management dashboard, collaborating with backend and design teams in a fast-paced agile environment.

React.js
React Native
TypeScript
Redux.js
Next.js

Remote Jan 2022 - Jan 2023

Self-Taught Frontend Developer

Built MovieMatrix, a movie discovery platform using MVC architecture, learning core Web Development fundamentals along the way.

React.js
TypeScript
JavaScript
Firebase
Framer Motion

Certificates

Responsive Web Design

Issued by freeCodeCamp • January 2022

JavaScript Algorithms and Data Structures

Issued by freeCodeCamp • March 2022

03 / My Active Projects

3.5 / Archived Projects

ACMessenger

Design & DevelopmentJun 2022 – Nov 2022This one's my deep dive into React for large-scale apps. Real-time chat, fluid animations, and solid praise from the community when I posted it on X.

MovieMatrix

Design & DevelopmentMar 2022 – May 2022Built to master HTML, CSS, JS, and responsive design at their core. A movie discovery app with MVC architecture, well received on X for how easy it is to navigate.

Solarsphere

Design & DevelopmentMar 2025I built this solar system explorer to practice creating smooth and engaging motion effects for a better user experience that feels native.

04 / Recently in WebDevVisuals

How to animate the display property in CSS

By using both starting style and transition behavior, we can easily apply transitions on CSS display property. This works on both enter and exit animations

Making Shine Animation in CSS is Actually Simple

Shine animations in CSS are actually simple to make. You can reuse this .shine-container class on any element you want to have this shine animation effect.

Shining Text Animation in CSS

This is how you can easily create a reusable Shine text animation in pure CSS. Customize it however you like, the gradient colors and the speed!

CSS Button Fill Transition

Learn how to create a button that fills with color from bottom to top on hover, and unfills on hover out using pure CSS.

How to create spring transitions with just CSS

Simple spring animations don't always need an animation library. This CSS function lets you achieve spring effects without JavaScript. It's the linear() function, here's how to use it.

4.5 / Technical Blogs

Windows 10 Calendar Hover Effect: A Step By Step Tutorial

Learn how to achieve this awesome windows 10 calendar like border hover effect that you can use in your website

Windows 10 Setting Hover Effect: A Step By Step Tutorial

Learn how to create this windows 10 settings hover effect that you can use in your website with HTML, CSS and JavaScript

Button Border Gradient Glow Hover Effect Tutorial

In this blog you'll be able to learn how to achieve this awesome gradient border effect that circles in an element on hover

05 / Recently in WebDevLetter

5.5 / Member Freebies

CSS10X

A collection of 10 super useful css techniques to level up your game.

Minfolio

Simple minimalistic portfolio to impress your visitors and potentially recruiters.

06 / Featured Tweets

Ali

@alicalimli_dev

I built a full-stack Chat App to learn React Deeper.

When I started, I only know the basics in React....

I was hesitant at first if I would be able to do it or not, but I started building it anyways.

Through building it, I have learned:

Ali

@alicalimli_dev

My Chatapp is finally done!! 🥳

After almost a 100 days of building its finally stable.

And working great during this journey I've learned plenty of awesome stuffs and it was fun

It took so long to build it but I enjoyed the process a lot. 😁

Ali

@alicalimli_dev

My Web Development Journey From Zero To First Job:

• Jan-Mar 2022: HTML, CSS, Git, and JavaScript...

• Mar-May: Vanilla JS Movie Project

• May: React Fundamentals

Ali

@alicalimli_dev

My first portfolio after HTML, CSS and JavaScript 👀

Ali

@alicalimli_dev

My first big solo project last year 👀

Ali

@alicalimli_dev

3 Amazing Hover Effects to make your website more interactive,

tutorials are included 🧵:

Ali

@alicalimli_dev

If you can't stick around with long courses, try this instead:

• Learn fundamentals ( e.g html css crash course )...

• Choose a project ( e.g landing pages )

• Start building!

Ali

@alicalimli_dev

I Built This Vanilla JS Project to learn JS Deeper for 3 months.

If I can start over, I woudn't have done it....

Here's why...

The main reason I built this project is for me to learn JavaScript deeper.

Ali

@alicalimli_dev

Don't BUILD a big vanilla JS project to practice.

In Frontend Development,...

We don't build medium to big projects in plain JS anymore.

Instead we are using frameworks like React.

Ali

@alicalimli_dev

If you're not gonna put yourself out there, who will?

Start doing it now by:...

- Sharing your achievements

- Sharing what you're building

Ali

@alicalimli_dev

How to build an online presence as a developer:

• Build projects in public ( share your progress )...

• Post tips from your experiences

• Share what you've learned

Ali

@alicalimli_dev

In web dev,

Frameworks comes and go....

But they're all built on top of the same fundamentals.

That's HTML, CSS and JavaScript.

Ali

@alicalimli_dev

I built my chat app project in public since day 1.

Just by sharing progress everyday:...

- My account is getting visibility

- I made a lot of friends and connections

Ali

@alicalimli_dev

If you're building a project to practice your skills,

Start building it in public....

What do I mean by that?

Just share your progress with the community.

Ali

@alicalimli_dev

Why Learn in Public:

- Get Feedbacks...

- Build Your Online Presence

- Make Friends and Connections

07 / Featured Visuals

Ali

@alicalimli_dev

CSS Responsive Grid Without Media Queries:

Ali

@alicalimli_dev

CSS Responsive Typhographies without Media Queries:

Ali

@alicalimli_dev

CSS Resizable Element:

Ali

@alicalimli_dev

CSS Inset Property:

Ali

@alicalimli_dev

CSS Smooth Scrolling:

Ali

@alicalimli_dev

JavaScript script loading tag:

08 / What People Say

Learning something through visually engaging videos makes it easy and enjoyable. Ali does a great job creating such content.

Ali Reza

Front-end developer

Web Development visuals is an amazing platform for learning concepts that are usually difficult to understand, through simple visuals and images.

Atharva Hinge

Developer | Creator

Ali's attention to detail and understanding of your needs is on point. I highly recommend his visuals for web developers seeking to improve their skills.

Matej Bendík

Full-Stack Web Developer

I've been a part of the web development community for years, and I must say that your website has been an invaluable resource for both beginners and experienced developers. The web development visuals you share are not only visually appealing but also incredibly educational. They simplify complex concepts and make learning a breeze. Your dedication to helping others in the field is evident, and I highly recommend your website to anyone looking to enhance their web development skills. Keep up the fantastic work!

Senith

Web Developer

Learning and understanding web development concepts is undeniably awesome. But learning them visually is even easier and more fantastic, as our brains process images faster than text. Ali does an incredible job by putting together videos that help you visualize programming concepts in a more straightforward way.

Mbaziira Ronald

Software Developer | Technical Writer

WebDevVisuals is a great platform to break into web development, I love how everything is explained visually and makes the complex subjects easy to understand, making learning fun and enjoyable. I highly recommend it to anyone who wants to take their web development skills to the next level and understand the concepts at a deeper level.

Dawson

Full-Stack Developer

With its clear and concise tutorials, WebDevVisuals is undoubtedly a valuable resource for those eager to delve into the world of web development.

Ashkan Ebtekari

Software Engineer | Microsoft Ambassador

Highly highly recommend this website to ANY aspiring developer who want to take their learning to the next level. I always love the way Ali visualize his knowledge and make it so easy to understand. It helped me a lot to understand and I hoped everyone learning to code should take this website as a go-to resource. 👍👍👍

Tomey Tran

Software Engineer

Finally, it's out. Quick simple way to find some of those things that we google every time. Every video is about 45s max long explaining various topics in html css and JavaScript. Plus some cool tricks on centering a div and all those confusing css concepts.

Karim Memna

Software Engineer

Learning something through visually engaging videos makes it easy and enjoyable. Ali does a great job creating such content.