📈Rubric
Last updated
Last updated
| Interview Prompts | Topic | Objective | 3 | 2 | 1 | Relevant Links for students |
|---|---|---|---|---|---|---|
Advanced CSS (responsiveness)
Build modern responsive layouts for a wide range of screen sizes
Student can explain difference between max width in query and min width - min is mobile first (scale up), max width is desktop first (scale down). Student understands that viewport metatag needs to be in head for mobile browser to read media queries. Student consistently and appropriately uses responsive units (rem %, vh, vw) and can justify why and where they use them.
Student uses max width, min width, and responsive units correctly. Student understands basic principles of mobile first and desktop first design, but may not fully connect their code with these principles. Student's explanation presents no red flags as listed in requirements for a one.
Student is missing something important in media query such that switching browser width is problematic. Student cannot score higher than a one if they use pixels where they should use responsive unit or uses responsive units incorrectly.
Review session on responsive CSS and accessibility: https://www.youtube.com/watch?v=b3EsaDxuUl4
Accessibility
Use HTML tags, CSS selectors, and Flexbox to build a responsive, accessible website
Student provides both examples (table) and non examples (div or span) of semantic html. Student can give examples of how semantic html tags are useful for any disadvantaged group (blind, low-connectivity areas). Student explains or attempts to explain how to make forms and images accessible and understands the importance of doing so. Student can explain why accessibility matters from both a business AND personal standpoint.
Student can define semantic HTML as tags that have english meaning (may not use the term 'semantic HTML' and that's ok). Student similarly understands that semantic HTML is important for accessibility. Student can explain the use of alt tags for images, explains that structuring HTML is important Student can explain why accessibility matters from either a business OR personal standpoint.
Student can't define semantic HTML. Student cannot score higher than a one if they can't or don't recognize accessibility as an important part of web development.
Intro to Javascript
Understand how to write and use functions and callbacks
Code is logical and succinct. Student defines higher order function, callback functions and explains similarities between the two in terms of functionality and returns. Student can define callback as a function that can be passed into another function as a parameter and clearly distinguishes between an argument and a parameter.
Student identifies the higher order function that takes three paramaters where at least one is a callback. Code does not need to be perfect to get a 2. Student can define callback as the function that gets passed into a higher order function and higher order function as recieving other functions as parameters.
Student cannot distinguish between higher order function and callbacks.
Brit's class on this topic https://www.youtube.com/watch?v=YPrDfOaG6W4&=&feature=youtu.be and the codepen solution for that recording is here: https://codepen.io/BritHemming/pen/LYVgjxg?editors=0010
Applied JS
Build components to retrieve data from web APIs
Student designed universally effective functions to handle promise and explains how they could be used with any API request. Data returned from the API was formatted to match the apps needs before it was set to state. Student may have used advanced JS syntax like async/await with try/catch blocks.
Student explains how they used 'axios' or 'fetch' to access and return data from a specific endpoint (and understands, at a basic level, that an endpoint is where the data lives online). Student explains the use of .then() and .catch() to handle promise data
Student may have an API call in their project, but cannot explain anything about the syntax or doesn't explain promises Student cannot score higher than a one if they are missing dependency argument (empty array) using the effect hook
Single Page Apps
Use React Router and its components to render multiple routes
Student's code is strategically organized at the component level with foresight to further development, proper usage of state and props are demonstrated throughout the project. Student can use and explain switch tags as important to force page to render one route at a time Not only are standard network request techniques employed, the code is organized in such a fashion that the student demonstrated proper use of container vs presentational components or other industry standards, conventions or patterns.
Student's code is organized at the component level, proper usage of state and props are demonstrated throughout the project, the Route management is properly installed and used to show top level pages as well as nested views where necessary Student uses the Route component to load pages based on path Student can make use of switch tags or exact prop, even if they don't exactly know why this is important
Student either doesn't have a routing system in place, or can't explain what routing is in a SPA application. Red flag: neglects to use browser router or router
Single Page Apps
Use forms to build interactive Component Behavior.
Student showed great insight in setting up the state management for the app's forms. Form validation is in place for all fields, and covers all use cases. Loading states and success/error notifications are in place and add to the overall UX of the app Student performs CRUD operations on components in any capacity Open/save/exit/edit/cancel work how they should
Student has set up component management for the forms in the app that makes sense for each form. Student made the decision to use a third-party library, like Formik, or not, and can defend their decision. Some form validation is in place.
Student uses uncontrolled components, not controlled by react state. Student can't defend decision to use uncontrolled components. Performance of the app suffers due to improper form management.
State Management
Understand different ways to manage state and demonstrate appropropriate use of a state management system.
Student uses and explains state management that is coherent at all levels including explanation of the following details: - system has some global state (fetched a user) - every component has information about said global state Student can defend decision to handle state and component tree with redux, context, apollo-client,** **component state, or other researched thing over any other system. Student clearly understands both advantages and disadvantages of their decision. Student clearly explains how state is handled throughout levels of their system.
Student uses and explains state management that makes sense across component tree Student used redux, context, apollo-client, or component state and can point to advantages of using their chosen system in their context. Student does not have to use Redux or context - plain old React state management is fine as long as they can justify that decision. Student clearly explains how state is handled throughout levels of their system
Student may show use of a state management system but can't identify why they used it or any advantages of that system.
Review Session: https://www.youtube.com/watch?v=iJBca_uivG8 Training Kit: https://learn.lambdaschool.com/web3/sprint/recukritK1B1pFrcM
APIs
Use RESTful HTTP methods to interact with an external data source.
Student meets requirements for a 2 and uses well organized file structure, dedicated files for accessing endpoints and demonstrates an in depth understanding of structure. Pages making HTTP requests do so in a logical manner that is cohesive with the app's state management system.
Student identifies external data sources as APIs and can find an appropriate and correct example of interaction in their code. Student is able to accurately defines 4 terms (CRUD) and knows why they used the operations they used. [note: it is OK to ask students to define these if not in their first answer] - PUT replaces records - POST creates records - DELETE deletes records - GET fetches records
Student may or may not be able to identify APIs and explain that they are external data sources, but understanding of CRUD does not go beyond 'GET' requests.
Training Kit Link: https://learn.lambdaschool.com/web3/module/recupVjaAKPqbuk7Y/
Node.js
Use Express' built-in router to build and test a modular server API with Postman.
Student's explanation includes variable scoping such that API could be dynamically deployed to any website. Student incorporated services interfaces and appropriate repositories for code reuse and deployed the API to a hosting platform. The API is configured to dynamically load configuration and secrets using environment variables
Student built and deployed a Web API following the REST architectural pattern with code that is clean and organized using the Express Framework. Explanation must include differentiation between client and server route and why different routes are needed (specificity, readability) Student may include details about naming with nouns, http verb usage, resource hierarchy, etc.
Explanation includes only one route (either combines server and client, or only discusses one option). Explanation focuses on project requirements, does not actually explain the importance of routing. Student cannot score higher than a one if they misuse or incorrectly explain request and response methods.
RDBMS
Use SQL to create and query a local database, table schemas, configure scripted schema migrations & seed scripts.
Student designs a highly detailed, scalable database. Student can relate design decisions to the "Normal Forms". Student migrated from SQLite3 to use a server RDBMS, like Postgres or MySQL and migrations and data access code continues to work without changes.
Student's explanation should focus on how database is interactive and easy to perform CRUD operations on. Student might discuss primary and foreign keys, how they manage different data types, how they manage different data relationships, etc. Student explains data persistence, normalized data models and explains how code ensures data integrity and consistency.
Student cannot score higher than a one if they did not normalize data, did not join data, or did not use constraints (foreign keys) to guarantee data integrity.
Client-side authentication
Handle authentication with tokens in a React app
Student demonstrates tokens stored in cookies or explains why this would be a better strategy. Student explains client side treats token minimally and synchronization with server side. Student's app can clear tokens on logout but not close as to keep access channels open.
Student explains that tokens are stored in either memory in browser, session storage or local storage and explains what that means for their application.
Student has a vague understanding of tokens and authentication. Student cannot score higher than a 1 if they only discuss server-side authentication