DEV Community: Dani

Sell Yourself Without the BS: Honest Resume Advice for Code Newbies + Prompts That Worked for Me

Dani — Wed, 22 Oct 2025 09:42:14 +0000

Hey fellow code newbies and web devs! If you're like me—an #intern with zero real-world experience but a ton of projects under your belt—getting your resume noticed can feel impossible. But guess what? A few smart tweaks and some AI prompts changed everything for me. I'm sharing my tips + practical prompts that helped me tailor resumes and land interviews. Let's dive in—keep it real, be honest, and watch those opportunities roll in!

A Few Tips for a Better Resume

Based on what I've learned (and messed up) along the way. These are gold for #internships and #juniors in tech.

Intent Matters!

With this mindset, write your resume like:

✅ How do I want them to see me?

✅ With what title do I want to be seen? Front-end? Back-end? Or Web Developer?

✅ What skills do they need? (Every job ad asks for specific skills.)

🔴 A note for #interns like me with no experience: if you’ve got lots of projects, include the ones whose tech stack matches the job description.
Where Does HR Look First?

Since #resumes go to HR first, your title/headline is crucial. Make sure it fits the role you’re applying for—don't slap on something generic if the ad is screaming "Front-End Dev"!
Which Skills?

For the #Skills section:

✅ Don’t list a skill you haven’t actually used in your projects.

✅ It helps to indicate your level for each: learning, proficient, or expert?

🔴 Don’t include skills you “just know” that aren’t relevant to the role.
About Me—Sell Yourself

For #internships and #juniors, the About Me/Summary section matters: your motivation, your path, what you’ve done, and the skills you can bring to that company.

🔺 They say no summary is better than a bad, unprofessional one!

Some job ads list skills in the description that don’t match the job title. Don’t overthink it—and even if you don’t know that thing, send your resume anyway. Experience says (in some cases) they add it just to reduce the number of applicants!

🟥 Better not to exaggerate, lie, or BS in your resume. Be honest—if you claim something you don’t know, the interview will expose it big time!

💥 A Few Great Prompts That Helped Me

These are game-changers! I used them with tools like ChatGPT to polish my resume. Plug in your details and watch the magic. 👆

Act as a recruiter for [Role]. Review my resume below and highlight weak areas, overused buzzwords, and missing metrics. Be brutally honest.

👆 This one's a beast—especially the metrics it suggests!
Rewrite this resume to sound more results-driven, quantifiable, and compelling for [target role]. Focus on achievements, not just duties.
ATS Boost

Prompt: Update this resume to be fully optimized for Applicant Tracking Systems (ATS) for the role of [specific role/title]. Use industry-specific keywords naturally.
Craft My Hook

Prompt: Write a powerful, 3-line professional summary that hooks a recruiter in under 10 seconds. Prioritize impact, clarity, and value.
Upgrade Experience

Prompt: Rephrase the experience section to highlight impact, results, and transferable skills using action verbs and quantifiable outcomes.
Format Fix

Prompt: Suggest a clean, modern resume format that works for both humans and ATS. No graphics, no columns. Just structured and effective.
Tailor for the Role

Prompt: Tailor this resume to fit this specific job description [paste JD]. Highlight matching experience and reword sections to match the language used.
Standout Cover Letter

Prompt: Write a compelling cover letter based on this resume and job description. Keep it personal, enthusiastic, and under 200 words.

These prompts saved me hours—try 'em out and tweak as needed!

Wrapping It Up

There you have it—my no-BS guide to resumes that actually get seen. If you're grinding through job apps as a web dev or code newbie, remember: intent and honesty win. For more inspo, check out this webinar from Tech Immigrants on resume writing: https://youtu.be/Gt2AQG-u8xM.

What’s your biggest resume struggle? Drop it in the comments—let's chat! If this helped, upvote or share for more tips. Happy job hunting!
#WebDevelopment #CodeNewbie #ResumeTips

Css styling, Cards grid and overlay effect! thanks to cursor ai!

Dani — Fri, 10 Oct 2025 21:39:24 +0000

How I Learned to Build Beautiful Anime Cards (Thanks to AI + Curiosity)

When I was building my Next.js anime browser, I wanted each anime to feel special—not just a static image, but a little interactive card that reveals more when you hover over it.

I didn’t know how to do it… so I asked Cursor AI to help me generate a cool styling. And you know what? I was amazed and also That’s where the real learning began.

Instead of just copying the code, I studied it, broke it, fixed it, and made it my own. Here’s what I learned along the way.

1. Responsive Grid: “Fit as Many Cards as Possible”

First, I needed the cards to look great on any screen—phone, tablet, or desktop.

The AI suggested this CSS trick:

.animeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

At first, I didn’t get it. But after playing with it, I realized:

minmax(280px, 1fr) = “Each card is at least 280px wide, but can grow to fill space.”
auto-fill = “Add as many columns as fit—no media queries needed!”

It’s pure CSS magic—and now I use it everywhere(though i remember it!)

2. The Hover Overlay: Sleek, Smooth, and Useful

I wanted to show more details (score, summary, genres) on hover—without cluttering the main view.

Here’s the core idea the AI gave me:

Wrap the card in a position: relative container
Add an absolutely positioned .animeOverlay that’s hidden by default
On hover, slide it in with transform and fade it with opacity

.animeCard {
  position: relative;
  overflow: hidden;
}

.animeOverlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.8) 0%,
    rgba(0,0,0,0.3) 100%
  );
  backdrop-filter: blur(2px);
  opacity: 0;
  transform: translateY(-100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 16px;
  z-index: 10;
}

.animeCard:hover .animeOverlay {
  opacity: 1;
  transform: translateY(0);
}

What I learned:

backdrop-filter: blur() creates that modern glass effect
cubic-bezier(0.4, 0, 0.2, 1) is the same easing Apple uses—it feels natural
Always use overflow: hidden on the parent to prevent scrollbars during animation

3. Custom Scrollbar: Because Default Ones Are Ugly

Some anime have long synopses, so the overlay needs to scroll. But browser scrollbars are thick and distracting.

The AI showed me how to style a minimal, elegant scrollbar:

.overlayContent {
  overflow-y: auto;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.3) transparent;
}

/* WebKit (Chrome, Safari) */
.overlayContent::-webkit-scrollbar {
  width: 4px;
}
.overlayContent::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
}

Now the scrollbar is:

Only 4px wide
Semi-transparent white
Rounded corners
Invisible until you scroll

It feels native, clean, and intentional—like it belongs.

The Real Lesson: AI Is a Teacher, Not a Crutch

I could’ve just pasted the code and moved on. But by asking “why?”—

Why minmax()?
Why transform instead of top?
Why backdrop-filter?

—I turned AI output into real understanding.

And that’s the key: use AI to jumpstart your learning, not replace it.

Now I know some styling patterns that I didn't know before!

💡 Try it yourself:

Take an AI-generated snippet, save it somewhere else, and rebuild it from scratch. You’ll learn 10x more.

Happy coding—and happy styling! 🎨✨

How I Finally Understood React — Before Learning Next.js!

Dani — Sun, 05 Oct 2025 16:29:59 +0000

How I Finally Understood React — Before Learning Next.js!

If you're reading this, I'm guessing you're planning to learn Next.js.

From my experience, Next.js truly feels like stepping into a smoother, more comfortable phase of web development. But here's the key: you'll get way more out of it if you first understand React — not just its syntax, but how to think in React.

This post is my personal summary of what clicked for me while going through the React Foundations section on the official Next.js Learn site. It's not a tutorial — it's the "aha!" moments I had along the way.

React and Next.js: What's the Difference?

Both React and Next.js are tools for building web applications — but they play different roles:

React is a JavaScript library for building interactive user interfaces (UIs). It gives you powerful APIs to create UI components, but it doesn’t decide how you structure your app, handle routing, or fetch data. That’s up to you.
Next.js is a React framework. It takes React and adds structure, built-in solutions, and optimizations for common needs like routing, data fetching, rendering, and more.

Think of it like this:

React gives you the bricks.

Next.js gives you the whole blueprint — and even the construction crew!

So… What Even IS a Web Application?

The Next.js Learn course breaks it down beautifully: every modern web app is made of building blocks, like:

User Interface – What users see and interact with (e.g., a list of blog posts, a comment section).
Routing – How users move between pages (e.g., from /posts to /posts/my-first-post).
Data Fetching – Where your data lives (like a database) and how you get it (via APIs or Server Actions).
Rendering – When and where content is generated (statically at build time? dynamically on the server?).
Integrations – Third-party services (authentication, CMS, payments) and how you connect to them.
Infrastructure – Where your app is deployed (Vercel, Netlify, etc.).
Performance – How fast it loads and feels.
Scalability – How it handles growth in users, content, or team size.
Developer Experience – How easy and enjoyable it is to build and maintain.

When I imagined building a personal blog, these ideas suddenly made sense:

Users browse all posts → that’s UI + routing.
They click into a single post → more routing + data fetching.
They leave a comment → UI + data mutation + maybe auth.

👉 React helps you build the UI layer.

👉 Next.js helps you wire up everything else — cleanly and efficiently.

Back to Basics: The DOM and How We Update It

Like most of us, I started web dev with HTML → CSS → JavaScript. And I used the DOM (Document Object Model) to update pages dynamically.

The DOM is the bridge between your code and what users see. You can read it, change it, and add to it using JavaScript.

But here’s the thing: updating the DOM manually is tedious.

For example, to add a simple <h1> with plain JavaScript, you’d write:

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const text = 'Develop. Preview. Ship.';
  const headerContent = document.createTextNode(text);
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

That’s five lines just to show a heading!
This style is called imperative programming: you tell the browser exactly how to build the UI, step by step.

