Chat app CSS illustration (Pug, SCSS, CSS animations, JS, Parcel)
Design comparison
Solution retrospective
I hid the chat app and its focusable elements from screen readers with aria-hidden="true"
and tabindex="-1"
. Should I have made it accessible?
P.S.: I hope the animations aren't annoying.
Community feedback
- @mattstuddertPosted over 4 years ago
Another brilliant solution, Ksenia! 💯 You're right to hide the focusable elements from screen readers for the illustration. A lot of people would actually create the whole illustration using
div
elements anyway.Based on your solutions, you're 100% ready to start applying for jobs! If you're not already, I'd recommend following Randall Kanna on Twitter. She puts out some great content with advice for applying for jobs.
If you ever have any questions, please feel free to message me as well. Always happy to help however I can!
2@kseniusPosted over 4 years ago@mattstuddert Thank you very much, Matt! Your words make me feel more confident!
0 - @magdakokPosted over 4 years ago
Ksenia, I must confess I'm a huge fan of your projects, your attention to details and hidden surprises like making the text input working. Are you already working in IT? :)
2@kseniusPosted over 4 years ago@magdakok Thank you for your kind words about my projects! I'm not working in IT yet, but I'm going to start applying for jobs very soon.
1@magdakokPosted over 4 years ago@ksenius that's great, I keep my fingers crossed! :) What are your favourite sources to study? Is there anything that you find particularly helpful? :)
0@kseniusPosted over 4 years ago@magdakok Now when I'm comfortable with modern HTML, CSS and JS I usually use such resources as MDN, CSS Tricks, rarely w3schools for reference. The best resource on JavaScript in my opinion is javascript.info. I learned JS from scratch there and I often refer to it now either for learning more advanced or new to me JS topics or just fro reference and refreshing my current knowledge. I think everyone uses or at least heard of all these resources.
Among learning platforms I like HTMLAcademy (it's in Russian, but it seems like they have English version too). The content of their interactive courses on HTML and CSS is very good (especially for beginners or those who have minimal or obsolete knowledge). I also like CodeCademy, I did their courses on Git, SCSS, jQuery and recently even PHP.
Oh, and there is Scrimba which is similar but different from any other learning platforms with interactive courses. There aren't many courses there yet, but I've tried several of them already. I liked the introductory course to TypeScript and the course on React by Bob Ziroll.
As for Vue, I'd like to mention VueMastery.
Although in general I think different learning platforms or video courses and tutorials are only good to get familiar with what you want to study, but after that the best way is to practice and continue learning with the official documentation. That's how I usually do.
4@magdakokPosted over 4 years ago@ksenius Thank you a lot, I've never used javascript.info and Scrimba :). My favourite sources are all Colt Steele's Udemy courses, such a lovely guy! I feel a little lost right now, cause I already know HTML, CSS, JS, React and a tiny bit of WP (just to be able to mention the latter on my CV ;)) and I don't know what should I do now. I have no ideas for any projects and really don't want to make another Weather App or Todo list... Thank you for sharing your resources and good luck :))
1@kseniusPosted over 4 years ago@magdakok If you don't know what projects to build or what to learn, maybe it's a signal that it's already time to start looking for a job? (If you're not doing it yet)
I also feel a bit lost, like I know that I already know enough to start working, but there's something missing, and I don't know what it is. Weird feeling. For now I decided to get prepared for a technical interview and build a simple portfolio website as an extension to my resume.
I wish you good luck too :)
1@magdakokPosted over 4 years ago@ksenius I started, even though I know I'm still a newbie. I assumed that the sooner I start to have phone conversations or even job interviews the best for me, my self-confidence and English language skills :). Nothing to lose, so much to gain (and I don't want to work in hospitality any more :D).
I think that the feeling you have about missing something is inevitable in programming, that's why it's the best field to work in because you never get bored and it's never enough :)
I'll be keeping my fingers crossed for you (even though I know you will be successful ;)).
1@kseniusPosted over 4 years ago@magdakok Thank you, Magda! You actually have more faith in me than I do :)
1 - @En-JenPosted over 4 years ago
Wowwww, absolutely incredible solution 🤯 I'm definitely going to study your code very carefully. It looks like I could learn a lot from you. I agree with @magdakok that your attention to detail and surprising features are really impressive. Hope to see more amazing solutions from you and best of luck to you with your interview prep, portfolio, and job hunt!
1@kseniusPosted over 4 years ago@En-Jen Thank you! I hope my code will be useful to you :)
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord