Pre-Mock Preparation & instructions

1. You must be in the same zoom room as your peer.
2. How to score the candidate (interviewee):
   1. For the non-technical conversation you’ll have the questions and guidelines on what should the candidate more or less talk about (it’s an open question so you expect from the candidate to be professional, focus on the question and not another unrelated topic).
   2. For the technical conversation part you’ll have for each question its correct answer and the candidate will either give the whole correct answer to get the whole point otherwise you give them 0.
   3. for the other coding exercises, the interviewee must have a working program with the correct output / answer to get the whole score on the task, otherwise 0.
3. Set a timer before starting each section.
4. If the candidate doesn’t answer all the questions for each section and the time is over, you should move to the next one ! ⇒ Set a timer on your phone or your computer before starting each section !
5. VERY IMPORTANT :
   1. Before starting the Mock Interview
      1. You as the interviewer must be logged in to use the google sheet to score the candidate.
      2. The candidate must give you their information that you’ll need to fill the google sheet such as :
         1. Intranet ID number
         2. Campus
         3. Name
         4. …
   2. How to score ?
      1. Give the full score (Scale / Max score column in the sheet) is the answer is complete.
      2. Give half the score if the answer is partially correct. (around 50% of the max score of the question).
      3. Give 0 if the answer is wrong.

Part 1: Non Technical Conversation (5 minutes)

1. What motivates you about web development?

   1. answer example :
      1. Passion for building user-centric experiences, continuous learning, tangible impact.

2. What are your long-term career goals ? Explain how do you think you’ll achieve your goals.

   1. Becoming a full-stack engineer, frontend, backend, blockchain, game developer…
   2. A startup founder
   3. An investor
   4. A team lead or an engineering manager
   5. A freelancer….
   6. They must explain (not into much details) how do they think they’ll get to their goal(s).

3. Tell me about a group project that you’ve worked on lately and what did you learn from it (technical and soft skills).

   1. They can mention one of the C projects that they’ve worked on, printf, simple shell, binary trees or any other personal project, etc.. the question is open so they just need to remain professional and focus on the topic of the question and not talk about something else.

4. How do you handle conflicts in team projects (e.g., coding style disagreements)?

   1. answer example :
      1. Communication, empathy, consensus via code review standards, focusing on objectives.

5. What’s your biggest weakness, and how do you mitigate it?

   1. answer example :
      1. Shows self-awareness + growth mindset (“I tend to over-research; I now set time limits”).

Part 2: Technical Conversation (15 minutes)

1. What's the difference between <section> and <article> elements?

   1. answer :
      1. A <section> groups related content thematically, like chapters in a document, while an <article> represents self-contained, independently distributable content like blog posts or news articles. The key distinction is that an article should make sense on its own if extracted from the page, whereas a section is a thematic grouping within a larger context. You can have multiple sections within an article, or multiple articles within a section.

2. Explain the difference between justify-content and align-items in Flexbox.

   1. answer:
      1. justify-content controls alignment along the main axis (horizontal if flex-direction is row, vertical if column), affecting how items are distributed across that axis. align-items controls alignment along the cross axis (perpendicular to the main axis), affecting how items are positioned within their flex lines. For a row layout, justify-content handles left-right spacing while align-items handles top-bottom positioning.

3. What's the difference between align-items and align-content?

   1. answers:
      1. align-items aligns flex items along the cross axis within each individual flex line, affecting single-line or each line in multi-line layouts. align-content only applies to multi-line flex containers and controls how the flex lines themselves are distributed in the container along the cross axis. If you only have one line of flex items, align-content has no effect.

4. What are the main differences between mobile-first and desktop-first responsive design approaches?

   1. answer:
      1. Mobile-first starts with styles for small screens and uses min-width media queries to add complexity for larger screens. Desktop-first begins with full desktop styles and uses max-width queries to simplify for smaller screens. Mobile-first is generally preferred because it enforces progressive enhancement, results in better performance on mobile devices (loading minimal CSS first), and aligns with the principle of starting simple and adding complexity rather than removing it.

5. Explain the difference between em and rem units.

   1. answer:
      1. em is relative to the font-size of the element itself (or its parent if used for font-size), making it useful for component-based scaling but potentially complex with nesting. rem is relative to the root element's font-size, providing consistent scaling across the document.

6. What is keyboard navigation and what are the key principles for implementing it?

   1. Answer:
      1. Keyboard navigation allows users to interact with websites using only keyboard keys (primarily Tab, Enter, Space, and arrow keys) without a mouse. Key principles include: ensuring all interactive elements are focusable and have visible focus indicators, maintaining logical tab order, providing keyboard shortcuts for complex interfaces, not creating keyboard traps, and allowing Escape to close modals.