Forem: Majeedat Abdulwahab

Building My AI Learning Companion: From Idea to Reality

Majeedat Abdulwahab — Thu, 20 Mar 2025 07:29:29 +0000

Introduction

As a frontend engineer, I’ve always been passionate about crafting visually appealing and user-friendly applications. But beyond aesthetics, I wanted to create something meaningful, something that could enhance learning and make complex topics easier to grasp. That’s how the idea for my AI Learning Companion was born.

Traditional learning can often feel rigid, text-heavy resources, a lack of interactivity, and no real adaptation to an individual’s learning pace. My goal was to build an AI-powered platform that offers personalized, interactive, and engaging learning experiences, a tool that guides users through topics in a way that feels intuitive rather than overwhelming.

This article explores how I built my AI Learning Companion, the challenges I faced, the tech stack choices, and what’s next for this project.

Core Features of My AI Learning Companion

At the heart of this project is the idea that learning should be interactive, adaptive, and engaging. I designed key features to enhance user experience and optimize information retention.

1. Interactive Learning Cards 📚

The learning experience is centered around interactive learning cards, small, digestible content modules that break down complex topics into manageable pieces. Each card includes:

✅ A clear topic title to help users quickly identify subjects.

✅ Five interactive buttons:

Overview: A high-level introduction to the topic.
Concepts: Detailed breakdowns with explanations and examples.
Practice: Hands-on coding challenges or quizzes.
Resources: AI-curated links, videos, and external materials.
Explore: Related topics and next steps.

✅ Prerequisites & key terminologies section to ensure foundational understanding before diving into advanced concepts.

💡 Why It’s Important

Rather than overwhelming learners with large blocks of text, these cards provide structured, bite-sized learning, making it easier to absorb and retain information.

2. AI-Powered Topic Breakdown

When a user searches for a topic like "Introduction to Data Analysis", the AI dynamically generates:

📌 An Overview explaining what the topic is and why it matters.

📌 Key Concepts with real-world examples and use cases.

📌 Related Topics to help users connect ideas and expand their knowledge.

📌 Suggested Next Steps based on user engagement.

The AI acts like a personal tutor, continuously adapting to the learner’s journey rather than providing static content.

3. Learning Pathway Card 🎯

Not all learners start from the same level. That’s why I built a structured learning pathway system that guides users through progressive difficulty levels:

✅ Beginner Level: Foundational topics with introductory quizzes to assess understanding.

✅ Intermediate Level: More in-depth explanations and quizzes to assess understanding.

✅ Advanced Level: Detailed discussions, and expert-level quizzes.

💡 Why It’s Important

Learners get a structured approach instead of jumping into random topics.

4. Progress Tracking 📈

Learning is more effective when users can track progress. The platform includes:

🔹 Saved Progress: Users can revisit previously explored topics.

💡 Why It’s Important

This makes the learning experience personalized, helping users move at their own pace while ensuring they build a solid foundation before progressing.

Challenges & Lessons Learned

1. Creating a Seamless UI/UX 🎨

One of the biggest challenges was designing an intuitive and visually appealing interface while ensuring a smooth experience across devices.

✔ Solution: I used Tailwind CSS and ShadCN for responsive design and accessibility. I also iterated on the layout to make navigation between cards feel natural and seamless.

2. Handling AI-Generated Content Efficiently ⚡

AI-generated responses can be heavy, leading to performance delays. Fetching content dynamically while ensuring a fast and smooth experience was tricky.

✔ Solution: Implemented server-side rendering (SSR) with Next.js and optimized API calls with caching mechanisms to reduce response times.

Tech Stack & Why I Chose It

To build a scalable, efficient, and user-friendly platform, I carefully selected the following technologies:

Frontend: Next.js + Tailwind CSS + ShadCN

Why? Fast performance, SSR capabilities, and smooth navigation.

AI Integration:

Gemini 1.5 Flash and Pro Model for personalized learning content.
Implementation: Built on Vercel’s Next.js AI Chatbot Template, customized for an adaptive learning experience.

What’s Next?

This is just the beginning. Here’s what I plan to add in the next updates:

✅ More AI Models to improve content accuracy.

✅ User Contributions so learners can add their own explanations or resources.

✅ Gamification Elements like streaks, badges, and leaderboards.

✅ Open-Sourcing the project to gather feedback and community contributions.

Final Thoughts

Building the AI Learning Companion has been a deeply rewarding experience. It reinforced my belief that AI can revolutionize education by making learning more interactive, engaging, and personalized.

💡 If you’re thinking about building an AI-powered project, here’s my advice:

Start small, experiment, and be open to learning from your challenges.

I’d love to hear your thoughts, how do you see AI shaping the future of education? Let’s discuss.

Until next time, your friendly neighborhood writer, MJ.

[Boost]

Majeedat Abdulwahab — Wed, 12 Mar 2025 07:21:07 +0000

From Side Projects to Job Offers: The Hidden Value of Your First Tech Projects and Articles

Stanley Azi ・ Mar 12

#webdev #techtalks #sideprojects #productivity

3 JavaScript Features That Make Your Life Easier As a Frontend Developer.

Majeedat Abdulwahab — Tue, 28 Jan 2025 10:03:10 +0000

JavaScript, the backbone of modern web development, constantly evolves to make developers’ lives easier. While many features deserve attention, three stand out for their impact on productivity and code quality. Let’s dive into arrow functions, template literals, and destructuring.

1. Arrow Functions

Arrow functions provide a shorter and sweeter way of writing functions. They are much cleaner looking and clear up some major issues with the this keyword in traditional functions.

How It Works:

// Old Function
function add(a, b) {
    return a + b;
}

// Arrow Function
const add = (a, b) => a + b;

console.log(add(5, 10)); // Output: 15

Why It's Useful:

Conciseness: Less boilerplate code.
Lexical this: Arrow functions inherit this from the surrounding context. That makes them very suitable for event handlers and callbacks.

2. Template Literals

Template literals allow easier manipulation of strings through embedded expressions and multi-line strings.

How It Works:

const name = "MJ";
const message = `Hello, ${name}! Welcome to the world of JavaScript.`;

console.log(message);
// Output: Hello, MJ! Welcome to the world of JavaScript.

Why It's Useful:

Readability: No need for string concatenation.
Multiline Strings: One can make multiline text with ease and without any escape characters.

const poem = `Roses are red,
Violets are blue,
JavaScript is awesome,
And so are you!`;

console.log(poem);

3. Destructuring

Destructuring allows pulling values out of arrays or properties out of objects and assign them to variables in a single step.

How It Works:

// Array Destructuring
const colors = ["red", "green", "blue"];
const [primary, secondary, tertiary] = colors;
console.log(primary); // Output: red

// Object Destructuring
const user = { name: "MJ", age: 26 };
const { name, age } = user;
console.log(name); // Output: MJ

Why It's Useful:

Cleaner Code: Extract only the values you need.
Default Values: Assign default values at the time of destructuring.

const { name = "Guest", age = 18 } = {};
console.log(name); // Output: Guest

Conclusion

Arrow functions, template literals, and destructuring are features of JavaScript that can significantly boost your productivity and code clarity as a frontend developer. Master these features, and not only will you be writing cleaner code, but you will be more productive.

So, the next time you write JavaScript, remember to harness the power of these powerful tools, they're here to make your life easier!

Until next time, your friendly neighborhood writer, MJ.
Bye!!!

What Is Console in JavaScript? And How Can It Help You?

Majeedat Abdulwahab — Mon, 27 Jan 2025 07:20:37 +0000

When it comes to debugging and testing your JavaScript code, the console is one of the most powerful tools at your disposal. It provides a way to interact with your code, examine variables, and understand what’s happening under the hood. In this article, we’ll dive into what the console is, how to use it effectively, and explore some handy tips and tricks.

What Is the Console?

The console is a debugging tool available in modern web browsers. It’s part of the browser’s Developer Tools, often abbreviated as DevTools. The console allows developers to:

Output messages or errors from their code.
Execute JavaScript commands directly.
Inspect objects and log data for debugging purposes.

In most browsers, you can open the console by right-clicking on a webpage and selecting Inspect or by pressing the following shortcuts:

Windows/Linux: Ctrl + Shift + J
Mac: Cmd + Option + J

Why Is the Console Important?

The console helps developers:

1. Debug code efficiently:
You can identify issues in your code by logging values and errors without relying on guesswork.

2. Experiment with JavaScript:
You are able to run JavaScript commands directly in the console to test ideas without modifying your source code.

3. Monitor performance:
Advanced console methods allow you to measure how long certain operations take that help optimize performance.

Basic Console Methods

Some of the commonly used console methods and their usage are shown below.

console.log(): Logs general messages or other variables to the console.

const name = "MJ";
console.log("Hello, " + name + "!");
// Output: Hello, MJ!

console.error(): Logs error messages. It makes them standout in red, depending on the browser.

console.error("An error occurred!");

console.warn(): Logs warning messages. It is mostly styled with a yellow background.

console.warn("This is a warning!");

console.table(): Displays data as a table. It is particularly useful for arrays and objects.

const users = [
{ name: "Alice", age: 25 },
    { name: "Bob", age: 30 }
];
console.table(users);

console.group() and console.groupEnd(): Groups related logs together, making them easier to read.

console.group("User Details");
console.log("Name: Alice");
console.log("Age: 25");
console.groupEnd();

console.time() and console.timeEnd(): estimates the execution time of a task.

console.time("Loop Time");
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("Loop Time");

Tips and Tricks for Using the Console

1. Use string substitution: Instead of concatenating strings, use placeholders like %s for strings and %d for numbers in console.log().

console.log("Hello, %s! You have %d new messages.", "MJ", 5);
// Hello, MJ! You have 5 new messages.

2. Inspecting the DOM Elements: Use console.dir() to view the properties of a DOM element.

const button = document.querySelector("button");
console.dir(button);

3. Filtering Logs: Add labels or use grouping to categorize logs, making debugging easier in larger applications.

4. Clearing the Console: Use console.clear() to clear all previous logs and start fresh.

console.clear();

Common Mistakes to Avoid

- Leaving console.log() in production code: It can make your production logs a mess and sometimes even leak sensitive data.

Solution: Always remove logs before deployment, or use tools like Webpack that can strip them out for you.

- Overusing the console: Relying on console.log() too much can make debugging harder when working on larger projects.

Solution: Use breakpoints in your browser's DevTools for more in-depth debugging.

Conclusion

The console is an essential tool for every JavaScript developer. By understanding its capabilities and using it effectively, you can debug, analyze, and optimize your code with ease. Whether you’re a beginner experimenting with basic commands or an experienced developer using advanced techniques, the console has something to offer.

So, the next time you are debugging your JavaScript code, you shouldn't be strangers with the console; it's there to help you every step of the way!

Until next time, your friendly neighborhood writer, MJ.
Bye!!!

Understanding Variables In JavaScript: Let, Const and Var Explained.

Majeedat Abdulwahab — Fri, 24 Jan 2025 11:22:18 +0000

Variables are one of the foundational concepts in programming, acting as containers for storing data. In JavaScript, there are three ways to declare variables: var, let, and const. Although they sound about the same, each serves a different purpose and has different behaviors. In this article, we are going to look at the differences between let, const, and var, and provide some practical examples to make it clear when to use which.

The Evolution of JavaScript Variables

Before ES6 (ECMAScript 2015), there was only one way to declare variables in JavaScript, and that was with var. However, var tended to have some peculiarity in itself, like function-scoping, hoisting, which created so many unanticipated bugs. With the introduction of let and const in ES6, developers have more control over variable behavior, making it easier to read and less error-prone.

1. var: The Old Guard

var is the original way of declaring variables in JavaScript. It's function-scoped, meaning it's only accessible within the function where it's declared. However, it's not block-scoped, which can lead to issues when working with loops or conditional statements.

Key Characteristics of var:

Function-scoped:

function example() {
    var message = "Hello, world!";
    console.log(message); // Accessible here
}
// console.log(message); // ReferenceError: message is not defined

Hoisting:

Variables declared with var are hoisted to the top of their scope but are initialized with undefined.

console.log(name); // undefined
var name = "John";

Re-declaration allowed:

var age = 25;
var age = 30; // No error
console.log(age); // 30

When to use var:

While already valid, var is generally avoided in modern JavaScript in favor of let or const to prevent issues with scoping and hoisting.

2. let: The Flexible Modern Option

letwas introduced in ES6 as a block-scoped variable declaration. It's similar to var but avoids many of the quirks and pitfalls.

Key Characteristics of let:

Block-scoped: A variable declared with let is only accessible within the block, statement, or expression where it's defined.

