Akash Siddamshettyโข 190
@akashsiddamshetty
Posted
Great work ! @anoshaahmed
Marked as helpful
2
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@akashsiddamshetty thanks Akash!
0
Submitted
'huddle page w/ alt. feature blocks' + sass + flexbox + responsive
#sass/scss#accessibility
Anosha Ahmedโข 9,340
@anoshaahmed
Design comparison
Solution retrospective
I used desktop-first approach for this, and now I know for sure that mobile-first approach is best.
Please let me know what I can do to improve.
Community feedback
Mariam Oluseyi-Alliโข 210
@mariamALLI
Posted
@anoshaahmed am always impressed with your solutions. Good job, I want to be as good as you. )
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@mariamALLI ur coding skills r better than me. i just spend a lot of hours trying to get the right measurements
1
Nurgeldiโข 30
@Nurgeldi1419
Posted
Great work )
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@Nurgeldi1419 thank u nurgeldi
0
Ali Mousavi Nizhadโข 270
@mnizhadali-afg
Posted
@anoshaahmed your works are awesome and great. I admire it ;)
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@mnizhadali-afg thanks Ali :)
1
Ali Mousavi Nizhadโข 270
@mnizhadali-afg
Posted
@anoshaahmed most welcome :)
0
Rohit singhโข 40
@rohitkuderiya
Posted
Thank you @anoshaahmed Mam , Actually i am a fresher student and this project help me to learn a lot.
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@rohitkuderiya Thank you Rohit!
0
cacostedโข 610
@cacosted
Posted
Really cool looking web, I liked how you handle the overlaying box near the footer I will use that when I needed it.
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@caastech thank u caastech!
0
Victorโข 470
@therealmaduanusi
Posted
Your's are just perfect ๐ while mine are just๐ honestly I wish I could. You did a great job looking forward for more of your solution ๐
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@therealmaduanusi everything is a learning curve Victor <3
0
nazimโข 330
@NazimAitali
Posted
good job ๐๐ฏ
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@NazimAitali thank u Nazim :)
1
Dasu Rahulโข 200
@dasurahul
Posted
Pixel Perfect Good job and Nice animations
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@dasurahul thank u Dasu :)
0
Elroy Toscanoโข 630
@elroytoscano
Posted
Hi Anosha, you've done a brilliant job at this. Not only is the design pixel perfect but also semantically correct. You've even gone a step further and designed the github readme, so well done ๐
One tip: Consider placing your img elements in a figure element as the figure element represents self-contained content, whereas img is just embedding an image.
Hope this helps. Cheers.
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@elroytoscano I always learn something new from you! Thanks Elroy!
1
Jibreelโข 300
@jibreel1
Posted
Nice design... I'm always amazed how your design and the challenge are always exact, Bravo๐๐ How did your have your mobile and desktop screenshots side by side in your ReadMe file??
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@jibreel1 thanks jibreel (very cool name btw)! u can go to the readme file and click "Raw" and see the code for it :)
1
Damilola Olanrewajuโข 310
@Dami-Moore
Posted
Your works are really awesome. You're really good at your stuff!! How do your designs match so perfectly? It's not like they give the exact sizes in the style guide. How do you do it? Or are you just a perfectionist and sit for hours trying out different sizes till you get an exact match? ๐
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@Dami-Moore that's actually exactly it. i sit for hours trying out different sizes to get an exact match!!!! it's not some magic TRUST ME sometimes i just want to not have the same size because it's so much work, but then i'm like its okay u can do this LOL
0
xZAYEDxโข 250
@xZAYEDx
Posted
Desktop version is perfect, love the work.๐ฏ I think the mobile version needs a little bit of more work like the social media icons is too high and the other cards needs a little less margin. Rest everything is perfect ๐
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@xZAYEDx i know ๐ !!! I did desktop-first, so it was becoming too much work to fix the other things !!! thank u for ur kind words!!!
1
xZAYEDxโข 250
@xZAYEDx
Posted
@anoshaahmed yes I feel you ๐คฃ and the worse part is redoing everything ๐๐
1
Account Deleted
Just another cool challenge from you Anosha ๐๐
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@MoBlack24 thanks Mo ๐๐๐
0
Hi! Anosha, i can see your mobile design is not that much cool as compared to your desktop design. I mean your Font size is little bit bigger than required, your footer contact part, the footer menu and social media icons don't have enough space. Simply I would say it could be more better. It is your great learning that you have Made mistake and then at the end you realised that you chose wrong approach and also now you have atleast a fact Reason to always practice MFA.
Soon I will see your next work ๐โค๏ธ Good Luck ๐ค
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@skyv26 exactly!!!!!! i understand more why and how MFA is more efficient. thank u Aakash. i was hoping nobody would notice how ugly the mobile design is๐๐๐๐๐๐
1
@anoshaahmed lol,
1
Gunal Bondreโข 135
@GunalBondre
Posted
also i really liked the way you wrote git description... i will follow similar structure thanks for contribution
Marked as helpful
1
Gunal Bondreโข 135
@GunalBondre
Posted
This is amazing work. do you follow figma or sketch.. i mean do you have premium membership because as a free member its difficult to code as per design
Marked as helpful
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@GunalBondre no i dont have figma or sketch :) i know a trick haha. but it's not a good trick because it takes me hours to match the design
1
Nicolas Gulaโข 170
@NicolasGula
Posted
@anoshaahmed I want to know that trick. How do you make the pages look perfect? excellent job!
1
Harmanjot Singhโข 985
@arkharman12
Posted
What are the benefits of using the mobile-first approach first instead of desktop for you?
2
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@arkharman12 mobile first is less work
2
@arkharman12 Mobile First Approach helps to render design faster on mobile phone, because In mobile first approach we start our css According to mobile and ends with desktop media query. Approx 60% people around the world, try to open the web services or design on mobile first. That's why it is important, where one more benefit is In mobile first approach you will finish your design with responsiveness in less time as compared to desktop first approach. I hope you will understand
Marked as helpful
3
Raj Kiran Chaudharyโข 100
@rk-codeflow
Posted
@arkharman12 Here are some of my understandings:
Basically, in mobile everything is vertically stacked and since most of our contents are placed inside div, they will be stacked by default (unless we have given them any CSS.) and will only have to work for desktop mode.
However, if we adopted a desktop-first approach we need to again write our CSS for the mobile version too which means doubling our code, effort and energy.
Marked as helpful
1
Mariam Oluseyi-Alliโข 210
@mariamALLI
Posted
@anoshaahmed totally agree
Marked as helpful
1
Luis Herreraโข 795
@Luis15Herr
Posted
Why do you ask for feedback if you are going to delete the solution where the feedback was given? xDDDD
1
Anosha Ahmedโข 9,340
@anoshaahmed
Posted
@Luis15Herr i had to delete because i had an issue with my solution, and when i fixed the issue, the solution of the screenshot didn't update.
only two people gave me feedback on the last solution. one person just said good job, and the other person told me to change the url of the image, which was the wrong thing to do. so it was useless feedback anyway lol
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord