Forem: Amar

UI Design Tips for Developers Who Want to Design Better

Amar — Tue, 22 Jul 2025 06:45:48 +0000

Design is more than making things look good. For frontend developers, understanding design principles can mean the difference between something that works — and something users enjoy using.

If you're a developer trying to improve your UI skills (especially coming from tools like Figma), here are the most important things I’ve learned — including what overwhelmed me in the beginning and how I overcame it.

1. Start with Visual Hierarchy

Not everything is equally important. Use size, color, and spacing to make key elements stand out.

Use larger font sizes for headings (2rem, 1.5rem, etc.)
Create a visual "flow" from top to bottom
Group related elements visually — don’t leave them floating

2. Grids and Spacing Are Non-Negotiable

Before colors or animations — layout matters.

Stick to an 8px spacing scale (8, 16, 24, 32...)
Use Figma’s auto-layout or CSS Flex/Grid to align consistently
Use white space generously — clutter is a design killer

3. Color: Keep It Simple

Color overwhelmed me when I started. Too many options, too many rules. Here’s what helped:

Stick to 1 primary color and 1–2 neutrals
Use tools like Coolors to build matching palettes
Maintain contrast — especially for accessibility

Tip: Start with grayscale in Figma before adding color.

4. Typography Is 90% of UI

Most of a UI is text.

Use only 1 or 2 fonts (Inter, Roboto, Poppins, etc.)
Define a clear type scale (32px for h1, 16px for body, etc.)
Use generous line-height (1.5 is a good default)

5. Consistency > Creativity

Creativity is cool — but consistency is what makes designs usable.

Use the same spacing and padding across elements
Stick to your defined color palette
Reuse components (buttons, inputs, etc.)

6. Don’t Design Everything From Scratch

Use UI kits, design systems, and inspiration. You’re not “cheating” — you’re learning.

Explore Mobbin, UI Coach, and Figma Community
Reverse-engineer good designs to learn spacing, layout, and scale
Use component libraries or Tailwind UI for inspiration

7. Figma First, Then Code

Designing in Figma before writing code helps you:

Visualize layout early
Catch inconsistencies
Reuse spacing + text styles

Your Figma file becomes a blueprint — coding becomes faster and more accurate.

Final Thoughts

You don’t need to be a full-time designer to build beautiful interfaces. Master spacing, hierarchy, and typography — and let the rest evolve with practice.

Design simple. Keep it clean. Ship confidently.

My Favorite VS Code Extensions for Frontend Development

Amar — Tue, 22 Jul 2025 06:34:25 +0000

Why Extensions Matter for Frontend Devs

Visual Studio Code is powerful on its own, but extensions turn it into a true frontend powerhouse. From clean formatting to better file navigation and styling support, the right tools can seriously improve your speed and code quality.

Here are the free extensions I personally use and recommend.

1. Prettier — Code Formatter

Why I Use It:

Code consistency is key, especially when switching between projects. Prettier automatically formats my HTML, CSS, JavaScript, and TypeScript files to match my style guide.

Highlights:

Zero config to get started
Works with ESLint
Supports all frontend languages

Pro Tip:

Add a .prettierrc config for consistency across your team or projects.

2. Tailwind CSS IntelliSense

Why I Use It:

Tailwind speeds up styling, but remembering all class names? Not easy. Tailwind IntelliSense provides autocompletion, syntax highlighting, and hover previews.

Highlights:

Autocomplete for utility classes
Linting support
Hover documentation for classes

Works Great With: Tailwind + JSX/TSX or even vanilla HTML.

3. GitLens — Git Supercharged

Why I Use It:

GitLens gives you deep Git integration—who changed what, when, and why—right inside VS Code. It’s like having GitHub inline.

Highlights:

Inline Git blame
Commit history & diff view
Repo insights panel

Use Case:

Perfect when working in teams or reviewing legacy code.

4. Dracula Official Theme

Why I Use It:

A visually pleasant dark theme that reduces eye strain during long sessions. The colors are balanced and optimized for readability.

Highlights:

High contrast for readability
Smooth on the eyes
Professional aesthetic

5. Material Icon Theme

Why I Use It:

A good icon set helps you recognize files at a glance. This theme adds intuitive, colorful icons for all file types and frameworks.

Highlights:

Recognizable icons for React, HTML, CSS, JS, etc.
Folder-specific icons
Lightweight and fast

Bonus Tips

Enable format on save with Prettier: "editor.formatOnSave": true
Group related extensions into workspace recommendations using .vscode/extensions.json
Use settings sync to carry your config across devices via GitHub

Final Thoughts

VS Code is highly customizable, and these free extensions elevate it for frontend work—whether you're building in React, TypeScript, or just good ol' HTML/CSS. These tools help me focus more on writing clean code and less on repetitive tasks.

If you're not using some of these yet, give them a try—they could become part of your daily workflow too.

Thanks for reading! Want a follow-up post on VS Code snippets or keyboard shortcuts? Let me know.

How I Start a Frontend Project: My Folder Setup, Tools & Real Tips

Amar — Tue, 22 Jul 2025 06:24:12 +0000

If you're like me, you’ve probably watched a million YouTube tutorials and still felt unsure about how to actually start a frontend project. I’ve been there. Every tutorial has a slightly different folder structure, setup, or opinion—and it gets overwhelming fast.

So this post is how I personally do it—no fluff, no theory, just my real setup using React, Vite, and TypeScript.

What I Use (and Why)

React — I love how component-based it is.
Vite — It’s fast, like instant reload fast.
TypeScript — Adds some structure to my JS chaos.
Prettier + ESLint — So I don’t waste time formatting.
PowerShell — Yep, I’m that person who likes automating setup stuff.

My Folder Structure (Simple But Solid)

This is what my src folder usually looks like:

src/
│
├── assets/ # Images, fonts, etc.
│ └── images/
│
├── components/ # Reusable UI blocks
│ └── Navbar.tsx
│ └── Button.tsx
│
├── pages/ # Full-page components (like routes)
│ └── Home.tsx
│
├── App.tsx # App shell
├── main.tsx # Entry point
├── index.css

No fancy hooks, context, or utils folders at the beginning. I add those only if the project grows enough to need them.

Getting Started (In My Workflow)

I don’t start from scratch every time. I have a simple boilerplate saved locally or on GitHub. Here's how I begin:

bash
git clone https://github.com/yourname/your-boilerplate
cd your-boilerplate
npm install
npm run dev

Boom. Project running in seconds.

Prettier + ESLint: My Non-Negotiables

These two keep my code clean without me thinking about it.

Here’s a super basic .eslintrc.json setup:

{
  "extends": ["react-app", "plugin:react/recommended", "prettier"],
  "rules": {
    "react/prop-types": "off"
  }
}

And my .prettierrc:

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2
}

You can add format and lint scripts in package.json for quick use.

PowerShell: Quick Folder Setup

I’m on Windows, so I use PowerShell to speed up the boring stuff:

mkdir src\components, src\assets\images, src\pages
New-Item -Path src\App.tsx -ItemType File
This saves me from right-click → new folder → repeat 5 times.

A Few Personal Tips

● Start small. Add complexity only when you need it.

● Commit your code early. Even if it’s ugly.

● Don’t obsess over perfection. Build ugly → improve → repeat.

● Name files clearly. NavBar.tsx is better than Stuff1.tsx.

● Write code like someone else will read it (because future-you will).

Wrapping It Up

Frontend setup doesn’t need to be complicated. This is how I start every project, and it helps me stay organized without getting stuck in “setup hell.”

If you're a beginner or even semi-experienced, I hope this gives you a clearer idea of how to just start. Once you do that, the rest follows.

Want me to share the GitHub boilerplate I use? Let me know.

Thanks for reading!
This saves me from right-click → new folder → repeat 5 times.

A Few Personal Tips
Start small. Add complexity only when you need it.

Commit your code early. Even if it’s ugly.

Don’t obsess over perfection. Build ugly → improve → repeat.

Name files clearly. NavBar.tsx is better than Stuff1.tsx.

Write code like someone else will read it (because future-you will).

