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

Submitted

Chat app CSS illustration (Pug, SCSS, CSS animations, JS, Parcel)

Ksenia 1,350

@ksenius

Desktop design screenshot for the Chat app CSS illustration coding challenge

This is a solution for...

  • HTML
  • CSS
3intermediate
View challenge

Design comparison


SolutionDesign

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

P
Matt Studdert 13,611

@mattstuddert

Posted

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

Ksenia 1,350

@ksenius

Posted

@mattstuddert Thank you very much, Matt! Your words make me feel more confident!

0
Magda Kokot 1,425

@magdakok

Posted

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

Ksenia 1,350

@ksenius

Posted

@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
Magda Kokot 1,425

@magdakok

Posted

@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
Ksenia 1,350

@ksenius

Posted

@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
Magda Kokot 1,425

@magdakok

Posted

@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
Ksenia 1,350

@ksenius

Posted

@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
Magda Kokot 1,425

@magdakok

Posted

@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
Ksenia 1,350

@ksenius

Posted

@magdakok Thank you, Magda! You actually have more faith in me than I do :)

1
Jen 1,230

@En-Jen

Posted

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

Ksenia 1,350

@ksenius

Posted

@En-Jen Thank you! I hope my code will be useful to you :)

0

@miguelseguramx

Posted

The animations are really cool!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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