DEV Community: Roghaye Mohammadi

🍰 Bake With What You Have: How My Sister's Passion for Baking Inspired My Latest Front-End Project

Roghaye Mohammadi — Sun, 12 Jul 2026 17:42:10 +0000

This is a submission for Weekend Challenge: Passion Edition

What I Built

My sister is passionate about baking.

Cakes, cookies, pastries... if there's something sweet to make, she's probably already thinking about it.

But there was one problem I kept noticing.

Before baking anything, she would spend a lot of time searching through different websites just to find a recipe that matched the ingredients already available in our kitchen.

Sometimes she already had almost everything she needed, but finding the right recipe still took much longer than it should.

Watching this happen over and over made me think:

What if there was a faster way?

That's how Bake With What You Have was born.

Instead of browsing dozens of recipe websites, users simply select the ingredients they already have, and the app suggests cakes and desserts they can make right away.

Now she can spend less time searching for recipes and more time baking.

And honestly... I get to keep enjoying more homemade desserts too, so I'd say it's a win for both of us. 🍰😄

Demo

🌐 Live Demo

https://bake-with-what-you-have.netlify.app/

Code

💻 GitHub Repository

https://github.com/roghayem/bake-with-what-you-have

How I Built It

I built this project using only HTML, CSS, and JavaScript, without any frameworks.

Technologies Used
HTML5
CSS3
JavaScript (ES6)
Flexbox
CSS Grid

Features

🍰 Find cake and dessert recipes using available ingredients
🥚 Interactive ingredient selection
📖 View recipe details
📱 Fully responsive design
🎨 Clean and modern UI
⚡ Fast and lightweight experience

Challenges

The biggest challenge wasn't designing the interface.
It was creating a recipe-matching system that feels useful instead of overwhelming users with too many results.

Building this project also helped me improve my skills in:

DOM Manipulation
Working with arrays and objects
Responsive Web Design
UI Design
Building projects around real-world problems instead of tutorial ideas

What's Next?

This is only the first version of the project.
I already have several ideas for future improvements:

🍰 Add many more cake and dessert recipes
🧠 Improve the recipe matching algorithm
❤️ Save favorite recipes
🔍 Add search and advanced filtering
🛒 Generate shopping lists for missing ingredients
👤 Add user accounts and personal recipe collections
📱 Turn it into a complete web application—and maybe even a mobile app in the future

I hope this project continues to grow as my front-end skills grow.
Final Thoughts

One thing this project reminded me is that good ideas don't always come from brainstorming for hours.

Sometimes they're already around us—we just need to pay attention to the small problems people face every day.

If this app helps my sister spend less time searching and more time baking, then I've already achieved my goal.

And if that means I get to enjoy more homemade desserts, that's definitely a bonus. 🍰😄

I'd love to hear your feedback.

If you could add one feature to this project, what would it be?

3 Things I'd Improve If I Rebuilt My Landing Page Today

Roghaye Mohammadi — Sun, 12 Jul 2026 11:00:04 +0000

3 Things I'd Improve If I Rebuilt My Landing Page Today

It's never easy to criticize your own project, but I believe that's one of the best ways to grow as a developer. Looking back at my landing page, here are three things I would improve if I built it again.

1. I Would Use More Semantic HTML

When I built this project, my main focus was making the website look good. If I rebuilt it today, I would use more semantic HTML elements like <header>, <main>, <section>, and <footer>.

Semantic HTML improves the structure of a webpage, makes it easier to understand, and can also help with SEO and accessibility.

2. I Would Improve Accessibility

After testing my landing page, I noticed that the accessibility score could be much better.

I would improve things like image alt text, color contrast, and keyboard navigation to make the website easier for everyone to use.

3. I Would Organize My CSS Better

One of the biggest lessons I learned is that writing code that works isn't enough. Clean and organized code is just as important.

If I rebuilt this project today, I would organize my CSS more carefully, use more consistent class names, and group related styles together. This would make the project easier to read, maintain, and update in the future.

Final Thoughts

This project taught me a lot. Even though I can already see several things I'd improve, I'm proud of what I built because it represents an important step in my learning journey.

Every project teaches you something new, and looking back at your work is one of the best ways to become a better developer.

Project Links

🌐 Live Demo:
https://nexio-saas-page.netlify.app

💻 GitHub Repository:
https://github.com/roghayem/modern-saas-landing-page

I'd love to hear your thoughts!
If you were rebuilding this project, what would you improve differently?

I Built a Responsive Landing Page Without Any Frameworks

Roghaye Mohammadi — Thu, 02 Jul 2026 06:48:27 +0000

I Built a Responsive Landing Page Without Any Frameworks

One of the most common mistakes junior front-end developers make is thinking they need to learn everything before starting a project.

I used to have the same mindset. I kept learning and watching tutorials, but I was always waiting for the "right time" to build something.

After a while, I realized that I didn't need to know everything to start. The best way to learn was by building real projects.

So, I created a responsive fast-food landing page without using any frameworks. That project became the real starting point of my journey.

The landing page was built using only HTML, CSS, and JavaScript—no frameworks, no libraries.

It's a single-page website that focuses on presenting the content clearly while keeping the design clean and responsive.

The page includes:

A hero section
A menu section
A gallery
Customer reviews
An order form

I used Flexbox to build and organize most of the layout, especially the food cards.

