App that teaches you CSS - Feedback needed

Just launched my new learning platform to help beginners learn CSS. I would love to get some feedback from you guys, so i can keep improving the website in the future and adding more content to it. Thank you.

Sorry, I don’t mean to sound too critical below, but there are some accessibility issues and lack of responsiveness that need to be addressed.

  • When I increase the text size the ‘Start learning’ button begins to move to the bottom right corner of the page and at some point (depending on the height of your browser window) it disappears completely and there is no vertical scroll bar to get it back.

  • After I click ‘Start learning’ (with my text size still increased) the content on the left is overlapping and hidden under the output box (I can’t even see the Solution button).

  • The pink text does not quite have enough color contrast with the background to be accessible.

  • Even at default font size, when I narrow my browser window the content on the left begins to go under the output box. Also, it never switches from two to one column.

  • There is no noticeable keyboard focus indicator on the Next button.

1 Like

Hey, thank you so much for the feedback, i just finished building the website, wasn’t adding any responsive part to it yet, and i plan to make it responsive for pc and tablets, but i don’t think it has any point for mobile atm. Could you, if you have time take a few screenshots of where the issue appears unless if its while resizing browser? And I don’t quite understand the last thing you said, the way button works is that it only shows up once u get the correct answer, so u can either click or it or just hit enter. Thanks again for all the feedback

The point of responsiveness is that you are designing for “all” types of devices that could be looking at your page, not just for “tablets” or “mobile” devices. So you don’t need to worry about a specific type of device because if you do it correctly it will automatically work on all devices. Also, you don’t have control over how wide someone has their browser window, so proper responsiveness will handle that as well. The days of designing just for a mobile device, or just for the desktop are over.

My suggestion, narrow your browser window as far as it will go and style your app so it looks good there. That will be your base CSS. Now slowly widen your browser window until you think it will be safe to rearrange the elements to fit a wider view port and then add your media query break point there and add the additional styling for wider screens.

Concerning the Next button, yes, it shows up after you complete the exercise, but there is no keyboard focus indicator to tell me that it is ready to be “clicked” by the keyboard. So the first time it showed up I thought I had to Tab to it, which I did, and then hit Return and nothing happened. Then I realized that the focus was already set on the button and I didn’t need to Tab. The reason I didn’t realize this immediately is because there was no focus indicator on the button itself.

As for the text resizing issue, using Firefox, go to the View -> Zoom menu and activate ‘Zoom Text Only’. While holding down the Ctrl key, scroll your middle mouse button to increase the text size. There are also ways to do this on Chrome/Edge as well (google it). Bottom line, the user may be viewing your app with a much bigger text size and your app should be able to handle it gracefully.

1 Like

It looks pretty nice.

But you don’t explain the syntax needed to do the challenges, I’m also not sure I understand the Values syntax you are showing.

If you are trying to teach people how to write CSS you will have to make fewer assumptions about what they already know and explain it like they never have written any CSS before.

1 Like

Yeah I’m surely gonna add responsivness, I’m not new to web development like I’m new at react :smiley: I was just implying that it would be useless for mobile because u wouldnt be able to do a lot of exercises properly, flex exercises for example unless i made boxes 20/30px each other than that yeah, ill try to fix everything else you said, and also i might add some animation on the button when it appears, thats a good idea. I’ll work on it in next few days, so thank you for everything.

Understandable, maybe I should have things like how css is written first, or some kind of explanation for people who don’t know, about the description of each question I think it’s pretty straight forward, but I did mess up on values part, become in some question values should be properties and other way around. Thank you