Skip to content
View basmla-mohamed's full-sized avatar

Block or report basmla-mohamed

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Content in all repositories owned by your account will be closed.
Maximum 250 characters. Please don’t include any personal information such as legal names or email addresses. Markdown is supported. This note will only be visible to you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
basmla-mohamed/README.md

ABOUT ME

Front-End Developer identity

πŸ’  Basmala Mohamed β€” Building for the Web.

I am a Computer Science & Artificial Intelligence student, Front-End Developer| Aspiring Full-Stack Engineer passionate about crafting digital experiences that bring together visual clarity, interactive functionality, and thoughtful user experience.

My approach to development goes beyond writing code. I enjoy understanding how interfaces work, exploring different solutions, and turning concepts into responsive websites that are both practical and engaging.

I see every project as an opportunity to refine my skills, experiment with ideas, and develop a deeper understanding of modern web technologies.

THE WAY I BUILD...

01

STRUCTURE

Building clear, organized foundations with semantic HTML and maintainable code.

02

EXPERIENCE

Creating responsive layouts, thoughtful interactions, and consistent visual experiences.

03

EVOLUTION

Learning new technologies, refining solutions, and improving through hands-on projects.

MY DEVELOPMENT TOOLKIT

HTML5 CSS3 JavaScript Bootstrap Sass jQuery TypeScript Angular


Developer principles

01 β€” BEYOND THE INTERFACE ✦

BASMALA MOHAMED

FRONT-END DEVELOPER Β· CREATIVE PROBLEM SOLVER

I turn ideas into interactive digital experiences.


Explore my GitHub Connect on LinkedIn

Developer coding animation

01.1 β€” MY DEVELOPER DNA

I’m passionate about the space where design meets functionality.

I enjoy crafting responsive interfaces, bringing pages to life with JavaScript, and integrating APIs to transform static layouts into dynamic experiences.

My focus is on building projects that combine thoughtful UI, meaningful interactions, and clean, organized code.


01.2 β€” WHAT I BRING TO THE SCREEN

✦ RESPONSIVE UI   ✦ INTERACTIVE UX



✦ API INTEGRATION   ✦ CREATIVE LAYOUTS



✦ JAVASCRIPT LOGIC   ✦ CONTINUOUS LEARNING

Not just pixels on a screen β€” but experiences built with purpose.

Always exploring new possibilities. Always building what comes next.

02 My Development Universe 🌌

Front-End Skills and Tools



THE CREATIVE SIDE 🎨 THE LOGICAL SIDE βš™οΈ THE GROWTH SIDE πŸš€
UI & Visual Design JavaScript Logic Continuous Learning
Responsive Layouts DOM Manipulation Angular Exploration
Styling & Animation Interactive Interfaces Better Code Practices

Technology Stack

DESIGN Β· STRUCTURE Β· RESPONSIVENESS

01.1 Β  MARKUP & VISUAL ENGINEERING

HTML5 CSS3 Bootstrap Sass

Turning visual concepts into responsive, accessible interfaces.

  • Responsive layouts across different screen sizes.
  • Reusable styles and structured CSS architecture.
  • Modern visual effects, transitions, and UI details.
01.2 Β  INTERACTION & LOGIC

JavaScript jQuery TypeScript

Bringing interfaces to life through logic and interaction.

  • DOM manipulation and event-driven behavior.
  • Dynamic content and API integration.
  • TypeScript fundamentals and type-safe code.
01.3 Β  COMPONENT-BASED DEVELOPMENT

Angular

Exploring a more structured approach to building web applications.

  • Component-based UI development.
  • Reusable application architecture.
  • TypeScript workflows and maintainable code.
01.4 Β  ENGINEERING WORKFLOW

Gulp Git GitHub VS Code

Keeping projects organized, trackable, and easier to maintain.

  • Version control with Git and GitHub.
  • Project organization and development workflows.
  • Exploring task automation with Gulp.

03 MY PROJECTS

Project gallery animation

Every project has a story. Here's where mine unfolds.

From elegant interfaces to interactive applications β€” each project represents an opportunity to experiment, solve problems, and grow as a developer.**

✦ 01 / Cartelle

Cartelle

πŸ›οΈ A Modern E-Commerce Experience

A fashion-inspired shopping experience focused on polished visuals, organized product displays, and interactive shopping features.

Highlights

  • Product browsing and category sections.
  • Interactive cart and favorites features.
  • Responsive layouts and dynamic UI behavior.

Built With

HTML CSS Bootstrap Sass JavaScript jQuery

β†— Live Demo

✦ 02 / Bookstore

bookStore

πŸ“˜ A Creative Digital Bookstore

