Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Huddle Landing Page // flexbox | mobile-first | responsive

Anosha Ahmedβ€’ 9,340

@anoshaahmed


Design comparison


SolutionDesign

Solution retrospective


Would appreciate any suggestions to improve.

Community feedback

Rohitβ€’ 330

@Rohitgour03

Posted

You have done a nice job there πŸ‘, I really liked it 😍, but one thing that I noticed was that at some point when it crossed the media query, you have set a certain width to the mockup image which is causing the image to squeeze, and maybe you don't want that your image to get distorted. One thing you can do is to put that image in a container. Everything is just fine and cool. Hope you will find it useful. πŸ‘

Marked as helpful

1
Afzal Khanβ€’ 30

@Khn-Afzal

Posted

Nice :) The only thing which I was noticed by looking at your CSS is that you can shorthand your background property, rest all looks good, and seriously I get to know most of some new CSS selectors, properties which I aint aware of... :) :)

Marked as helpful

1

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@Khn-Afzal Thank u Afzal, i'll try using the shorthand of the background property in the future :)

1
Elroy Toscanoβ€’ 630

@elroytoscano

Posted

Great job at the pixel perfect design. While you've covered almost every aspect of the design, you may want to place the social media icons inside of an unordered list "<ul></ul>" as a list item <li></li> as it would be more semantically correct.

Hope it helps.

Marked as helpful

1

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@elroytoscano Thank you for teaching me something new! I will do that next time ^_^

1
Mojtaba Mosaviβ€’ 3,760

@MojtabaMosavi

Posted

1-When the first media query hits there is a an overlapping between the resigter button and social icons, it's like one pixle after your media query hits going form mobile to desktop.

2- Since you are already using aria-hidden to hide the icon for assitive technologies it would be nice to give them a way to make sense of it thus making the icons more accessible with aria-label.

Keep coding :=)

Marked as helpful

1

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@MojtabaMosavi I appreciate you for helping me get better. I gave aria-labels to the links that the icons are wrapped in, should I give the icons aria-labels too?

1
Mojtaba Mosaviβ€’ 3,760

@MojtabaMosavi

Posted

@anoshaahmed yes that's like alternative text for screen readers.

Marked as helpful

2
shawky sobhyβ€’ 340

@shawkysobhy

Posted

This comment was deleted

3

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@shawky55 thank u so much. u have no idea how much trouble i had, and i had to start over 😴

1
Kunal Mundaβ€’ 200

@ryu-kamiski

Posted

I really love ❀ all the solutions you have posted and how pixel perfect and so close it to the design. It's just amazing.

And if you don't mind I have a few questions in mind. Please do answer if you have time for it.

  1. How do you make it so close to design and pixel perfect? πŸ‘Œ I have seen the code of this solution on Github and was wondering how the numbers were in decimals and even in three decimal digit numbers.
  2. Also if have read it till here then please do share your process in detail like what you do first ; or if you use naming convention like BEM.

Thanks if you have read till here πŸ“Œ and happy coding. 😁

2

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@ryu-kamiski First off, I really appreciate your very kind feedback. It made me happy.

  1. I open the image in a new tab and it makes stuff easier to compare. When I'm working, i compare my work to the picture (in the next tab) over and over to make sure everything looks as alike as possible. The numbers are in decimal because i use pixels at first, and when I find the right pixels, I convert it into rem so they become decimals (usually).
  2. I start from the top and work my way to the bottom. I make sure I get one thing perfect before moving on to the next thing. However, I heard Kevin Powell say in one video that that's not always a good practice because it takes too much time. Lol and it's true it takes me hours to do one challenge. I don't know what BEM is so i don't know if i use it. I started learning coding on November 20th 2021 so i'm still a newbie.
5
Rohitβ€’ 330

@Rohitgour03

Posted

@anoshaahmed, Hello, Anosha, I just wanted to know that how much time it takes you to finish a challenge on average?

1
Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@Rohitgour03 up to 4 hours lol. but i take a lot of breaks too so idk

1
abderrahimβ€’ 155

@abderrahim-alougane

Posted

that's a wonderful job keep coding ^_^

1

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@abderrahim-alougane thank u Abderrahim c:

0
Jaycee Altamiaβ€’ 330

@simplyJC

Posted

I was amaze that you have done the design perfectly as shown on the screenshot. Amazing! Great job πŸ‘Œ 😁.

1

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@simplyJC Thank you Jaycee :)

1
.delaβ€’ 20

@delalluyah

Posted

Wow! Amazing

1

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@delalluyah thank u :)

0

@arshaqkv

Posted

pixel perfect design...keep going ;)

1

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@arshaqkv thank u c:

0
Harmanjot Singhβ€’ 985

@arkharman12

Posted

Good one! πŸ‘

1

Anosha Ahmedβ€’ 9,340

@anoshaahmed

Posted

@arkharman12 thank u <:

0
Ilkin Mammadliβ€’ 180

@ilkinm03

Posted

Nice job! Can I follow you on GitHub. I want to see more wonderful works!πŸ˜‡

0

Please log in to post a comment

Log in with GitHub
Discord logo

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