Frontend Interview Questions: HTML, CSS, JavaScript, React

✨ “The same ideas, built the right way.” Previously, my frontend projects were built using HTML, CSS, and JavaScript. Now, I’m building UI components using React.js, focusing on a component-based approach and a reusable structure. This project helped me practice: •Structuring components effectively •Using props for data flow •Styling with Tailwind CSS •Building a smooth, scrollable single-page layout Small projects like these help me clearly understand how React improves structure, reusability, and scalability compared to traditional DOM-based development. GitHub link 👇 https://lnkd.in/g4TYuWVS #ReactJS #WebDevelopment #JavaScript #TailwindCSS #LearningByBuilding

I thought a To-Do List was “too basic”… until I actually built one. While working on this project, I realized how many small details matter in real frontend development 👇 ❌ My first version had logic issues ❌ Edit & save functionality felt confusing ❌ The UI didn’t feel smooth So I improved it step by step and finally built a fully functional To-Do List using HTML, CSS & JavaScript ✅ 🚀 Features: • Add, edit & delete tasks • Clean UI with subtle animations • Proper DOM manipulation • Focused on readability & user experience 📚 What I learned: • How event listeners actually work • Difference between textContent and innerText • Writing cleaner JS logic instead of messy conditions • Why small UI details really matter This project may look simple, but it strengthened my JavaScript fundamentals a lot 💡 👉 Question: What feature should I add next? ✔ LocalStorage ✔ Dark mode ✔ Drag & drop tasks Would love your suggestions 🙌 Thanks to @Suryamani Kumar for the guidance and support 🙌 #FrontendDevelopment #JavaScript #WebDevelopment #LearningByDoing #Projects #HTML #CSS

Frontend Knowledge Drop: position: relative vs position: absolute Many beginners get confused between these two — here’s a simple explanation 👇 🔹 position: relative • Element stays in normal document flow • top / left / right / bottom move it relative to itself • Mostly used as a reference parent 🔹 position: absolute • Removed from normal document flow • Positioned relative to the nearest positioned parent • Commonly used for badges, dropdowns, tooltips, icons 💡 Pro tip: Always add position: relative to the parent when using position: absolute inside it. This avoids most layout bugs in real projects. If this helped you, drop a 👍 or comment “more” — I’ll keep sharing short frontend concepts regularly. #FrontendDeveloper #CSS #WebDevelopment #ReactJS #JavaScript #LearningInPublic #FrontendTips

React: useState vs useRef — Which one should you use for forms? While building forms in React, most of us instinctively reach for useState to handle input values. But have you ever stopped and asked — Do I really need state here? Let’s break it down. ❌ Problem with useState in such cases When you store every input value in state: Every keystroke updates state Every state update triggers a re-render Your component keeps re-rendering unnecessarily This can impact performance, especially in large forms or complex components Many times, we are not even using these values to update the UI — we just need them when the user clicks “Submit” to make an API call. In such cases, using useState is actually overkill. ✅ Better approach: useRef Instead of tracking input values in state, we can use useRef to store references to input fields. Why is this better? ✔ No unnecessary re-renders ✔ You can directly access current input values when needed ✔ Ideal when input values are only required for form submission ✔ Keeps your component lightweight and efficient In my example, I used useRef to store references to multiple input fields and accessed their values only when submitting the form. 🎯 Key takeaway 👉 If your input values are only needed for an API call and not for rendering UI, prefer useRef over useState. State is powerful — but using it everywhere is not always the best choice. Would love to hear your thoughts — how do you handle forms in React? git repo: https://lnkd.in/d_S5AJCa #React #useState #useRef #FrontendDevelopment #JavaScript #WebPerformance #ReactHooks #WebDev

🚀 CSS Modules vs Tailwind CSS in React — How I Think About Styling Today In React, CSS Modules help us write component-scoped styles and avoid global CSS conflicts. Example: CSS Modules → scoped CSS per component Tailwind CSS → utility-first styling with built-in scoping But when using Tailwind, we don’t need CSS Modules anymore. Instead, we achieve the same benefits using: ✅ Utility classes directly in JSX ✅ Reusable Tailwind class constants ✅ @apply directive for custom classes ✅ Conditional styling with clsx / classnames ✅ Reusable UI components 💡 Key Insight: CSS Modules focus on scoped CSS files, while Tailwind focuses on atomic utility classes and reusable components. Both solve the same problem — but with different approaches. 🔥 My takeaway: For modern React apps, Tailwind + reusable components often gives faster development, better consistency, and less CSS maintenance. #React #TailwindCSS #CSSModules #Frontend #WebDevelopment #JavaScript #MyLearning