A book-inspired digital experience designed to bring readers closer to their next favorite story through elegant visuals, organized collections, and a warm reading atmosphere.

Highlights

  • Organized book displays and intuitive browsing.
  • Elegant typography and a refined visual identity.
  • Interactive user interface and responsive layouts.

Built With

HTML CSS JavaScript

β†— Live Demo

✦ 03 / Drop Egg Game

ChickensGame

πŸ₯š An Interactive Egg-Catching Challenge

A playful browser game where quick reactions and timing create an engaging experience, featuring animated gameplay, score tracking, and interactive controls.

Highlights

  • Real-time score tracking and best-score records.
  • Interactive gameplay with multiple lives.
  • Pause, restart, and sound controls.
  • Animated visuals and responsive design.

Built With

HTML CSS Bootstrap JavaScript Sass jQuery

β†— Play Game

✦ 04 / Delici

Delici

🍽 A Refined Digital Dining Experience

A modern restaurant website designed to showcase delicious dishes through elegant visuals, engaging layouts, and a welcoming dining atmosphere.

Highlights

  • Attractive food presentation and menu sections.
  • Responsive layouts for different screen sizes.
  • Interactive UI components and smooth animations.
  • Modern design focused on visual storytelling.

Built With

HTML CSS Bootstrap JavaScript jQuery Sass

β†— Live Demo

✦ 05 / L10N House

L10House

🌐 A Corporate Digital Experience

A modern corporate website designed to present company information through a clean interface, dynamic content, and polished visual elements.

Highlights

  • Dynamic data integration using external APIs.
  • Interactive theme switching.
  • Responsive layouts and animated UI elements.

Built With

HTML CSS JavaScript jQuery Sass

β†— Live Demo

✦ 06 / Nike

nike

πŸ‘Ÿ A Bold Sportswear Experience

A product-focused website inspired by athletic style, combining bold visuals, modern layouts, and an engaging browsing experience.

Highlights

  • Product-focused presentation.
  • Modern layouts and responsive styling.
  • Interactive elements and visual details.

Built With

HTML CSS JavaScript

β†— Live Demo

✦ 07 / Kaffa

kaffa

β˜• A Warm Coffeehouse Experience

A coffee-shop website concept built around inviting visuals, thoughtful layouts, and a welcoming cafΓ© atmosphere.

Highlights

  • Coffee-inspired visual identity.
  • Organized content and product presentation.
  • Responsive interface design.

Built With

HTML CSS Bootstrap JavaScript

β†— Live Demo

✦ 08 / Dine-Out

dine-out

🍽️ A Modern Restaurant Discovery Experience

A restaurant website concept focused on presenting dining options through attractive visuals, organized sections, and a smooth browsing experience.

Highlights

  • Restaurant and food presentation.
  • Responsive layouts for multiple devices.
  • Interactive interface elements.
  • Clear content structure and modern styling.

Built With

HTML CSS JavaScript Bootstrap

β†— Live Demo

✦ 09 / Gym Plus

gym-plus

πŸ’ͺ A Powerful Fitness Experience

A fitness website concept designed to present workout-related content through bold visuals, energetic layouts, and a modern user interface.

Highlights

  • Fitness-focused sections and content presentation.
  • Bold visual identity and structured layouts.
  • Responsive design for different screen sizes.
  • Interactive UI elements.

Built With

HTML CSS Bootstrap

β†— Live Demo

✦ 10 / News Website

News

πŸ“° A Modern Digital News Platform

A dynamic news website powered by external APIs to fetch and display real-time news data. Built with a clean editorial layout, organized content sections, and a responsive interface to make browsing the latest news smooth, clear, and user-friendly.

Highlights

  • Fetching news articles dynamically using external APIs
  • Displaying up-to-date news content
  • Organized news sections for easy browsing
  • Responsive design across different screen sizes
  • Dynamic content rendering with JavaScript

Built With

HTML CSS JavaScript Bootstrap

β†— Live Demo

✦ 11 / Fokir Proffisional Portolio

fokir

🎨A Modern Personal Portfolio

A responsive personal portfolio website designed to showcase a creative professional's profile, services, projects, testimonials, and blog posts. Built with a clean layout, elegant styling, and responsive design to deliver a smooth browsing experience across different screen sizes.

Highlights

  • Personal profile and About section
  • Services and portfolio showcase
  • Project gallery with interactive hover effects
  • Testimonials and blog sections
  • Contact section for inquiries
  • Responsive layout for different screen sizes

Built With

HTML CSS Bootstrap

β†— Live Demo

πŸ’ͺ 12 / Gym Website

GYM

πŸ‹οΈβ€β™‚οΈ A Modern Fitness Website