Enter React: A Declarative Approach

React flips this around. Instead of describing how to build the UI, you describe what you want — and React figures out the “how.”

With React, the same heading becomes:

const domNode = document.getElementById('app');
const root = ReactDOM.createRoot(domNode);
root.render(<h1>Develop. Preview. Ship.</h1>);

Much cleaner, right?

This is declarative programming:

“I want an <h1> with this text inside #app.”

(React handles the DOM updates for you.)

It’s like ordering a pizza instead of baking the dough, slicing the tomatoes, and grilling the cheese yourself. 🍕

💡 Note: React itself isn’t a “declarative language” — it’s a library that enables a declarative style using JavaScript + JSX.

Wait… What’s JSX?

That line root.render(<h1>Hello</h1>) isn’t valid JavaScript — so how does it work?

Meet JSX (JavaScript XML): a syntax extension that lets you write HTML-like code inside JavaScript. Browsers don’t understand JSX natively, so it gets compiled to regular JavaScript (usually by tools like Babel).

JSX has just three simple rules:

Wrap everything in a single root element (e.g., you can’t return two sibling <div>s without a parent).
Close all tags (e.g., <img />, not <img>).
Use camelCase for attributes (e.g., className instead of class).

Once you get used to it, JSX feels natural — and it makes your UI code way more readable.

How to Think in React: The 3 Core Concepts

To truly “get” React, focus on these three pillars (as taught in the React Foundations course):

🔍 Don’t just read — build!

The ideas below are meant to give you a mental map, not replace hands-on practice. To truly understand them, open your editor, type out the examples, break them, fix them, and create your own tiny components. Reading alone won’t make it stick — writing code will.

1. Components = Reusable UI Pieces

Components are JavaScript functions (with capitalized names!).

They return JSX that describes part of your UI.

You can nest them like LEGO bricks: <Header /> inside <HomePage />, etc.

function Header() {
  return <h1>My Blog</h1>;
}

function HomePage() {
  return (
    <div>
      <Header />
      <main>...</main>
    </div>
  );
}

Learn more:

2. Props = Data Flow from Parent to Child

Props let you pass data into components (like function arguments).

They’re read-only and help make components reusable.

function Post({ title, author }) {
  return <article><h2>{title}</h2><p>By {author}</p></article>;
}

// Usage:
<Post title="My First Post" author="Ali" />

Learn more:

Displaying Data with Props

3. State = Managing Changing Data

State holds data that changes over time (e.g., form inputs, toggle buttons).

Use the useState Hook to add state to a component.

import { useState } from 'react';

function CommentBox() {
  const [comment, setComment] = useState('');
  return (
    <input 
      value={comment} 
      onChange={e => setComment(e.target.value)} 
    />
  );
}

Learn more:

Updating State

Final Advice: Don’t Just Read — Build!

This post is just a launchpad. The real learning happens when you:

Write code alongside the tutorials
Break things and fix them
Rebuild small projects (like a blog, todo app, or profile page)

The React Foundations course is beginner-friendly and assumes only HTML/CSS/JS knowledge — no React experience needed.

And remember: you don’t need to master everything before starting Next.js. But understanding these fundamentals will save you hours of confusion later.

Happy coding — and welcome to the React + Next.js world!

Semantic HTML, interview and technical terms!

Dani — Thu, 04 Sep 2025 21:52:59 +0000

I was rejected from my first interview for a front-end position due to a lack of technical knowledge. This became an excuse for me to review the technical terms related to HTML and CSS from the beginning:

🔴 HTML

✅ Why do we use <!DOCTYPE html>?
To tell the browser that our page is written with HTML5/CSS, so it can correctly render features like flexbox and grid for us.

✅ What is a Root Element?
It refers to the element/tag, which must have the language or lang attribute.
Why must it have the language attribute? For two reasons: 1. Better SEO (screen readers) and 2. For translation services.
Of course, we can later add this attribute (lang) to any element (tag) we have.

✅ What is Semantic HTML?
It refers to elements (tags) that can define themselves and play a specific, meaningful role on the page. For example, instead of a

, we should use <article>, <section>, <header>, <footer>, <main>, <nav>, and similar tags, each with their own specific place and rules.
For example:
The and tags should be the first children of .

✅ What are DOM and AOM?
By parsing the semantic tags, the browser can give us two software interfaces (APIs):

The first is the Document Object Model, which has a tree structure and is used to control the elements on the page.
The second is the Accessibility Object Model, which is parallel to the DOM but is provided to us in a non-visual way. This interface is what screen readers interact with, and this is where the benefit of using semantic tags becomes tangible. AOM provides us with a landmark for each tag, which SEO and screen readers use. For example, the tag gives us a landmark called "banner," but a tag like has no landmark!
🟥 The concept of semantic HTML or structured tags is one of the most important concepts in web development, and it's essential to know "where," "how," and "why" we place each tag.