How to Create CSS Coding Test

I was a UI Developer at my previous job and created my original CSS coding test for candidates. I would like to share how I created the test, and demonstrate actual exercises to show what kind of CSS skills are required for job hunting!

@Code & Coffee meetup on Apr 20th:
https://www.meetup.com/Code-Coffee-Vancouver/events/237554718/

Talk Video on Youtube:
https://youtu.be/MPF2cARGzmY

Post on Medium:
https://medium.com/@ellekasai/how-to-create-css-coding-test-2ba17c4be423

Demo (Button Test):
https://codepen.io/ellekasai/pen/rmeWRO?editors=1100

Demo (Positioning Test):
https://codepen.io/ellekasai/pen/KmzNGY?editors=1100

Transcript

1. How to Create CSS Coding Test by Elle Kasai
2. About me • UI Developer/Designer • Tokyo ✈ Vancouver • Doing Front-end @ Glass Canvas • Worked on Open Source Projects • Started YouTube Channel Recently
3. Today’s Topic
4. How to Create CSS Coding Test
5. How did it happen?
6. Hey, Elle. I’m thinking to hire more UI developers like you. You’re doing awesome!
8. But I’m not sure how to find the candidates like you, and what kind of CSS skills are required for this role…
10. So… Could you create some CSS tests for candidates?
12. I learned a lot of things! %FTJHOFE
    CZ
    1IPUPSPZBMUZ
    
    'SFFQJL
13. How did I create the coding test
 & Advices for Candidates
14. How did I create the coding test?
15. Hey, Elle. I’m thinking to hire more UI developers like you. You’re doing awesome! Define the Ideal Candidates
16. Define the Ideal Candidates • Design Oriented • Detail Oriented • One Layout, Multiple Ways • Developer UX
 (Maintain Code, CSS Architecture)
17. OK, let’s create some CSS coding test to check those skills!
18. Basics & Exercises for 3 Types of Level
19. Design Oriented? Detail Oriented? Beginners Intermediate Experts
20. One Layout, Multiple Ways There are three boxes in the web page. How to change the layout like this? Spend no longer than 10 minutes on it. Red box -> Top Left of the page Blue box -> Top Centre of the page Yellow box -> Top Right of the page
21. There are 5 ways at least! •Position and Negative Margin •Position and Transform •Position and Margin Auto •Float and Inline-block •Flexbox One Layout, Multiple Ways
22. Developer UX
23. Let’s Sum Up!
24. As an Interviewer… • Define the ideal candidates • Prepare 3 types of level • Check the process of coding %FTJHOFE
    CZ
    1IPUPSPZBMUZ
    
    'SFFQJL
25. As a Candidate… • Show your process as much as you can • Better to show multiple ways • Enjoy the test %FTJHOFE
    CZ
    1IPUPSPZBMUZ
    
    'SFFQJL C+ +
26. Time flies so fast!
27. I’m planning to make some videos!
28. You can find other tests on Google too!
29. Thank you :) About me: ellekasai.com Twitter & GitHub: @ellekasai Email: elle.kasai@gmail.com