if (true) {
    let greeting = "Hi!";
    console.log(greeting); // Accessible here
}
// console.log(greeting); // ReferenceError: greeting is not defined

No hoisting with initialization:

Unlike var, let does not allow access to the variable before it's declared.

console.log(color); // ReferenceError: Cannot access 'color' before initialization
let color = "blue";

Re-declaration not allowed in the same scope:

let score = 10;
// let score = 20; // SyntaxError: Identifier 'score' has already been declared

When to use let:

Use let when you need a variable whose value will change over time or within a specific block.

3. const: The Immutable Choice

const was also introduced with ES6. It is intended for variables which are not to be reassigned. Like let, it is block-scoped and doesn't 'hoist' in the same way that var does.

Key Characteristics of const:

Block-scoped: As with let, const is scoped to the block on which it's defined.

if (true) {
    const pi = 3.14159;
    console.log(pi); // reachable here
}
// console.log(pi); // ReferenceError: pi is not defined

Cannot be reassigned: Once a const variable is declared and set, that variable cannot be reassigned.

const birthYear = 1990;
// birthYear = 2000; // TypeError: Assignment to constant variable.

Objects and arrays are mutable: One important thing is that the reference can't be changed but the contents of objects or arrays declared with const can be modified.

const person = { name: "Alice", age: 25 };
person.age = 26; // This works
console.log(person); // { name: "Alice", age: 26 }

When to use const:

Default to using const for variables that should not be reassigned. This will make your code more predictable and easier to debug.

Comparison Table

Feature	`var`	`let`	`const`
Scope	Function	Block	Block
Hoisting	Yes(initialized to `undefined`)	No	No
Re-declaration	Yes	No	No
Re-assignment	Yes	Yes	No

Best Practices

- Use const by default: It indicates that the variable will not be reassigned and makes the code more robust and predictable, thus more readable.

- Switch to let when re-assignment is necessary: Most variables actually don't change, so only use let for things that do, like counters or state variables.

- Avoid var: Modern JavaScript doesn't really need to use var, given that let and const do a far better job.

Conclusion

Understanding the differences between var, let, and const is crucial in writing clean, efficient, and bug-free code in JavaScript. You will be surprised less often and your code will be more readable if you default to const and only use let when you have to. You can safely leave var in the past.

So, do you have a favorite way of using let, const, or var? Let me know in the comments below!

Till next time, your friendly neighborhood writer, MJ.

What are JavaScript Functions? A Beginners Guide to Writing And Using Them.

Majeedat Abdulwahab — Wed, 22 Jan 2025 07:38:02 +0000

In programming, JavaScript functions are very versatile, handy, and absolutely essential. Whether you are making a calculator or building a web app, functions are your best friend.

But wait, what exactly are functions? Don't worry; I've got you covered! Let's dive into this magical world of reusable code, one step at a time.

What Is a Function, Anyway?

A function is essentially a block of code written with the aim of performing a certain task. You write it once and can call upon it every time you need it.

How to Write a Function

Let's write our first function, step by step.

function greet() {
  console.log("Hello, world!");
}
greet()

Here's what's happening:

function: This keyword tells JavaScript you're about to define a function.
greet: This is the function's name. (It can be almost anything, but keep it descriptive!)
(): These parentheses are for any input the function might need.
{}: Curly braces contain the instructions your function will follow.

When you invoke this function by typing greet() in your console, your computer says with politeness:

Hello, world!

Parameters and Arguments

Functions get even cooler when you give them parameters. Think of these as variables that customize the function's behavior.

function greet(name) {
  console.log(`Hello, ${name}!`);
}

Now, when you invoke the function with a name:

greet("Majeedat");

The output is:
Hello, Majeedat!

Wait, Parameters? Arguments? What's the Difference?

Parameters: These are placeholders you define when declaring the function.
Arguments: These are the actual values you provide when you invoke the function.

Returning a Value

Some functions don't just log messages, they can return something.

function add(a, b) {
  return a + b;
}

When you invoke it:

let result = add(5, 3);
console.log(result);

Output:
8

The return keyword sends a value back to wherever the function was invoked.

Function Expressions

Here’s another way to define functions:

const greet = function(name) {
  console.log(`Hi, ${name}!`);
};

This is called a function expression because you’re assigning a function to a variable.

Arrow Functions

Arrow functions are a modern, shorter way to write functions.

const greet = (name) => {
  console.log(`Hey, ${name}!`);
};

For one-liners, you can even skip the curly braces:

const add = (a, b) => a + b;
console.log(add(2, 4)); // Output: 6

Why Are Functions So Useful?

Reusability: Write once, use everywhere.
Readability: They make your code cleaner and easier to understand.
Modularity: Break your code into small, manageable chunks.

Common Mistakes Beginners Make with Functions

A. Forgetting to Call the Function: Excellent, you have declared a function, but now don't forget to actually invoke it.

   function greet() {
     console.log("Oops, you forgot to call me!");
   }
   // Nothing happens until you do this:
   greet();

B. Mismatched Arguments: This occurs if a function that expects, say, two arguments and you pass in one. Things will not likely work as they should. Here is a simple addition function that, depending on implementation detail, may actually be called a multifunction since it returns the first of a single argument.

function add(a, b) {
    return a + b;
}
console.log(add(5));    // Output: NaN (Not a Number)

C. Infinite Loops: A function that calls itself without an end.

Wrapping Up

JavaScript functions are the backbone of dynamic and interactive web applications. With a little practice, they'll soon become second nature to you.

Now that you’ve got the basics, why not create a function of your own?

Until next time, your friendly neighborhood writer, MJ

Bye!!!

JavaScript Basics: Your First Step Into Web Development

Majeedat Abdulwahab — Tue, 21 Jan 2025 13:10:45 +0000

📚TABLE OF CONTENTS

What is JavaScript
Setting up JavaScript
Basic Syntax and Concepts
Introduction to Control Flow
Why JavaScript matters in Web Development
Conclusion

🖋️ What is JavaScript?

JavaScript is a versatile programming language for the web. It enables developers to create interactive and dynamic webpages. Ever wondered how a button performs an action when clicked? That’s JavaScript at work!

From validating forms to building complete web applications, JavaScript is an essential tool for modern web development.

🛠️Setting up JavaScript

1. In the Browser: You can experiment with JavaScript directly in your browser's console. To open it:

On Windows: Press F12 or Ctrl + Shift + J
On Mac: Press Command + Option + J

Once open, type console.log("Hello, World!"); and press Enter to see your first JavaScript message.

2. In Code Editors: Developers typically write JavaScript in code editors like Visual Studio Code (VS Code). To get started:

Install VS Code.
Create a .html file and include your script using script tags, or create a separate .js file.

Example:

<script>
  console.log("Hello from JavaScript!");
</script>

📖 Basic Syntax and Concepts

1. Variables and Constants
var, let, const: These are used to store values.

let is block-scoped and widely used.
const is for values that don’t change.

Example:

let username = "MJ";
const age = 26;
console.log(`Hello, ${username}! You are ${age} years old.`);

2. Data Types
JavaScript supports several data types:

Primitive types: Numbers, Strings, Booleans, Null, Symbol, BigInt and Undefined.
Complex types: Objects, Arrays. Example:

let isLearning = true; // Boolean
let tools = ["HTML", "CSS", "JavaScript"]; // Array
console.log(tools[0]); // Outputs: HTML

🔁 Introduction to Control Flow

1. If/Else Statements
Use these to run code based on conditions.
Example:

let score = 85;
if (score >= 90) {
  console.log("You got an A!");
} else if (score >= 70) {
  console.log("You passed!");
} else {
  console.log("Keep trying!");
}

2. Loops
Loops help you repeat actions:

For Loop:

for (let i = 1; i <= 3; i++) {
  console.log(`Iteration ${i}`);
}

While Loop

let count = 0;
while (count < 3) {
  console.log(`Count is ${count}`);
  count++;
}

🌟 Why JavaScript matters in Web development

JavaScript powers the web, enabling websites to respond to user actions without reloading.

Enhances user experience with interactivity.
Forms the basis of modern frameworks like React, Angular, and Vue.
Used for building both the frontend and backend (e.g., with Node.js).

JavaScript isn't just limited to websites, it's used in mobile apps and game development.

🔚 CONCLUSION

JavaScript is the language of the web, and mastering its basics sets the foundation for more advanced development. Take your time exploring these concepts and experimenting with your own code.

Next Steps: The next article will focus on JavaScript Functions, an essential building block for writing reusable and efficient code.

Until next time, your friendly neighborhood writer, MJ
Bye!!!!

