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

Community feedback

• 

  Rohit•330

  @Rohitgour03Posted almost 3 years ago

  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-AfzalPosted almost 3 years ago

  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,300

  @anoshaahmedPosted almost 3 years ago

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

  1
• 

  Elroy Toscano•630

  @elroytoscanoPosted almost 3 years ago

  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,300

  @anoshaahmedPosted almost 3 years ago

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

  1
• 

  Mojtaba Mosavi•3,760

  @MojtabaMosaviPosted almost 3 years ago

  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,300

  @anoshaahmedPosted almost 3 years ago

  @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

  @MojtabaMosaviPosted almost 3 years ago

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

  Marked as helpful

  2
• 

  shawky sobhy•340

  @shawkysobhyPosted almost 3 years ago

  This comment was deleted almost 3 years ago

  3

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @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-kamiskiPosted almost 3 years ago

  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,300

  @anoshaahmedPosted almost 3 years ago

  @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

  @Rohitgour03Posted almost 3 years ago

  @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,300

  @anoshaahmedPosted almost 3 years ago

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

  1
• 

  abderrahim•155

  @abderrahim-alouganePosted almost 3 years ago

  that's a wonderful job keep coding ^_^

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @abderrahim-alougane thank u Abderrahim c:

  0
• 

  Jaycee Altamia•330

  @simplyJCPosted almost 3 years ago

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

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @simplyJC Thank you Jaycee :)

  1
• 

  .dela•20

  @delalluyahPosted almost 3 years ago

  Wow! Amazing

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @delalluyah thank u :)

  0
• 

  MUHAMMED ARSHAK K V•50

  @arshaqkvPosted almost 3 years ago

  pixel perfect design...keep going ;)

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @arshaqkv thank u c:

  0
• 

  Harmanjot Singh•985

  @arkharman12Posted almost 3 years ago

  Good one! 👏

  1

  ---

  

  Anosha Ahmed•9,300

  @anoshaahmedPosted almost 3 years ago

  @arkharman12 thank u <:

  0
• 

  Ilkin Mammadli•180

  @ilkinm03Posted almost 3 years ago

  Nice job! Can I follow you on GitHub. I want to see more wonderful works!😇

  0