A responsive gym website designed to showcase fitness programs, workout services, and membership options through a bold and engaging interface. Built with a modern layout and responsive styling to deliver a smooth user experience across different screen sizes.

Highlights

  • Modern and attractive fitness-themed design
  • Workout programs and fitness services
  • Responsive layout for different screen sizes
  • Interactive elements and hover effects
  • Organized sections for easy navigation

Built With

HTML CSS

β†— Live Demo

✨ More projects. More ideas. More to discover.

Explore My Projects Β 

LinkedIn Profile

Decorative divider

04 β€” Inside My Front-End Toolkit

Technologies, tools, and concepts I use to turn ideas into interactive web experiences.

🌐 01 / Web Development

Building semantic layouts, responsive interfaces, reusable styles, and consistent designs across screen sizes.

HTML5
HTML5
CSS3
CSS3
Bootstrap
Bootstrap
Sass
Sass

🧠 02 / JavaScript & Interactivity

Working with DOM manipulation, event handling, interactive components, form validation, and browser storage.

JavaScript
JavaScript
jQuery
jQuery

πŸ”Œ 03 / APIs & Dynamic Data

Exploring asynchronous JavaScript, external data integration, dynamic rendering, and search and filtering functionality.

REST APIs
REST APIs
JSON
JSON
Fetch API
Fetch API

πŸ…°οΈ 04 / Modern Front-End

Expanding my knowledge of typed JavaScript, component-based architecture, data binding, services, and routing.

TypeScript
TypeScript
Angular
Angular

πŸ› οΈ 05 / Development Workflow

Using version control, project organization, debugging, and development tools to build and maintain projects.

Git
Git
GitHub
GitHub
VS Code
VS Code
Gulp
Gulp

05 β€” My Development Philosophy πŸ’Ž

Development philosophy animation

01 / EXPLORE πŸ”

Stay curious.

Discover new ideas, understand the fundamentals, and explore how modern web technologies work together.

02 / EXPERIMENT πŸ§ͺ

Learn by doing.

Test ideas, try different approaches, and turn theory into practical experience through projects.

03 / CREATE 🎨

Build with purpose.

Transform ideas into responsive, interactive, and user-friendly digital experiences.

04 / REFINE ♻️

Make every iteration better.

Debug, improve structure, refine details, and keep learning from every challenge.

A working solution is a beginning. Understanding it, refining it, and making it better is the journey.

✦ 06 β€” CURRENTLY IN PROGRESS

Decorative divider

πŸš€ LEARNING β€’ BUILDING β€’ EVOLVING
Expanding my skills and turning knowledge into real-world projects.

✦ LEARNING PATH 🎯 CURRENT DIRECTION
πŸ…°οΈ Angular Strengthening my foundation in modern frontend development
πŸ”· TypeScript Writing more reliable, readable, and maintainable code
🌐 API Integration Building dynamic interfaces powered by external data
🧩 Code Architecture Exploring reusable components and scalable project structures
🀝 Open Source Learning collaboration and contributing to developer communities

🎯 THE NEXT MILESTONE

Learn Build Improve

From learning concepts to building polished, practical web applications.
Every project is an opportunity to learn, experiment, and grow as a developer.

✧ Consistency over perfection. Progress over stagnation. ✧

08 β€” Let's Build Something Meaningful 🀝

Collaboration animation

I'm always happy to connect with fellow developers, exchange ideas, learn from different perspectives, and explore opportunities to build meaningful things together.


Keep exploring. Keep creating. Keep evolving.

Gradient divider

✦ Turning curiosity into code, and ideas into experiences. ✦

Explore my GitHub Connect on LinkedIn

Animated profile footer

Pinned Loading

  1. Cartella Cartella Public

    Cartella is a modern, responsive online store featuring dynamic product listings and an interactive shopping cart, built with JavaScript, jQuery, Bootstrap and SCSS.

    CSS 1

  2. Chickens-Game Chickens-Game Public

    Interactive browser-based arcade game built with JavaScript, jQuery, Bootstrap and SCSS, featuring a mouse-controlled basket, a lives system and score records.

    CSS 1

  3. Dine-Out Dine-Out Public

    A sleek restaurant discovery website that makes finding and exploring places to eat quick and effortless. Built with html.css,bootstrap

    CSS

  4. L10house L10house Public

    Modern, responsive corporate website for L10N House featuring API-driven service cards with detail popups, dark mode and a smooth page loader, built with JavaScript, jQuery, Bootstrap and SCSS.

    CSS

  5. Nike Nike Public

    Modern, responsive product landing page inspired by Nike, featuring a hero section, product showcase and smooth interactions, built with JavaScript, jQuery, Bootstrap and SCSS.

    CSS