Mahdia Hassani
82 posts

Mahdia Hassani
@Mahdia010
@codetoinspire || Web design & CMS Builder || Learning front-end Small projects, daily improvement Afghan girl. Choosing growth despite challenges.
Afghanistan Katılım Ocak 2026
69 Takip Edilen132 Takipçiler

Just wow 🫣
My next project has done
there was a time when I only used to look at them, but now I can build them myself.
From nothing, we’ve come this far😁
It’s not perfect, but I gave it my best shot 💪
Link in the bio
Go take a look
I'm thankful of:
@Wajiha_Niazi
@f_forough
English

Eid Mubarak everyone 🌙✨
Wishing you all a beautiful and joyful Eid filled with peace, happiness, and countless blessings. May your prayers be accepted, your hearts be light, and your homes be filled with love and laughter.
Thank you all for being such an amazing community, I appreciate every one of you. Enjoy the celebrations, the food, and the special moments with your loved ones.
Eid Mubarak once again! 🤍
```Dev Global ```

English

Day 20_90✅ #90DaysOfCode
Bootstrap journey starts now!💎
After 20 pure HTML/CSS projects, layouts and responsiveness finally feel natural. Super excited to build faster, cleaner pages with Bootstrap while keeping my vanilla CSS strong
Leveling up!
#Bootstrap #Afghangirlscode

English

@setaysh_azizi @E_Ehrari @stysh_Esmaily @CodeToInspire @f_forough It's amazing 👏🏼✨
So proud of you girl 😍
English

Just finished our Goal Tracker💙
Track habits, earn streaks & XP, manage goals, and switch languages 🌐
Built with React + Vite + MUI. Fully responsive!
@E_Ehrari
🎯 Live Demo: goal-tracker-project.vercel.app
Shoutout to @stysh_Esmaily for the collab.
English

@Mahdia010 @CodeToInspire @GirlsWhoCodeWV @f_forough @Wajiha_Niazi That sounds like a big step. Keep building 👏
English

Day 19_90✅ #90DaysOfCode
Modern Landing Page – full hero, features, testimonials, FAQ, newsletter & team section!
. Dark starry theme with:
. FAQ accordion style
. Newsletter form
. Team member avatars(randomuser API) Responsive footer First bigger multi-section page☺️


English

Day 18_90✅ #90DaysOfCode
Certificate of Completion page with HTML & CSS Clean & elegant design:
. Centered flex layout
. Dashed border frame
. Serif typography (Georgia/Times)
. Box-shadow & subtle colors
. Fully responsive & printable look
Pushed to GitHub


English

@psparwez Your contents and posts are so helpful.💚
I find them very useful
Thanks bro🙏🏼
English

This isn’t just a prompt. It’s a whole website.
I tried it myself , didn’t expect much… but it actually insane.
AI is wild 🚀
Viktor Oddy@viktoroddy
❤️🔥Opus 4.6 just one-shotted this aniamted portfolio website. Prompt included ↓
English

@GirlsWhoCode So inspiring! From Afghanistan, where girls are banned from school and tech
your work gives real hope. Passionate about AI & coding. Can I join Pathways from here? Thank you.
English

Despite being told that "tech is for boys," Lucretia Dreyer initially steered away from STEM. However, after volunteering for a coding and robotics program, she discovered she could merge her passion for technology with disability advocacy. Now, she is dedicated to exploring how AI and assistive technologies can enhance STEM education for children with disabilities worldwide. bit.ly/42vW3u1

English

@AlexEngineerAI @GirlsWhoCode @CodeToInspire @f_forough @Wajiha_Niazi Thank you Alex, you made my day❤️
Love the hover effect too!
Mostly used Flexbox before, tried column-count for masonry once but it got messy 😁
Grid is so much cleaner.
Any cool Grid tips or tricks you'd share?
English

@Mahdia010 @GirlsWhoCode @CodeToInspire @f_forough @Wajiha_Niazi This looks awesome!
😍 I love how you've implemented the CSS Grid for a responsive layout.
The hover zoom effect must add such a nice touch!
Have you worked with any other layouts before?
I'd love to hear about your experiences!
English

Day 17_90✅ #90DaysOfCode
Photo Gallery with CSS Grid
Responsive masonry layout:
. auto-fit columns
. spanning large/tall/wide photos
. hover zoom + shadow
Pushed to GitHub!
#afghangrilscode #learnInPublic #Grid #Frontend


English

Day 16_90✅ #90DaysOfCode
Pricing Cards with HTML & CSS
Key techniques:
• Flexbox for card layout
• Hover lift: transform: translateY(-20px);
• Featured card: border + scale(1.05)
• Smooth button hover transition
Pushed to GitHub
#afghangirlscode #LearningInPublic #Code


English

Day 15_90✅ #90DaysOfCode
Pure CSS FAQ Accordion (no JS)
Key techniques:
• Checkbox + label toggle
• input:checked ~ .faq-answer { max-height: 300px; }
• label::after with + / - rotation on check
• Smooth max-height + padding transition
• Hover on label ....
#HTMLCSS


English




