CYF Docs
  • Welcome to CodeYourFuture Docs
  • CodeYourFuture Curriculum
  • 🏨Organisation
    • Our History
    • Agreements & Policies
      • Naming Accounts Consistently
      • Code of Conduct
      • House Rules
      • Trainee Forms
        • Personal Circumstances Forms
        • Course Withdrawal Request
        • Leave of Absence Request
        • Learner Agreement
      • Trainee Expenses
      • Trainee Pregnancy Policy
      • Volunteer Agreement
      • Volunteer Expenses
      • Complaints Procedure
    • Partnerships
  • 👨‍🎓Trainees and Alumni
    • Overview
    • Course Eligibility
    • Basic Online Skills Course
      • WhatsApp Community Guidelines
    • CYF Products
      • Our Products
    • Trainee Support
      • Signpost
      • Request a Laptop
      • How to get a bank account
      • Minimum Laptop Specs
      • Trainee Expenses
  • 👩‍🏫Volunteers
    • Overview
    • Teams
      • Tech Education
        • Roles
          • Lead Trainer
          • Technical Assistant
          • Tech Buddy
          • Syllabus Team
      • Professional Development
        • Roles
          • PD Trainer
          • PD Coach
          • PD Coursework Reviewer
          • PD Mock Interviewer
          • PD Syllabus Team
        • PD Coach Guide
      • Community Coordination
        • Outreach Roles
        • Social Media Guide
          • Plan and schedule Social Media
        • Applicant Outreach
          • Calling NGOs and other referral organisations
            • NGO Dashboard - Step by step guide for volunteers
          • Calling Applicants
          • More outreach strategy
        • Volunteer Outreach
        • Approaching Potential Partners
        • Energisers and Icebreakers
      • Employability
        • Regional Employability Role
        • Career Mentors
      • CYF Products/Launch Module
        • Roles
          • Product Owner
          • Product Manager (Launch Module)
          • Scrum Master
          • Tech Lead
          • Tech Lead (Launch Module)
          • Developer
          • Code Reviewer
          • QA
          • UI/UX Designer
          • Business Owner (Lauch Module)
          • DevOps Engineer
  • 🚀PROGRAMME DELIVERY
    • Running the Course
    • 🌍Launching the community in a new region
      • Fundraising & budgeting
      • Finding a Space
  • Archive
    • 🗄️Archived Pages
      • Intro to Digital (ITD)
        • Re-application Requirements for Application rejection
      • After Graduation
      • Running the course
      • Getting a Job
      • Useful Links
      • Hackathons
      • Asking Questions
      • Hosting on Netlify
      • Applicant Interviews
        • Interview - Technical
        • Interview - English
        • Interview - Rubric
      • Selection Day
      • Google Classroom for Trainees
      • Google Classroom
        • Google Classroom For Volunteers
      • Re-admission to Course
      • Laptop Request
      • Requesting a Laptop or Support
      • Graduation Module
      • Join CYF Tech Products
      • Overview
      • PD Coursework Reviewer
      • PD Coach
      • Onboarding PD Volunteers
      • CYF Website
      • Mission, Values & Working Principles
      • Our Trainees Backgrounds
      • Onboarding Process
      • Dashboard
      • Joining
      • Overview
      • Tools
        • Slack
          • Slack for Volunteers
          • Slack for Trainees
      • Leaving or Stepping Back
      • After the Course
        • From Trainee to Volunteer
      • General Information
      • Overview of our Process
        • Outreach Process
        • Application Process
        • Student Selection Process
        • Volunteering Structure
        • Class Structure
        • Communication from each CYF branch with CYF Global
        • Tech Projects
        • Tech Suite
        • Marketing
        • People into Employment
        • Finances and Insurance
      • The Founders team challenge
        • Challenge 1 - Find the Founding team
        • Challenge 2 - Strategy Challenge
          • The strategy challenge Template
        • Challenge 3: Find the Ambassador team
      • The Ambassadors Challenge
      • Volunteers Requirements
      • Welcome Event
      • The first Ambassador Team
      • Intro to Digital Course
        • Course Materials
        • Intro To Digital Slack Community Guidelines
      • Fundamentals Course
        • Course Materials
      • Software Development Course
        • Course Materials
      • Guides
        • Node Version Manager
        • Common Responses
          • Create an example
          • Don't ask to ask
          • Read the error message
          • Reply in thread
      • Coursework Feedback
      • Training Tips
      • Starting a Course
      • Getting Setup
      • Hackathons
      • Codility
      • Study Groups
      • Before the Course
        • Course Eligibility
      • Request a Laptop or Other Support
      • Success Criteria
      • Joining the Course
        • Laptops
          • Installing Ubuntu
      • Assessment
        • Milestones
      • Codewars
        • Codewars Advice from CYFers
        • Codewars Advice from Mentors
Powered by GitBook
On this page
  • The Aim
  • Questions
  • Can you give me specifics?
  • What sort of questions should I ask?
  • Guidance on creating and asking questions
  • A few sample questions for the product landing page task
  • Playing Ignorant
  • Break and fix
  • Rubric
  • Understanding the question (forget about the answer for now)
  • Approach
  • Knowledge
  • Taking feedback
  • Other notes