What is JavaScript? A Beginner's Guide To The Language Of The Web

Majeedat Abdulwahab — Mon, 20 Jan 2025 07:28:59 +0000

If HTML is the bones of a website and CSS is the outfit that makes it look good, JavaScript is the personality. it's what brings a website to life. Without it, your website would be like a mannequin: nice to look at but completely unresponsive when you try to interact with it.

JavaScript: The Magician of the Web

Imagine you're at a fancy restaurant.
HTML is the menu, listing all the mouth-watering options. CSS is the presentation; that food just looks so good, it should be on Instagram. JavaScript is the chef: preparing the food, getting your order to the table.

JS doesn't just cook your food; it makes sure it's piping hot, the drink is chilled, and the dessert explodes with flavor when you bite into it. It's the magic behind buttons that click, forms that validate, and slideshows that slide.

Why Do We Need JavaScript?

Picture this: You’ve built a beautiful website. A visitor lands on it, clicks a button. and nothing happens. They click again. Still nothing. They angrily quit and never return.

JavaScript fixes that. It’s what lets websites:

Respond to clicks and hovers
Fetch data without reloading
Create animations

A Little JavaScript Code, Just Because Seeing Is Believing

// Let's create a button saying hello on click
document.querySelector("button").addEventListener("click", () => {
  alert("Hello, world! ");
});

The document.querySelector finds the button.
The addEventListener listens for the click.
The alert says, “Hey, I’m alive!”

See? A few lines of JS, and your website just learned how to talk.

Fun Facts About JavaScript

It’s Everywhere: JS powers over 98% of all websites.
It's Fast: JavaScript runs right in your browser, with no downloads required.
It's Versatile: Want to build a website, mobile app, or game? JavaScript can do it all.

Wrapping It Up

JavaScript is the heartbeat of the web. It's the difference between static, lifeless websites and dynamic, interactive, delightful experiences.

So whether you're here to change the world with the next big thing or just a random person who is curious about how this whole website thing works, in which case, well, JS is your new best friend.

Until next time, your friendly neighborhood writer, MJ.

10 Frontend Development Mistakes You Are Probably Making (And How To Fix Them)

Majeedat Abdulwahab — Fri, 17 Jan 2025 10:40:46 +0000

Frontend development is one of the fastest-evolving areas of the web, and even seasoned developers make some very common mistakes. Let's look at ten mistakes you might be making and, more importantly, how to fix them to improve your workflow and output.

1. Not Making It Accessible (A11y)

The Mistake:
You may turn away users with disabilities by not taking into consideration accessibility features such as semantic HTML, ARIA roles, and proper contrast ratios.

How to Fix It:

a. Use semantic HTML elements (e.g., button instead of div for clickable elements).

b. Add alt attributes to images.

c. Use tools like Lighthouse or WAVE to audit your site's accessibility.

2. Overusing Divs

The Mistake:
Relying on div tags for everything results in bloated and hard-to-maintain code.

How to Fix It:

a. Replace generic div tags with semantic tags like header, footer, main, and section.

b. Consider what the content is trying to convey before deciding which element to use.

3. Not Optimizing Images

The Mistake:
Using uncompressed or wrongly sized images slows down your website.

How to Rectify:

a. Use tools like TinyPNG or ImageOptim for image compression.

b. Serve responsive images by using the picture element with srcset.

c. Use modern formats like WebP.

4. Not Considering Browser Compatibility

The Error:
You think your code would magically work on every browser.

How to Fix It:

a. Testing of your website should be carried out on major browsers: Chrome, Firefox, Safari, and Edge.

b. Conduct cross-browser testing on BrowserStack or LambdaTest.

c. Write CSS with fallback options and check browser support with Can I Use.

5. Hardcoding Breakpoints

The Mistake:
You define breakpoints manually, without keeping scalability in mind, which can lead to an inconsistent layout.

How to Fix It:

a. Use a mobile-first approach in your CSS.

b. Instead of fixed values, use relative units such as em, rem, %.

c. Use frameworks like Tailwind CSS or Bootstrap for consistent breakpoints.

6. Poor Folder and File Structure

The Mistake:
Dumping all the files into one folder makes your project hard to navigate and maintain.

How to Fix It:

a. Structure your project into logical folders, such as assets, components, and utils.

b. Use naming conventions, such as PascalCase for components and kebab-case for CSS.

