DEV Community: Kinuri Mahoshadhi Edirisinghe

My Comfort Food Project: Interactive Sri Lankan Spicy 🧀 Kottu Calculator! 🍜

Kinuri Mahoshadhi Edirisinghe — Sun, 02 Aug 2026 13:40:38 +0000

Hi everyone! 🇱🇰

For the DEV Frontend Challenge: Comfort Food Edition, I wanted to build a web page inspired by the ultimate street comfort food from my home country, Sri Lanka — *Spicy Cheese Kottu!
*
Kottu is a legendary Sri Lankan street food made with shredded parotta roti, aromatic spices, fresh vegetables, eggs, and meat. In this special version, we add a massive amount of melted cheese to balance out the heavy spice. It's warm, comforting, and the perfect meal for a quiet midnight craving.

🚀 Live Demo

You can try out my live interactive web app here:
👉 Click Here to See My Cozy Kottu Website

What I Built 🛠️

Inspired by a cozy midnight ramen illustration, I created a dark-themed UI featuring a soft glowing moon, stars, a warm lamp effect, and a steaming Kottu bowl.

I implemented an Interactive Ingredient Portion Calculator using vanilla JavaScript. When a user adjusts the number of servings, the application dynamically calculates the exact amount of Parotta Roti, Melted Cheese, and Chicken needed in real-time!

The Code Snippet 💻

Here is the JavaScript logic I used to handle the real-time serving calculations based on the input element:

const servingsInput = document.getElementById('servings');
const rotiSpan = document.getElementById('roti');
const cheeseSpan = document.getElementById('cheese');

const baseRoti = 2;
const baseCheese = 50;

servingsInput.addEventListener('input', () => {
    const servings = parseInt(servingsInput.value) || 1;
    rotiSpan.textContent = baseRoti * servings;
    cheeseSpan.textContent = baseCheese * servings;
});

Why this is my Comfort Food ❤️

In Sri Lanka, Kottu isn't just food; it's an experience. The rhythmic sound of metal blades chopping the roti on hot iron griddles can be heard down every street at night. Whenever we gather with friends or family after a long day, a warm, cheesy bowl of Kottu always makes us feel right at home.

I would love to hear your feedback! Have you ever tasted authentic Sri Lankan Kottu or any spicy street food like this? Let me know in the comments below! 🍜🧀

5 Common CSS Mistakes Beginners Make and How to Fix Them

Kinuri Mahoshadhi Edirisinghe — Sun, 02 Aug 2026 12:31:08 +0000

Learning CSS can feel like magic, but it can also be incredibly frustrating. One minute your website looks perfect, and the next minute, a single line of code breaks the entire layout.If you are struggling to get your web pages to look exactly how you want, don't worry. Here are 5 of the most common CSS mistakes beginners make and exactly how you can fix them.

1. Forgetting the CSS Box Model (Adding Padding Breaks Width)

The Mistake: You set a box's width to 100%, but as soon as you add padding: 20px; or a border, horizontal scrollbars appear and your layout breaks.Why it happens: By default, CSS adds padding and borders on top of the width you specified. So, 100% width + 20px padding left + 20px padding right = wider than the screen!The Fix: Always use box-sizing: border-box; at the top of your CSS file. This forces the browser to include padding and borders inside the specified width.

/* Add this to the very top of your CSS file */

{ box-sizing: border-box; margin: 0; padding: 0; }

2. Confusing Block vs. Inline Elements

/* Fix: This will now respect your width and margin settings */
a {
display: inline-block;
width: 150px;
margin-top: 20px;
}

3. Overusing Absolute Positioning (position: absolute)

The Mistake: Using position: absolute; to push elements around the screen until they look "perfect" on your laptop, only to find the layout completely scrambled on a mobile screen.Why it happens: Absolute positioning takes elements out of the normal document flow. It makes your website completely rigid and unresponsive.The Fix: Stop using absolute positioning for general layouts. Instead, learn and use CSS Flexbox or CSS Grid to build flexible layouts.

/* Instead of absolute position, use Flexbox to center things easily */
.container {
display: flex;
justify-content: center;
align-items: center;
}

4. Hardcoding Fixed Widths (width: 800px)

The Mistake: Setting major containers or image wrappers to a hardcoded pixel size like width: 1200px;.Why it happens: A fixed pixel width looks great on a large desktop monitor, but when viewed on a smartphone (which usually has a width under 400px), your content will get cut off.The Fix: Use relative units like percentages (%), viewport width (vw), or combine max-width with a percentage.

/* Fix: The container will shrink safely on smaller mobile screens */
.main-container {
width: 100%;
max-width: 1200px;
}

5. Using the Wrong Color and Font Units

The Mistake: Using px for text sizing everywhere, making it difficult for users with accessibility needs to scale up the text on their browsers.Why it happens: Pixels are absolute units. If a user sets their default browser font larger for better readability, your px fonts will ignore their preference.The Fix: Use rem for font sizes. 1rem is typically equal to the browser's default font size (usually 16px).

/* Fix: Responsive typography that respects user settings /
h1 {
font-size: 2.5rem; / Equals 40px on standard settings /
}
p {
font-size: 1rem; / Equals 16px on standard settings */
}

ConclusionCSS
isn't broken; it just has specific rules! By using box-sizing: border-box, switching to Flexbox, and using relative units like rem and %, you will instantly eliminate 90% of your layout bugs.What is the most frustrating CSS bug you've encountered so far? Let me know in the comments below!