Skip to content
OverviewSolutions
26
Comments
62

Ahmed Kamel

@hmadamk1,190 points

I'm a happy developer who enjoys code and wishes to write some powerful apps, Wish me luck, If you have any questions about React, Accessibility, Css, JavaScript feel free to ask, my Speciality is javascript, and I hope one day to become a great developer

I’m currently learning...

PWA, Service Workers, Advanced React Patterns And migrations, Advanced typescript,

Latest solutions

View more solutions

Latest comments

  • Ahmed Kamel•1,190
    @hmadamk
    • Awesome work passing accessibility ✅ currently I'm learning adavnced accessibility when I'm done I will cover SEO I hope to be more helpful then but here's some design tips
    1. I know it's kind of struggle to make your design look like the snapshot, here's what id do, start your design from mobile or desktop whatever you prefere I prefere mobile but let's go with desktop open the browser inspector make the size 1440px(the width of the design on desktop) and try to make the deign looks the same as the image then do the same to 375px(the width of the design on mobile) and just make sure every thing doesn't break in the middle by using flexable value for more information try kevin powell course on conquering responsive layouts it's really good
    2. I know your site is good but here's some advice for future, make sure that your website looks good after zooming in to 200% so if someone can't see well he can zoom and still use your website
    3. for the button if you want them to look like the design do the following
    a{
box-shadow: 0px 4px 0 0px {your color goes here};
}
a:active{
box-shadow: none;
or 
box-shadow: 0px 2px 0px 0px {your color goes here};
}
    • your doing very great though keep up the goog work
    Marked as helpful
  • Ahmed Kamel•1,190
    @hmadamk
    • Well done, I have only seen few actually making this challenge this good
    • one small note is that buttons and links must have a text if not you need to add an aria-label like so
    <button aria-label="some describtion"><i class="fa fa-"></i></button>
<a aria-label="some describtion"><i class="fa fa-"></i></a>

    you don't need to use a label for the input science you are adding a button try and labels need only one either an input or a button because the link to it the solution would be

    <div class="label">
<input aria-label="enter your email" placeholder="Email Address" />
<button aria-label="send the email" type="submit"><i class="fa fa-"></i><button>
</div>

.label{
position:relative;
  display: inline-block;
}
input button{
position:absolute;
}

    hope this help

    • note this is not the most perfect way and I don't know if there is a one, this is the way I found to be well enough
    Marked as helpful
  • Ahmed Kamel•1,190
    @hmadamk
    • Well done with the challenge
    • the order does not matter at all but you could make your own convention just for your self mine is like so
    .element{
  display:first;
  all stuff related to the display is here then some space

  the background and color and border and outline and box-shadow text-shadow

  the font and font-weight 
 
  margin and padding goes here
 
  transition and transform

}
    • to pass the accessibility test use <main class="container">or wrap the div with main make sure that all of your page is contained by a landmark examples of landmarks are
    header for the top section
main for your main section
section with aria-label to describe why you added this section
footer for the bottom section
    Marked as helpful
  • Ahmed Kamel•1,190
    @hmadamk
    • great work, I really liked the transition on the wrapper, cool!
    • make sure that all of your page is contained by a landmark examples of landmarks are
    header for the top section
main for your main section
section with aria-label to describe why you added this section
footer for the bottom section

    the main landmark is required an represent the most important section in your case where you use a card you should wrap it inside of main to give it semantic meaning

    • hope this helped
    Marked as helpful
  • Ahmed Kamel•1,190
    @hmadamk
    • great work
    • make sure that all of your page is contained by a landmark examples of landmarks are
    header for the top section
main for your main section
section with aria-label to describe why you added this section
footer for the bottom section

    the main landmark is required an represent the most important section in your case where you use a card you should wrap it inside of main to give it semantic meaning

    • hope this helped
    Marked as helpful
  • Ahmed Kamel•1,190
    @hmadamk
    • links must have describtive text for links with icons use aria-label to describe your link to non-sighted users and screen readers like so
    <a href="#" aria-label="Our facebook page">
    Marked as helpful
View more comments