The biggest challenge was the order form. Since I didn't know any backend development yet, I couldn't connect the form to a server.

Instead of giving up, I created a Telegram bot and connected the form to it, so every submitted order is sent directly to Telegram.

Looking back, I think that was a creative solution with the knowledge I had at the time.

This project taught me an important lesson: you don't need to know everything before you start. Building projects is one of the fastest ways to improve your skills, discover what you don't know, and gain real experience.

Project Links

🌐 Live Demo:
https://fast-food-page.netlify.app/

💻 GitHub Repository:
https://github.com/roghayem/fastfood-landing-page

I'd love to hear your feedback. If you have any suggestions for improving the design or the code, feel free to leave a comment.

Conditional for beginners

Roghaye Mohammadi — Mon, 17 Nov 2025 11:43:18 +0000

Conditional statements, also called if statements, are one of the most important parts of programming. They allow a program to make decisions based on certain conditions. They check if a condition is true or false, and then run different parts of the code based on the result.

For example, if the user enters the correct username, the program will allow access. But if the username is wrong, it will show an error message.

if username =="admin": print("Acsees granted) else: print("Error: wrong username")

There are different kinds of conditional statements, but the most common are if, else if (or elif) and else. The if statement checks a condition, else if checks another condition if the first one is false, and else is used when none of the conditions are true.

Conditional statements are very useful in programming because they make programs smarter and able to handle different situations. Without using conditional statements, a program would follow only one path and would not be flexible.

programming operators

Roghaye Mohammadi — Tue, 21 Oct 2025 06:36:44 +0000

Imagine you are using a calculator.
You press buttons like +, -, *, /.
These buttons are called operators in programming!

Operators help the computer do things like:

1)Add numbers

2)Compare values

3)Make decisions

Arithmetic Operators (Math)

Comparison Operators (Check)

These operators ask a question and answer with True or False.

Logical Operators (And / Or / Not)

These are used to combine conditions:

Conclusion

Operators are like helpers in programming.
They calculate, check, and control what happens in the code.

If you know operators, you are one big step closer to becoming a programmer!✌🏻🔥

Understanding Variables and Data Types for Beginners

Roghaye Mohammadi — Thu, 18 Sep 2025 16:09:42 +0000

If you’re just starting to learn coding, two things you’ll always hear about are variables and data types. Don’t worry, they sound more complicated than they really are! Let’s break them down in a way that makes sense.

What’s a Variable?

A variable is like a name tag on a storage box where you can keep data. You can store a number, a word, or even a list of items. And the cool part? You can change what’s inside whenever you want.

For example, let’s say you want to keep track of your age and name. You could write (in Python):

age = 26
name = "Dean"

Now, age and name are variables holding values. You can change them:

age = 23
name = "Sam"

What is a Data Type?

Now, let’s talk about data types. Think of data types as categories or labels for the different kinds of data you can store. Not everything can go into every variable. Some data is numbers, some is text, and some is true or false.

Integer (int) – whole numbers: 6, 20, -7

Float (float) – numbers with decimals: 3.14, 68.99

String (str) – text inside quotes: "Hello", "Python"

Boolean (bool) – True or False: True, False

For example:

score = 20 # int
temperature = 37.5 # float
username = "Alex" # string
is_logged_in = False # boolean

Why Does This Matter?

Understanding variables and data types is key to writing code that makes sense. If you try to add a string and a number together, it won’t work! Using the right type of data helps your program run without errors.

Quick Takeaways

Variables = boxes to store stuff.
Data types = tell you what kind of stuff goes in the box.
Pick the right type to make your code happy and error-free.

Once you get these basics, you’re ready to start creating real programs. And trust me, it gets even more fun from here!

Conclusion & Next Steps

Now that you know about variables and data types, you’re ready to start coding with confidence!

Store and change data in variables.

Use the right type for your data to avoid errors.

Combine what you’ve learned to create small programs.

💡 Try this:

Ask the user for a friend’s name and age.
Store the answers in variables.
Print a sentence using those variables, like:

"[Name] is [age] years old."

This simple exercise helps you practice variables, data types, and printing output all in one!

“Your coding journey starts here!”🔥

Coding vs Programming: Key Differences for Beginners

Roghaye Mohammadi — Sat, 06 Sep 2025 16:05:43 +0000

Many beginners often think coding and programming are the same. While they are closely related, they represent different levels of working with computers. Understanding this distinction early can significantly impact your learning journey and career growth.

What is Coding?

Coding refers to writing instructions that a computer can directly execute. It focuses on translating ideas into a specific programming language such as Python, Java, or JavaScript.

For example, writing a short Python script to add two numbers is coding:

a = 8
b = 2
print(a + b)

Coding is essentially the act of communication between humans and computers—turning logic into executable commands.

What is Programming?

Programming goes beyond just writing code. It involves:

Understanding the problem

Designing a solution

Planning and organizing steps

Handling edge cases and errors

Writing the code and testing the final system

For instance, building a weather app that shows forecasts, handles user input, and updates data dynamically is programming. It requires not only coding but also problem-solving, system design, and continuous improvement.

Conclusion

Every programmer codes, but not every coder programs.

Coding teaches you how to write instructions for a computer.

Programming teaches you how to build systems, solve problems, and think like a professional software developer.

Recognizing this difference not only clarifies your learning path but also prepares you for professional roles in software development.