JavaScript Performance Keywords, helpful while interview These are the core performance topics, You should remember always. ✔ Lazy loading – Load features only when they are actually needed ✔ Code splitting – Break the app into smaller chunks instead of one big bundle ✔ Tree shaking – Remove unused code during build time ✔ Smaller bundles – Less JavaScript sent to the browser means faster load ✔ Memoization – Cache expensive computations to avoid repeating work ✔ Web Workers – Run heavy tasks in background threads without blocking UI ✔ Avoid unnecessary libraries – Every dependency adds runtime and bundle cost ✔ Avoid unnecessary re-renders – Reduce extra UI updates for smoother apps ✔ Virtualize large lists – Render only visible items instead of full lists Read my medium article, i write about Angular and JavaScript. https://lnkd.in/gUYuypyT #angular #performance

🧠 How Browsers Actually Work (What Every Frontend Dev Should Know) When you hit Enter after typing a URL, the browser doesn’t “open a page”… it builds one from scratch. 🔹 Step 1: Finding the Server (DNS) Browser converts the domain into an IP address so it knows where to talk. 🔹 Step 2: Fetching Resources An HTTP request is sent → server responds with HTML, CSS, JS, fonts, images. 🔹 Step 3: Building the Page HTML → DOM CSS → CSSOM DOM + CSSOM → Render Tree Then comes Layout (sizes & positions) and Paint (pixels on screen). 🔹 Step 4: JavaScript Takes Control JS runs in the browser engine, can block rendering, manipulate the DOM, attach events, and call APIs. 🔹 Step 5: The Event Loop Handles async tasks (callbacks, promises, timers) so heavy JS doesn’t freeze the UI. 💡 Why this matters If you understand this flow, you automatically write: Faster UIs Fewer re-renders Better loading strategies Cleaner React / Next.js apps 👉 Browsers are rendering engines + JS runtimes + networking layers, not just viewers. If frontend is your craft—browser internals are your foundation 🚀 #FrontendEngineering #JavaScript #WebPerformance #ReactJS #NextJS

🛠️ Custom Hooks – The Secret to Clean & Reusable React Code If your components feel too big or repetitive,you probably need a custom hook. Let’s understand why 👇 🔹 What is a Custom Hook? A custom hook is just a function that uses other hooks and starts with use. function useFetch(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url).then(res => res.json()).then(setData); }, [url]); return data; } 🔹 Why Use Custom Hooks ✔ Reuse logic across components ✔ Keep components small ✔ Easier testing ✔ Better separation of concerns 💡 When to Create One 👉 Same logic in 2+ components 👉 Component feels “too smart” 👉 You want to hide complexity 📌 Golden Rule Custom hooks handle logic, components handle UI. 📸 Daily React tips & visuals: 👉 https://lnkd.in/g7QgUPWX 💬 What’s the best custom hook you’ve ever written? 👍 Like | 🔁 Repost | 💭 Comment #React #ReactHooks #CustomHooks #FrontendDevelopment #JavaScript #WebDevelopment #DeveloperLife

Stop optimizing the wrong thing. I just reviewed a React PR that saved 3 lines of CSS but added 500ms of layout thrashing. Here's performance tuning taught me about reflow: ❌ Myth: "Reflow only happens when you change layout properties" ✅ Truth: Accessing offsetHeight, scrollWidth, or getComputedStyle() forces synchronous reflow mid-JavaScript execution ❌ Myth: "Batching DOM reads and writes is a micro-optimization" ✅ Truth: In one dashboard , batching queries saved 120ms on mobile—that's the difference between 60fps and jank. Key Insight: Modern browsers batch layout calculations at the end of the frame—but only if you don't force them early. #FrontendDevelopment #WebPerformance #JavaScript #ReactJS #BrowserInternals #interview

React Folder Structure Explained – Something I Wish I Knew Earlier 👉 “What does each folder actually do?” Folders like assets, components, hooks, pages, redux felt overwhelming at first. I used them without fully understanding their purpose. So I created this simple breakdown to help beginners like me understand: 📁 assets – Images, fonts, and static files 🧩 components – Reusable UI components 📊 data – Static or structured data 🪝 hooks – Custom React hooks 📄 pages – Main website pages 🛒 redux – State management logic 🛠 utils – Helper & utility functions 📐 layout – Page structure (Header, Footer, Sidebar) ⚛ App.jsx – Root component 🎨 index.css – Global styles 🚀 main.jsx – Application entry point If you’re starting with React.js, save this post — it will clear a lot of confusion 💡 💬 Comment “React” if you want more beginner-friendly content like this. #ReactJS #WebDevelopment #Frontend #JavaScript #ReactBeginner #LearningToCode #MERN