Wrapping It Up
Frontend setup doesn’t need to be complicated. This is how I start every project, and it helps me stay organized without getting stuck in “setup hell.”

If you're a beginner or even semi-experienced, I hope this gives you a clearer idea of how to just start. Once you do that, the rest follows.

Want me to share the GitHub boilerplate I use? Let me know.

Thanks for reading!

Why I Chose Frontend Development (and Why You Might Too)

Amar — Mon, 21 Jul 2025 19:25:58 +0000

In early 2024, I made a decision that would shape the way I interact with the web: I chose to become a frontend developer.

No, I didn’t start coding when I was six, nor did I attend a bootcamp or follow a polished learning path. Like most self-taught devs, I began with a curious mind, a laptop, and the endless rabbit hole that is YouTube.

And I’m glad I took the leap—because frontend development became more than just a skill. It became a creative outlet, a technical challenge, and a form of expression. If you’re exploring where to start in tech, this post might help you understand why frontend could be the right choice for you too.

Where It All Began: My Obsession With Design

Long before I knew what a div or component was, I was obsessed with good design. I noticed subtle animations on websites, how layouts adjusted on different screen sizes, and how typography could make or break the feel of a page.

Frontend development became the obvious path because it blended two things I genuinely enjoyed: design and logic. I didn’t just want to see great websites—I wanted to build them.

That realization pushed me toward frontend, and I haven’t looked back since.

Building My First Real Project: Inbox Pilot

The first project that made everything click was a SaaS-style landing page for a fictional AI tool I called Inbox Pilot.

It wasn’t part of a tutorial. There was no hand-holding. Just me, my editor, a blank screen, and a rough vision.

I used everything I had picked up: basic HTML & CSS, some React and TypeScript, and version control via GitHub. I spent days tweaking margins, fine-tuning interactions, and perfecting layout responsiveness.

Did it win awards? No. But it taught me what no course ever could: how to build something from scratch, solve real UI problems, and care about user experience.

What Makes Frontend So Special?

Frontend development is unique. It’s not just about writing code—it’s about shaping the experience users have with a product. That’s a big deal.

Here’s what keeps me hooked:

Instant feedback: You write code, and immediately see results in the browser.
Creative control: You decide how users see and interact with your product.
Continuous learning: From layouts to accessibility, there's always something new to learn and master.
Visual storytelling: You're not just solving problems—you’re telling a story through visuals and interactions.

It combines creativity with structure in a way that very few disciplines do.

What I Struggled With Early On

Like many beginners, I fell into the YouTube overload trap.

There was too much content. Too many tutorials. Too many people shouting “Learn this!” or “That’s outdated!” It was hard to know what to trust—and where to begin.

Looking back, I realize what helped was slowing down. I focused on learning one thing at a time, applying what I learned, and then moving on. That simple approach saved me from burnout and helped me actually retain what I was learning.

Why You Might Want to Try Frontend Too

Frontend might be the right place for you if:

You enjoy visual creativity and care about how things look and feel.
You like tangible results—seeing what you build right away.
You want to build real-world projects fast and keep improving them.
You’re excited by the idea of designing interfaces people actually use.

Frontend isn’t just for "designers who code" — it's for problem solvers who think in pixels, patterns, and interactions.

My Advice for Beginners

If you're just starting out:

Start small. Learn HTML and CSS. Build static pages first.
Ignore the hype. Don’t chase every new framework.
Be consistent. A little progress every day beats binge-watching tutorials.
Build projects. That’s where the real learning happens.
Don’t get overwhelmed. Everyone starts from zero. Confusion is part of the journey.

Learning to code is less about mastering everything and more about being okay with not knowing, but still moving forward.

Final Thoughts

I chose frontend development because it allowed me to combine creativity with code—and because it felt natural. I stuck with it because of the endless learning, the visual feedback, and the joy of creating things people can see, touch, and use.

If you’re even slightly interested, I say try it.

Start where I started—with curiosity and no pressure to be perfect.

Frontend development isn’t just a career path. It’s a craft. And once you fall in love with it, there’s no going back.

Thanks for reading

— Amar