Hello everyone, hope you’re doing well 
I’ve made a webpage which is similar to a sketchpad, kindly ask for your suggestions or criticisms , if you use this webpage , would you be comfortable with this design?
1 Like
Hey @beesha
Did you Code this on Code pen or any other playground.
If you coded this in any Playground please share the link then we can see the live work.
With the screenshot it is hard say Feedback.
Thanks,
Codely
1 Like
Hey @beesha!
From a design standpoint I think it’s pretty good, I’d personally change a few things
- Add a cursor pointer for when the user interacts with the options and game instructions
- Fixing the ‘return to black’ button by having it as the same hover effect as the other buttons
1 Like
Thank you @Miyagii so much for this feedback, I appreciate it 
I’ve added cursor: pointer , and I feel like it made the webpage much better ! : )
About the button, I also wanted it to be like the other buttons, but it didn’t work with me ! I thought putting (outline:none) in black-button property would fix it , but it didn’t.
1 Like
I had a look at the css and it looks like you’d have to remove the h1 selector from the black button hover, then add it to it’s own selector separately
This is a nice fun little project you have put together. If you want a challenge then my main suggestion would be that you make it keyboard accessible. I don’t think it would be that difficult. The buttons on the left are already accessible (except that you need to remove the outline: none property on them so they have a keyboard focus indicator). Most of the work would be in the sketching. You could pick a set of 9 keys on the keyboard to do the movement. They could use the Tab key to toggle the focus between the sketch pad and the buttons.
As for some current issues:
- It is not clear that ‘Game instructions’ at the top is clickable. At the least make the mouse cursor change to a pointer on hover. And to make it accessible you need to use a
<button>. - It is not responsive to changes in width. When I narrow my browser the buttons stay the same but the sketchpad gets really skinny. You should probably at some point drop the sketchpad below the buttons so the pad has more room. Also, the pad should shrink equally in both height and width so each cell retains a square shape.
- It is not responsive to changes in text size. When I manually increase the text size the button text breaks out of its container. On a related note, when you add break points for narrower widths be sure to use
emvalues for the break point instead ofpx. Usingemvalues will automatically take both changes in width and text size into account.
There are some other minor issues but I think you will have enough to do with the above for now. I like this a lot. Now you need to make it work on all devices and for everyone.
1 Like
@bbsmooth I am so thankful for you taking the time to see the project and write this detailed feedback , Thank you sooo mcuh
-
The thing is if I remove outline: none, that will slightly change the focus I want on hovering boxes, it will look like this:
-
Yees you’re totally right about responsiveness , will work on it today, thank you for giving me a clear pre-view on what I should write on media quires !! : )
-
About the cursor on game’s instruction , will try it out now !
If that outline messes up your design, but you’d still like to keep it accessible, you can set
button {
outline:transparent;
}
1 Like
Thank you so much @jsdisco 
,yes I’ve tried it and it still makes the effect I want, at the same time I made it key accessible as @bbsmooth advised me
I understand, there are sometimes trade-offs when accessibility is concerned. But let’s pretend you were going to eventually use this in your portfolio for prospective employers/clients and the person in charge of evaluating your portfolio can’t use a mouse?
Fortunately, you can actually have it both ways, accessible and aesthetically pleasing. There is a project on github which will allow you to only display the focus when someone is using a keyboard:
1 Like
@bbsmooth when I read accessibility 100% in lighthouse when doing a life server to my webpage ,does that include key accessibility? if not, how can I check it?
I’ve recently been introduced to accessibility , and tricks to make the webpage more suitable for screen readers and people who have issues with vision, and I respect and love how there is much focus to make the webpage accessible for all.
Thank you for providing this project, would love to take a look at it !!
Lighthouse will find a lot of obvious issues, and there are other accessibility checker extensions you can add to you browser as well, so I do recommend them for finding the obvious issues. But they won’t find everything (and in some respect can’t find everything). It is ultimately up to you to test accessibility manually and make sure you have everything covered. I’m glad that you are aware that accessibility is an issue and want to make your projects accessible. It’s somewhat of a steep learning curve and a significant amount of work, but in my opinion it is worth it.
1 Like
so beautiful project
1 Like
I like the project, it’s a cool idea. I like the colors & font you used too. 
1 Like
@beesha For your first DOM project that is quite impressive! I would say one thing that would make it better is if the user had the option to pick what color they wanted instead of relying on a random color. I would also try and make it so that the user has to click the box to draw instead of just hover. Overall though, it is amazing!
1 Like
@landon.h.lloyd Actually I am a student at a code academy program , they teach us many great things, after 3 weeks of learning Dom and js , they asked us to do this project.
Thank you sooo much for your feedback, I have already sent the project, but I am trying to make the commits you’ve mentioned which are really a beautiful add to the webpage 
1 Like
@beesha that is awesome! Good luck with the program. Also, a good way I have found to learn is adding to old projects or rewriting some code to try and make it more concise. Happy Coding!
1 Like