The latest articles on DEV Community by Ahmad Hobab (@ahmad_hobab_c55b903e2502b). https://dev.to/ahmad_hobab_c55b903e2502b https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4166930%2F0d552813-1930-4468-a8ea-96f0a41f980d.png https://dev.to/ahmad_hobab_c55b903e2502b en Ahmad Hobab Tue, 06 Oct 2026 16:41:15 +0000 https://dev.to/ahmad_hobab_c55b903e2502b/hi-im-new-here-1341 https://dev.to/ahmad_hobab_c55b903e2502b/hi-im-new-here-1341 <p>My Journey as a Front-End Developer 🚀<br> Hello everyone! 👋<br> My name is Mohammad, and I'm a developer passionate about building websites and applications and learning new technologies.<br> I'm currently focusing on Front-End Development, where I'm learning and working with technologies such as HTML, CSS, JavaScript, and modern web frameworks.<br> I enjoy turning ideas into functional and user-friendly interfaces. I'm also interested in software development in general and continuously improving my programming skills.<br> 🛠️ What I'm Learning<br> HTML &amp; CSS<br> JavaScript<br> Responsive Web Design<br> Git &amp; GitHub<br> React / Next.js<br> Algorithms and Data Structures<br> Software Development<br> 💻 My Projects<br> One of the best ways I learn is by building projects. Instead of only studying theory, I try to apply what I learn by creating real applications and experimenting with different technologies.<br> Here is an example from one of my projects:<br> &lt;!DOCTYPE html&gt;<br> <br> <br> <br> <br> </p> Smart Expense Tracker <br> &lt;br&gt; :root {&lt;br&gt; --primary: #4f46e5;&lt;br&gt; --success: #10b981;&lt;br&gt; --danger: #ef4444;&lt;br&gt; --background: #f3f4f6;&lt;br&gt; --text: #1f2937;&lt;br&gt; }&lt;/p&gt; &lt;div class="highlight"&gt;&lt;pre class="highlight plaintext"&gt;&lt;code&gt; body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--background); color: var(--text); margin: 0; padding: 20px; display: flex; justify-content: center; } .container { width: 100%; max-width: 500px; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } h1 { text-align: center; color: var(--primary); } .balance-box { text-align: center; background: #eeebff; padding: 20px; border-radius: 8px; margin-bottom: 20px; } .balance-box h2 { margin: 0; font-size: 2rem; color: var(--primary); } .form-group { margin-bottom: 15px; } label { display: block; margin-bottom: 5px; font-weight: bold; } input, select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } button { width: 100%; padding: 12px; background: var(--primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: bold; } button:hover { background: #4338ca; } .list-title { margin-top: 30px; border-bottom: 2px solid #eee; padding-bottom: 10px; } ul { list-style: none; padding: 0; } li { display: flex; justify-content: space-between; padding: 12px; background: #f9fafb; margin-bottom: 8px; border-radius: 6px; align-items: center; border-left: 5px solid #ccc; } li.income { border-left-color: var(--success); } li.expense { border-left-color: var(--danger); } .delete-btn { background: var(--danger); color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; } &amp;lt;/style&amp;gt; &lt;/code&gt;&lt;/pre&gt;&lt;/div&gt; &lt;p&gt;&lt;/head&gt;&lt;br&gt; &lt;body&gt;&lt;/p&gt; &lt;div class="container"&gt; &lt;h1&gt;Smart Budget&lt;/h1&gt; &lt;div class="balance-box"&gt; &lt;p&gt;Total Balance&lt;/p&gt; &lt;h2 id="balance"&gt;\$0.00&lt;/h2&gt; &lt;/div&gt; &lt;form id="exp-form"&gt; &lt;div class="form-group"&gt; &lt;label for="text"&gt;Description&lt;/label&gt; &lt;input type="text" id="text" placeholder="e.g., Salary, Groceries, Gas..." required&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="amount"&gt;Amount&lt;/label&gt; &lt;input type="number" id="amount" placeholder="Enter amount..." required&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="type"&gt;Type&lt;/label&gt; &lt;select id="type"&gt; &lt;option value="income"&gt;Income (+)&lt;/option&gt; &lt;option value="expense"&gt;Expense (-)&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;button type="submit"&gt;Add Transaction&lt;/button&gt; &lt;/form&gt; &lt;h3 class="list-title"&gt;Transaction History&lt;/h3&gt; &lt;ul id="list"&gt;&lt;/ul&gt; &lt;/div&gt; &lt;script&gt; const balance = document.getElementById('balance'); const list = document.getElementById('list'); const form = document.getElementById('exp-form'); const text = document.getElementById('text'); const amount = document.getElementById('amount'); const type = document.getElementById('type'); // Get data from browser local storage let transactions = localStorage.getItem('transactions') !== null ? JSON.parse(localStorage.getItem('transactions')) : []; function addTransactionDOM(transaction) { const sign = transaction.type === 'income' ? '+' : '-'; const item = document.createElement('li'); item.classList.add(transaction.type); item.innerHTML = ` ${transaction.text} &lt;span&gt;${sign}$${Math.abs(transaction.amount)}&lt;/span&gt; &lt;button class="delete-btn" onclick="removeTransaction(${transaction.id})"&gt;Delete&lt;/button&gt; `; list.appendChild(item); } function updateValues() { const amounts = transactions.map(t =&gt; t.type === 'income' ? t.amount : -t.amount); const total = amounts.reduce((acc, item) =&gt; (acc += item), 0).toFixed(2); balance.innerText = `$${total}`; } function init() { list.innerHTML = ''; transactions.forEach(addTransactionDOM); updateValues(); } form.addEventListener('submit', function(e) { e.preventDefault(); const transaction = { id: Math.floor(Math.random() * 100000000), text: text.value, amount: +amount.value, type: type.value }; transactions.push(transaction); addTransactionDOM(transaction); updateValues(); localStorage.setItem('transactions', JSON.stringify(transactions)); text.value = ''; amount.value = ''; }); window.removeTransaction = function(id) { transactions = transactions.filter(t =&gt; t.id !== id); localStorage.setItem('transactions', JSON.stringify(transactions)); init(); } init(); &lt;/script&gt; &lt;p&gt;&lt;/body&gt;&lt;br&gt; &lt;/html&gt;&lt;br&gt; I&amp;#39;m sharing my learning journey here because I believe that building, making mistakes, and continuously learning are some of the best ways to become a better developer.&lt;br&gt; I&amp;#39;m looking forward to sharing more projects, tutorials, and things I learn along the way.&lt;br&gt; Thanks for reading! 🚀&lt;br&gt; Feel free to connect with me and follow my journey.&lt;/p&gt; beginners frontend learning webdev