c. Clean up unused files regularly.

7. Inline Styling Overuse

The Mistake:
Using inline styles for most of your CSS results in repetitive and unscalable code.

How to Fix It:

a. Write CSS in external files or with CSS-in-JS solutions such as styled-components.

b. Use CSS classes to allow for reuse.

c. Separation of Concerns: HTML for structure, CSS for styling, and JavaScript for behavior.

8. Not Utilizing Version Control

The Mistake:
Not using version control results in losing track of changes and creating the possibility for overwrites.

How to Fix It:

a. Utilize Git for version control.

b. Commit often, along with clear commit messages.

c. Collaborate using platforms such as GitHub or GitLab.

9. Skipping Code Reviews

The Mistake:
Not reviewing your code lets bugs and bad practices go unnoticed.

Solution:

a. Pair-programming, or using GitHub's pull request review system.

b. Ask for constructive feedback in your team.

c. Reviews are an opportunity to learn, not a source of criticism.

10. Not Watching Performance Metrics

The Mistake:
Just making the feature work without thinking about how well it works, will result in slow loading web pages.

Solution:

a. Use something like Google PageSpeed Insights or Lighthouse to identify bottlenecks.

b. Minify CSS, JavaScript, and HTML files.

c. Lazy loading of images and scripts.

Conclusion

We all make mistakes, but fixing them makes all the difference. Remember these fixes while working on your next or current project for an accessible, high-performance, and maintainable web application.

Until next time, your friendly neighborhood writer, MJ.

The Roadmap to Becoming a Frontend Developer in 2025.

Majeedat Abdulwahab — Wed, 15 Jan 2025 18:39:40 +0000

In today's technology-driven world, the role of a frontend developer keeps on changing, and hence, the field is interestingly challenging to break into. Whether you're starting your career or growing in frontend development in 2025, this roadmap will outline the necessary skills, tools, and strategies for your success.

1. Understand the Basics

Before getting into some complex frameworks and tools, ensure you have a strong foundation in the core building blocks:

HTML: Semantic HTML and layout of web pages should be learned.
CSS: Get comfortable with layouts(Flexbox and Grid), animations and responsive design.
JavaScript: Master the fundamentals, including variables, loops, functions, and events.

2. Version Control

Version control systems like Git will be super vital in collaboration or project management aspects. Learn how to:

Initialize repositories.
Commit changes.
Work with branches.
use GitHub or GitLab for collaboration.

3. Responsive Design

In view of the surge in different device variations, knowing how to work responsively is going to be critical:

Utilize media queries.
The mobile-first versus desktop-first approaches should be taken under consideration.
Test on many devices and/or various screen sizes.

4. JavaScript Frameworks and Libraries

You do not necessarily need to learn them all, but mastering at least one will definitely make you outstanding among the rest:

React.js : The most well-known library used for creating user interfaces.
Vue.js or Svelte: If React is not your cup of tea, look into these as alternatives.

5. CSS Frameworks

CSS frameworks can expedite development with consistency:

Learn Tailwind CSS for utility-first design.
Look into Bootstrap for traditional grid-based layouts.

6. Package Managers and Build Tools

Get accustomed to tools that make development faster:

Node.js and npm/yarn for package management.
Vite or Webpack for bundling assets.

7. APIs and Asynchronous JavaScript

This is important to grasp in terms of fetching and updating data:

Learn to work with REST APIs and GraphQL.
Understand promises, async/await, and error handling.

8. Version 2.0: Accessibility and Performance

As you go along, focus on making your applications accessible and performant:

Accessibility: Follow WCAG guidelines and use tools like Lighthouse.
Performance: Optimize assets, lazy load images, and use techniques like code splitting.

9. Soft Skills and Networking

Technical skills are important, but soft skills and networking are just as crucial:

Communicate effectively with designers and backend developers.
Create a portfolio with your best work.
Attend meetups, developer communities, and discussions on LinkedIn and Twitter.

10. Keep Learning

Frontend Development is under continuous evolution. Keep yourself updated:

By following industry blogs and newsletters.
Practicing with real-world projects.
Experimenting with new tools and technologies.

CONCLUSION

Becoming a frontend developer in 2025 requires dedication, adaptability, and a thirst for learning. Follow this roadmap and keep sharpening your skills to be well on your way to a successful and fulfilling career.

Good luck, and remember: the best time to start is now!

Until next time, your friendly neighborhood writer, MJ
Bye!!!

From Microbiologist To Frontend Developer: 3 Things I Learned Along The Way.

Majeedat Abdulwahab — Mon, 13 Jan 2025 09:02:32 +0000

A few years ago, I was knee-deep in microbiology, studying microorganisms, conducting experiments, and analyzing data. Fast forward to today, and I’ve completely switched gears to frontend development. This transition from microbiology to frontend development wasn’t easy, but it was definitely worth it.

Below, I'll share three important things I learned on the way and how skills from my previous career helped me to feel good in this new world of coding.

1. Embracing Problem-Solving:

Problem-solving was at the core of everything I did in microbiology. Whether it was troubleshooting a lab experiment or analyzing complex data, I had to identify the issue, break it down, and find a solution. That same approach is incredibly useful in frontend development.

In all ways, coding is one big problem-solving exercise. Debugging, designing user-friendly interfaces, and optimizing websites require the same power of critical thinking for effective problem-solving. As time passed, I found that the experience of seeking to figure out solutions in the lab transferred well to my development work.

2. Learning to Learn (and Unlearn):

In microbiology, there was a learning curve. With time, I gained knowledge and experience, but this is not quite how it works in the tech world. Things move fast, and new frameworks, libraries, and best practices are coming out all the time. This meant I had to quickly adapt and learn how to learn and unlearn.

In my new career, I had to let go of rigid ways learned in my previous field. It was not the traditional, textbook approach that applied here. I had to learn to love the chaos of a rapidly changing field. That meant learning how to teach myself, keep up with trends, and experiment with new technologies.

Another important lesson learned is that it is okay not to know everything. As a microbiologist, I was the expert in my field. In frontend development, there is always something to learn, and I had to get into uncertainty, grow from it. Online courses, coding challenges, and hands-on projects became my best friends while learning the ropes.

3. Attention to Detail:

Microbiology taught me the importance of accuracy and attention to detail. Small mistakes in the lab could lead to faulty data, wrong conclusions, or even failed experiments. The same mindset applies to frontend development, where precision is key.

Everything matters from ensuring pixel-perfect designs down to writing clean, efficient code that makes a big difference in user experience and overall functionality. The little things, like spacing and alignment, really seemed to make a big difference in just how polished my final product looked in some of my first projects.

Besides, attention to detail is not confined to just design. Ensuring cross-browser compatibility, optimization of page load speeds, and making things interactive and accessible are all but a few key details that go into creating a seamless user experience.

CONCLUSION:

Although it wasn't an easy transition in switching careers, I came to learn that the skills I had acquired through microbiology were transferable and not just valued, but highly valuable in the world of front-end development. Problem-solving, continuous learning, and attention to detail are talents that have crossed over into both worlds.

If you're considering a career change or feel hesitant to step into something new, remember that often your skills are more transferable than you may think. It's not about starting from scratch, it's about building on what you've learned and applying it in new ways.

As I keep growing as a developer, I'm really excited about the future and what it holds. From being a microbiologist to frontend developer, my journey has been one of learning and if I had to choose the most important thing I've learned, it would be this:

the skills you bring with you are just as important as the new ones you'll acquire.

If you’re standing on the edge of a similar leap, trust yourself, take the first step, and embrace the possibilities ahead. You just might surprise yourself with how far you can go.

Until next time, your friendly neighborhood writer, MJ
Bye!!!

5 Free Resources to Learn Frontend Development

Majeedat Abdulwahab — Wed, 08 Jan 2025 08:17:49 +0000

Frontend development is one of the most exciting fields in tech because it combines creativity with problem-solving to build user-friendly interfaces. Be it designing visually appealing websites or creating seamless user experiences, it is important to master frontend skills. But the journey can be overwhelming, especially when one is not sure where to start.

The good news is you do not have to spend a lot to get started. Here are five fantastic free resources that can get you on your way:

1. FreeCodeCamp

FreeCodeCamp is a non-profit platform that provides full curriculum support for aspiring developers. It covers everything from HTML and CSS basics to JavaScript, responsive web design, and more advanced topics.

Why it is great:

Interactive coding exercises and real-world projects.
A well-structured path where certifications can be obtained to demonstrate progress.
Community support via active forums and chat groups.