Was this helpful?

  1. Archive
  2. Archived Pages
  3. Applicant Interviews

Interview - Technical

PreviousApplicant InterviewsNextInterview - English

Last updated 3 years ago

Was this helpful?

The Aim

The aim of the technical interview is to find out the following:

  1. Understanding: The interviewee understands the HTML and CSS basics they've presumably learned and used to a sufficient level to allow them to manipulate their page further or to recreate it from scratch (if they were asked to).

  2. Approach: The interviewee has picked up a process for searching for and incorporating new information

  3. Knowledge: The interviewee can reason through some small problems

  4. Reponses: The interviewee can express technical questions or explanations fairly clearly in English

These questions reduce the possibility of interviewees reciting prepared answers without genuine understanding.

Questions

Can you give me specifics?

Trainees are asked to build a product landing page and a tribute page as part of their application. The details of these tasks are here:

  • Find the applicant on the dashboard

  • Fork submitted work in Codepen

  • Quickly look over their work beforehand (5-10 mins)

What sort of questions should I ask?

Ask short questions which would require at least one of the following:

  • change of element types

  • change of element attributes

  • duplication and alteration of elements

  • css alterations

  • re-ordering of elements

  • removal of elements

  • for them to google something related and relatively easy which they don't know (e.g. a css rule or html attribute) such that they could potentially find the answer and make use of it in a (say) 1-minute window.

Guidance on creating and asking questions

Try not to get bogged down in minutia - we're looking for a good overall understanding not recalling specific APIs

It's fine to ask questions that the trainee might not know the answer to or which might be considered advanced. Just be positive and make it clear that they're not expected to know the answer!

Do not ask all these sample questions! Please just choose two or three.

A few sample questions for the product landing page task

How would you change your code if...

  • We want NO video when viewing with a small-screen mobile device (e.g. smartphone)

  • We want clickable links from your landing page to your tribute page and vice versa, maybe at the foot of the page

  • The company has a partner that wants their logo added to the header, too!

  • We want the navbar to always be shown at the bottom of the viewport, instead of the top?

  • [Ask this AFTER "playing ignorant", below]. What if I wanted to collect email address AND full name?

    • (Note copy paste isn't quite enough here - they'd have to disable validation of the name field as an email address)

  • We want to add a sound file to the page (or a playable video game, if they already know)

    • Here we're intentionally asking for something they've hopefully no clue how to do.

    • DON'T have them waste time taking this all the way, even if they can.

    • You just want to at least see that they can search and start to select from search results intelligently

Playing Ignorant

Make a "mistake" understanding the email address form field, and see if they can help you.

  • You: "This form field of the form rejects when i try to submit my name ("Neill"). What's going on?"

    • Hint (if necessary) so they don't treat you as infallible: You: "Am I doing something wrong? I might have the wrong idea here..." ... "I might be intentionally making a mistake here, what mistake am i making?"

  • What we're looking for:

    • Candidate understands our mistake - it should be enough for them to read the presented error message

    • Can articulate to us why we're seeing an error and what we might do to remedy it

    • Can explain how this validation has been enabled in their html code.

  • Follow up: You: "Ah! So how do you get it to validate an email field?"

Break and fix

Fork their site and break it (e.g. cause elements to become unstyled by changing element ids or classes). Point out the errors from the user perspective (not from a code view), and ask them to fix your code.

Make sure you're agreed on what the client expects: "We want this footer text to be neon pink, and ten feet tall, right?"

How do they go about debugging it?

Here are some likely hints (if they struggle for a while):

  • [First check you have the same expectation]: "We expect this text at the bottom of the page to be bright pink, right?"

  • "How would you do that in the first place? Forget that I broke it - do it from scratch as you would for any text." [avoid them obsessing on what got broken, or how. guide back to first principles.]

  • "How does it know that this rule in css is meant for this text?" [Looking for the aha of a wrong class or id]

Rubric

You may have asked more than one question, or you may have only had time for one. For each question you asked, consider the following areas. Now, overall, place the candidate on the scale provided.

Understanding the question (forget about the answer for now)

  • Clearly understood the question

  • Maybe understood the question

  • Probably didn't understand the questions

  • I had no chance to assess this

Approach

  • Showed an excellent approach to the question

  • Showed partial signs of a good approach to the questions

  • Showed a poor approach (e.g. helplessness)

  • I had no chance to assess this

Knowledge

  • Knew the answer

  • Was clearly familiar with the domain and got to the answer after light hint(s)

  • Didn't know the answer

  • I had no chance to assess this

Taking feedback

  • Took feedback well (acknowledged and/or incorporated or rejected with reasoning)

  • Took feedback with prompting

  • Took feedback poorly (denial / no acknowledgement)

  • I had no chance to assess this

Other notes

  • Any other notes on the technical interview or candidate's performance? Please contribute your insights, and any important context to your grade, in the text box.

🗄️
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page
https://placekitten.com/200/100