Tweet
Tweet

Slide 1

Slide 1 text

How to Create CSS Coding Test by Elle Kasai

Slide 2

Slide 2 text

About me • UI Developer/Designer • Tokyo ✈ Vancouver • Doing Front-end @ Glass Canvas • Worked on Open Source Projects • Started YouTube Channel Recently

Slide 3

Slide 3 text

Today’s Topic

Slide 4

Slide 4 text

How to Create CSS Coding Test

Slide 5

Slide 5 text

How did it happen?

Slide 6

Slide 6 text

Hey, Elle. I’m thinking to hire more UI developers like you. You’re doing awesome!

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

But I’m not sure how to find the candidates like you, and what kind of CSS skills are required for this role…

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

So… Could you create some CSS tests for candidates?

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

I learned a lot of things! %FTJHOFECZ1IPUPSPZBMUZ'SFFQJL

Slide 13

Slide 13 text

How did I create the coding test
 & Advices for Candidates

Slide 14

Slide 14 text

How did I create the coding test?

Slide 15

Slide 15 text

Hey, Elle. I’m thinking to hire more UI developers like you. You’re doing awesome! Define the Ideal Candidates

Slide 16

Slide 16 text

Define the Ideal Candidates • Design Oriented • Detail Oriented • One Layout, Multiple Ways • Developer UX
 (Maintain Code, CSS Architecture)

Slide 17

Slide 17 text

OK, let’s create some CSS coding test to check those skills!

Slide 18

Slide 18 text

Basics & Exercises for 3 Types of Level

Slide 19

Slide 19 text

Design Oriented? Detail Oriented? Beginners Intermediate Experts

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Developer UX

Slide 23

Slide 23 text

Let’s Sum Up!

Slide 24

Slide 24 text

As an Interviewer… • Define the ideal candidates • Prepare 3 types of level • Check the process of coding %FTJHOFECZ1IPUPSPZBMUZ'SFFQJL

Slide 25

Slide 25 text

As a Candidate… • Show your process as much as you can • Better to show multiple ways • Enjoy the test %FTJHOFECZ1IPUPSPZBMUZ'SFFQJL C+ +

Slide 26

Slide 26 text

Time flies so fast!

Slide 27

Slide 27 text

I’m planning to make some videos!

Slide 28

Slide 28 text

You can find other tests on Google too!

Slide 29

Slide 29 text

Thank you :) About me: ellekasai.com Twitter & GitHub: @ellekasai Email: [email protected]