Skip to content
OverviewSolutions
26
Comments
62
Ahmed Kamel
@hmadamk

All comments

  • Phúc (Scott) Nguyễn•430
    @NationsAnarchySubmitted about 2 years ago

    This is a tough challenge if you really want to test how you can layout things on a website, and then make it responsive in smaller widths/screens. It took me quite a bit of time, and yeah I am pretty satisfied with the result - obviously can't match the design 100% though.

    Clipboard Landing Page Solution

    1
    Ahmed Kamel•1,190
    @hmadamkPosted about 2 years ago
    • 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
    0
  • Phúc (Scott) Nguyễn•430
    @NationsAnarchySubmitted about 2 years ago

    Responsive designs for this challenge is pretty fun to work with I have to say.

    Apart from that, still have a few to-dos left for this one:

    • Create a proper email input and button.
    • Do a proper JS validation implement.

    Let me know what else I can improve for this one as well, guys! Thanks!

    Base Apparel Coming Soon Solution

    1
    Ahmed Kamel•1,190
    @hmadamkPosted about 2 years ago
    • 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
    0
  • Glenda Joyce Reed•1,260
    @Glenda9031Submitted about 2 years ago

    I'm confused about the order of the selectors in CSS (should display go before margin, width, height, etc.). I also am REALLY confused about media queries even though I have at least 3 certifications (Codecademy, Scrimba and Free Code Camp) but I still be confused!!

    Equalizer Landing Page

    3
    Ahmed Kamel•1,190
    @hmadamkPosted about 2 years ago
    • 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
    1
  • Ahmed Kamel•1,190
    @hmadamkPosted about 2 years ago
    • 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
    1
  • Ahmed Kamel•1,190
    @hmadamkPosted about 2 years ago
    • 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
    0
  • Ahmed Kamel•1,190
    @hmadamkPosted about 2 years ago
    • 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
    0
  • Jose Lopez•360
    @TheJoxelSubmitted about 2 years ago

    Hi, community. This is my solution for Bookmark landing page. I'll be happy to hear any feedback and advice!

    Bookmark landing page

    1
    Ahmed Kamel•1,190
    @hmadamkPosted about 2 years ago
    • Cool page! a couple of notes on accessibility though
    • make sure that all of your page is contained by, and be sure to add a main landmark for the most important section this helps for consumer with defferent assistive technology to be able to understand the layout of your page and navigate through it 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
    0
  • Faruk Ahmad•150
    @farukwebcode21Submitted about 2 years ago

    This is single price grid component solution please see my solution and give feedback because i want improve my coding skill advance thanks for feedback

    Single Price Grid Component Solution

    2
    Ahmed Kamel•1,190
    @hmadamkPosted about 2 years ago
    • Well done acouple of notes though
    • 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

    for the main section it's required to make users with disabilities to be able to skip right into the content of your site

    0
  • Hlaine Htet•190
    @hlainehtetSubmitted about 2 years ago

    I tried nearly to be same that Challenge , I want any feedback , thank you

    Html Css Bootstrap

    1
    Ahmed Kamel•1,190
    @hmadamkPosted about 2 years ago
    • Awesome looking, for your issues you need to
    • use heading in order so h1 > h2 >h3 etc and manipulate the font size later as you want remember that the headings indicate level of sections in your app so the page is a section and should have a name inside of h1 the sections are a subsection and should have a name inside of an h2 and so on remember heading indicate the level of this section not for big font (resize as you want) and all your landmarks must have an h2 level heading
    • 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
    1
  • Alex•330
    @CallMe-ALSubmitted about 2 years ago

    Added a link clearing button, localstorage, and some other cool features to go above and beyond -- take a look!

    I'm open to any feedback, but looking for ways to make my javascript more concise. Any recommendations? Maybe something I could improve on in the planning stages?

    Thanks for looking!

    Responsive URL Shortening Site with localstorage

    1
    Ahmed Kamel•1,190
    @hmadamkPosted about 2 years ago
    • Well done, acouple of notes for accessibility
    • 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">
    • 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
    1
  • Ahmed Kamel•1,190
    @hmadamkPosted about 2 years ago
    • well done
    • you have a typo secttion instead of section
    • 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">
    • 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
    1
  • Ahmed Kamel•1,190
    @hmadamkPosted about 2 years ago
    • consider making the button more interactive like so
    button{
  cursor:pointer
}
button:hover{
  opacity:0.8;
}
    • non-sighted user can't really link your text with the inputs so to help them understand what this input is for consider adding aria-label like so
    <input aria-label="Enter your name" >

    or

    <label>
cardholder name
<input>
</label>
    • your html is missing alot of head tags I would suggest you use the html presented by the challenge starter file
    • you should read the report for html and accessibility
    Marked as helpful
    1