منشور لينكد ان

بتاريخ 32 دقائق مضت قال Ibrahim Almahdy:

الحمد لله الذي بنعمته تتم الصالحات.

﴿وَمَا تَوْفِيقِي إِلَّا بِاللَّهِ ۚ عَلَيْهِ تَوَكَّلْتُ وَإِلَيْهِ أُنِيبُ﴾
سورة هود – الآية 88

لقد أتممت دورة Front-End Web Development من أكاديمية حسوب.

كانت رحلة كبيرة ومليئة بالتعلم والمشاريع والعمل الجاد. بدأت خلالها بتعلم أساسيات تطوير الويب مثل HTML وCSS وJavaScript، ثم تعلمت Bootstrap، وقمت ببناء أكثر من 5 مشاريع Landing Pages متنوعة، من بينها صفحات لمنتجات وشركات وتطبيقات ومواقع شخصية.

بعد ذلك تعلمت Sass (SCSS) وقمت ببناء متجر إلكتروني، كما عملت على تطوير Admin Dashboard، وبناء واجهة مستخدم تشبه YouTube، وتطوير موقع إخباري.

وبعد إتمام الجزء التدريبي، دخلت الاختبار النهائي، حيث قام المدرب باختباري في التقنيات التي تعلمتها والمشاريع التي قمت بتنفيذها، ثم طلب مني تنفيذ مشروع تخرج لمقهى قهوة.

مشروع التخرج — BrewNest

كان المطلوب تنفيذ مشروع لمقهى قهوة مكون من 8 صفحات، مع تحديد أسماء الصفحات المطلوبة، ولكن لم يتم إعطائي أي تصميم جاهز باستخدام Figma أو أي Template جاهز.

بل ترك لي المدرب مساحة كاملة للتفكير والإبداع، وقال لي:

"سأدع المشروع لخيالك."

ومن هنا بدأت في بناء المشروع بالكامل بنفسي؛ بداية من تخطيط هيكل الموقع، واختيار الألوان، وتصميم الواجهة، وتحديد شكل الأقسام، وتنظيم الصفحات، وحتى تنفيذ التفاصيل البرمجية.

قمت ببناء BrewNest، وهو موقع Coffee Shop متجاوب بالكامل ومتعدد الصفحات.

ومن الصفحات التي قمت بتنفيذها:

Home

Products

About

Coffee

Cappuccino

Turkish Coffee

Distributors

Contact

كما قمت بتطوير المشروع بحيث يدعم اللغة العربية والإنجليزية، مع دعم اتجاهي RTL وLTR، وإمكانية التبديل بين اللغتين.

وقمت أيضًا باستخدام Local Storage لحفظ اللغة التي اختارها المستخدم، بحيث عند العودة إلى الموقع مرة أخرى يتم الاحتفاظ باللغة التي كان يستخدمها.

ويتضمن المشروع العديد من المميزات، منها:

Responsive Design

Arabic & English Support

RTL & LTR Support

Dynamic Language Switching

Local Storage

Hero Carousel

Product Sections

Individual Product Pages

Customer Reviews

Similar Products

Contact Form Validation

Newsletter Validation

Google Maps Integration

Bootstrap Components

Organized SCSS Architecture

Modular JavaScript

ومن أكثر الأشياء التي أعتز بها في مشروع التخرج أنه لم يكن مبنيًا على تصميم Figma جاهز أو Template جاهز، وإنما قمت بتخطيط وتصميم وتنفيذ المشروع بنفسي، بداية من اختيار الألوان وشكل الواجهة وتوزيع الأقسام، وصولًا إلى كتابة الكود وربط الصفحات وتنفيذ الوظائف المختلفة.

كانت تجربة مهمة جدًا بالنسبة لي، لأنها جعلتني لا أكتفي بتطبيق تصميم موجود، وإنما أفكر في كيفية تحويل فكرة إلى مشروع متكامل من البداية وحتى التنفيذ.

أتوجه بالشكر إلى أكاديمية حسوب والمدربين على هذه التجربة.

الحمد لله على إتمام هذه المرحلة.

BrewNest — Graduation Project

Live Demo:
https://ibrahim-almahdy.github.io/BrewNest/

GitHub Repository:
https://github.com/Ibrahim-Almahdy/BrewNest

#FrontendDevelopment #FrontendDeveloper #JavaScript #WebDevelopment #Programming

Alhamdulillah for completing this journey.
(وَمَا تَوْفِيقِي إِلَّا بِاللَّهِ ۚ عَلَيْهِ تَوَكَّلْتُ وَإِلَيْهِ أُنِيبُ)
سورة هود – الآية 88

I have completed the Front-End Web Development course at Hsoub Academy | أكاديمية حسوب.
It was a long journey filled with learning, projects, and hard work. I learned HTML, CSS, JavaScript, and Bootstrap, and built more than 5 Landing Pages for products, companies, applications, and personal websites.
I then learned Sass (SCSS), built an e-commerce store, developed an Admin Dashboard, a YouTube-like UI, and a news website.
After completing the training, I took the final exam, where the trainer evaluated my knowledge of the technologies I learned and the projects I built. I was then asked to create a graduation project for a coffee shop.
Graduation Project — BrewNest
The project had to be an 8-page coffee shop website. The required page names were provided, but no Figma design or ready-made template was given.
Instead, the trainer gave me complete freedom to think and create, saying:
"I’ll leave the project to your imagination."
So I planned and built the entire project myself — from the structure, colors, and UI to the sections, pages, and implementation.
BrewNest is a fully responsive, multi-page coffee shop website consisting of:
Home
Products
About
Coffee
Cappuccino
Turkish Coffee
Distributors
Contact
The website supports Arabic and English, with RTL/LTR layouts and dynamic language switching. I also used Local Storage to save the user's language preference for future visits.
Key features include responsive design, multilingual support, Hero Carousel, product sections, individual product pages, customer reviews, similar products, form validation, Google Maps integration, Bootstrap components, organized SCSS architecture, and modular JavaScript.
What I value most about this project is that it was not based on a ready-made Figma design or template. I planned, designed, and developed it from scratch, including the colors, UI, layout, and functionality.
This experience taught me how to turn an idea into a complete project from planning to implementation, rather than simply reproducing an existing design.
Special thanks to Hsoub Academy and the trainers for this valuable experience.
Alhamdulillah for completing this milestone.
BrewNest — Graduation Project
Live Demo:
https://lnkd.in/eBzw_PUP
GitHub Repository:
https://lnkd.in/eBZ_JJYM
#FrontendDevelopment #FrontendDeveloper #JavaScript #WebDevelopment #Programming

https://www.linkedin.com/posts/ibrahim-almahdy-eng_frontenddevelopment-frontenddeveloper-javascript-activity-7495799323885113345-Aqxg?utm_source=share&utm_medium=member_desktop&rcm=ACoAAFyxBJIBwY-UjWS9TTfoQdEXOQhKa0XgWlk