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
Log in with GitHub
OverviewSolutions26Comments63

All comments

  • Phúc (Scott) Nguyễn• 430

    @NationsAnarchy

    Submitted

    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

    hmadamk• 1,190

    @hmadamk

    Posted

    • 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

    @NationsAnarchy

    Submitted

    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

    hmadamk• 1,190

    @hmadamk

    Posted

    • 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
  • P
    Glenda Joyce Reed• 900

    @Glenda9031

    Submitted

    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

    hmadamk• 1,190

    @hmadamk

    Posted

    • 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
  • hmadamk• 1,190

    @hmadamk

    Posted

    • 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
  • hmadamk• 1,190

    @hmadamk

    Posted

    • 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
  • hmadamk• 1,190

    @hmadamk

    Posted

    • 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

    @TheJoxel

    Submitted

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

    Bookmark landing page

    #react

    1

    hmadamk• 1,190

    @hmadamk

    Posted

    • 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

    @farukwebcode21

    Submitted

    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

    #accessibility#angular

    2

    hmadamk• 1,190

    @hmadamk

    Posted

    • 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
  • Hlaing Htet• 190

    @Hlaing-Htet

    Submitted

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

    Html Css Bootstrap

    #bootstrap

    1

    hmadamk• 1,190

    @hmadamk

    Posted

    • 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-AL

    Submitted

    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

    #accessibility#react#lighthouse

    1

    hmadamk• 1,190

    @hmadamk

    Posted

    • 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
  • hmadamk• 1,190

    @hmadamk

    Posted

    • 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
  • hmadamk• 1,190

    @hmadamk

    Posted

    • 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
  • hmadamk• 1,190

    @hmadamk

    Posted

    hi there again your solution looks great for the images its a bit tricky but I will feed you back on how to do them soon, scince I have to figure it out first

    0
  • hmadamk• 1,190

    @hmadamk

    Posted

    • great work
    • to avoid unnecessary scroll in chrome reset your body like so
    body{
  margin:0;
}
    • 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">
    • you shouldn't wrap your image with a section a div is more semantic for that
    • I don't know about the pseudo-element or pseudo-class host thing but I will read about it

    Marked as helpful

    1
  • kath• 130

    @Kathund

    Submitted

    strugled on making the 185GB message. found a way to do it by making a svg. if anyone knows a different way please share

    Fylo data storage component

    #sass/scss

    2

    hmadamk• 1,190

    @hmadamk

    Posted

    • well done looks perfect a couple of notes though

    • remember to reset your body like so

    body{
  margin:0;
  min-height:100vh;
}

    this will make you background stretch with the page and prevent any scroll which is very beautiful

    • 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

    in this solution you are using a single section so wrap it inside of a main what this does is that it helps assistive technology to help people consume your websites better

    • you should use heading in order so h1 > h2 >h3 etc and manipulate the font size later as you want remember that the headings indicate section of your app so the page is a section and should have a name inside of h1 the card is 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 and all your landmarks must have an h2 level heading and any nested section will take h3 then h4 and so on

    Marked as helpful

    0
  • hmadamk• 1,190

    @hmadamk

    Posted

    • 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
    1
  • Delian21• 150

    @Delian21

    Submitted

    Starting mobile-first is not easy. Gave me lots of headache. I find working on larger screens easier then going off to smaller screens.

    Delian's Fylo Storage Component

    1

    hmadamk• 1,190

    @hmadamk

    Posted

    • well done a couple of notes
    • you should use heading in order so h1 > h2 >h3 etc and manipulate the font size later as you want remember that the headings indicate section of your app so the page is a section and should have a name inside of h1 the card is 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 and all you landmarks must have an h2 level heading

    Marked as helpful

    0
  • hmadamk• 1,190

    @hmadamk

    Posted

    • 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
    1
  • Satyam Jha• 400

    @satyammjha

    Submitted

    Suggestions and Feedback are welcomed.

    space-tourism

    #accessibility#cube-css#sass/scss#webflow#tailwind-css

    1

    hmadamk• 1,190

    @hmadamk

    Posted

    • well done a few notes though
    1. you should use heading in order so h1 > h2 >h3 etc and manipulate the font size later as you want remember that the headings indicate section of your app so the page is a section and should have a name inside of h1 the card is 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 and all you landmarks must have an h2 level heading
    2. 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
    0
  • hmadamk• 1,190

    @hmadamk

    Posted

    • well done a few notes though
    1. you must add an alt text to your image because screen reader will read that to blind people and if its not there it will read the src of the image which can be bothering for users, if you image is for decorating-perpose use an empty alt like so alt=""
    2. 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
    0
  • yashgo30• 40

    @yashgo30

    Submitted

    • In smaller devices the share button overlaps the last last social media icon. I have positioned share button absolutely, maybe that's why it does so.

    Responsive component using Flexbox

    1

    hmadamk• 1,190

    @hmadamk

    Posted

    well done a few notes

    1. describe the purpose of your button with aria-label like so
    <button aria-label="pop the social icons"></button>
    1. 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
    1. wrap you social icons with link to show interactivity

    Marked as helpful

    1
  • Isaac C Anyim• 210

    @CreatorLZ

    Submitted

    Fixed the box responsiveness. Suggestions are welcome.

    advice app

    #axios#react#styled-components

    1

    hmadamk• 1,190

    @hmadamk

    Posted

    • 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
    1
  • hmadamk• 1,190

    @hmadamk

    Posted

    • 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
    1
  • hmadamk• 1,190

    @hmadamk

    Posted

    • well done looks perfect a couple of notes though
    1. you must add an alt text to your image because screen reader will read that to blind people and if its not there it will read the src of the image which can be bothering for users, if you image is for decorating-perpose use an empty alt like so alt=""

    2 .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