Skip to content

Frontend Frontend Op Qual

Jump to bottom
Schuster Braun edited this page Aug 4, 2021 · 1 revision

Overview

Frontend frontend engineers are expected to deliver performant and accessible user experiences that are delivered to web browsers.

Internet functionality and code work flows.

  • Internet Basics
    • Understand the impact of the internet and its ever expanding market=
      • (Context for why we chose web development for a boot camp)
    • Differentiate between browser, server, and PC
    • Bonus Understand what a router does
    • Bonus Understand DNS' relationship with ip addresses
  • CLI (navigate file system) ​
    • Understand your file system and how to navigate to files and folders
    • ls, cd ​
  • VS Code
    • Open code in a workspace
    • Edit code and save it
    • Add plugins/extensions
    • Use command pallette ​
  • VCS (Git/Git workflow)
    • Save work to VCS (Github)
    • View work on Github
    • Pull (clone) work from VCS
    • Create a branch
    • Merge created branch ​
  • Markdown
    • Save a README.md file at root of project
    • View README.md on Github
    • Reference Github Markdown syntax

HTML && CSS

  • HTML
    • Create a HTML document
      • Add a head, body
    • Load a HTML document in the browser
    • Add metadata to page
    • Block and inline elements
    • Add multimedia content
    • Understand HTML attributes
  • CSS
    • Box model
    • Colors
    • font apis (font*)
  • Debug
    • Troubleshoot HTML/CSS (browser's Elements tab)

Programming I

JS 0

JS I

  • Load JS into a html document <script>
  • Debug and log (console.log, browser console tab, Nodejs console)
  • Create/update variables with any data type (string, boolean, integer)
  • Create conditional statements (if/else)
  • Create loops (for/while)
  • Create/update arrays
  • Create functions
  • Create/update objects
    • Bonus Add properties/methods to objects

DOM Manipulation

  • JS
    • Select elements
    • Add/remove elements
    • Update element attributes
    • Add event listeners
  • JQuery
    • Add libraries using <script>
  • CSS3
    • children (nth-child)
    • pseudo elements (:before/:after)
    • Use position
    • Use display
    • Use Flexbox
    • Bonus Use keyframes
    • Bonus Use transition
  • Debug
    • Troubleshoot z-index (browser Layers tab)

UI

  • Figma
    • Design web pages using tool
    • Share designs
  • SMACSS
    • Use naming convention to write class names
  • Responsive/Mobile design
    • Use Media queries
    • Use CSS Grid
  • Accessibility
    • Understand what is web accessibility
    • Understand how to evaluate accessibility
    • Understand how to develop with accessibility considerations
      • (focus, color ratio)
    • Use ARIA attributes
  • Auditing
    • Audit web page performance/accessibility (browser Lighthouse tab)

UX

  • Draw.io
    • Build wire frames
    • Iterate and receive feedback on wire frames
  • Figma
    • Build reusable components
    • Create color palette
  • Concepts
    • Understand tenants of design psychology
    • Understand color theory
    • Understand human computer interaction
    • Understand design thinking
      • (color, balance, typography, contrast, consistency)
    • Implement design systems
    • Implement style guides
    • Understand interaction design methodologies
      • (Goal Driven Design, Usability, The Five Dimensions, Cognitive Psychology, and Human Interface Guidelines)
    • Understand design strategies

JS II

  • Nodejs
    • Install JS dependencies via npm
    • Use bundler (Parcel or Webpack)
    • Create simple npm scripts
  • JS
    • Understand scope
    • Understand closures
    • Understand hoisting
    • Use higher order array functions (map, filter)
    • Perform AJAX requests
    • Use Promises
    • Parse/stringify JSON data
  • Debug
    • Troubleshoot using breakpoints in VS Code/browser
  • JS Testing
    • Setup Jest
    • Run Jest tests
    • Create expectations/assertions
    • Spy on functions
    • Mock functions
  • Deploy to Static content provider (netlify, surge, Github pages)

React 0

React I

  • React
    • Install and run create-react-app
    • Render Hooks
    • Pass data via props
    • Render lists
    • Conditionally render components
    • Setup event listeners
    • Use React hooks (useState, useEffect, useContext)
  • ES6
    • Understand purpose for Babel
    • Use let and const
    • Use Arrow functions
    • Use async/await
    • Use object destructuring
  • SASS
    • Understand CSS preprocessing
    • Understand CSS in JS
    • Use Sass nesting
    • Use Sass modules

JS III

  • JS
    • Understand some this binding issues
    • Create object constructor with function
  • ES6
    • Use Rest/Spread operators
    • Use class, constructor, method syntaxes
    • Use for...of and for...in loops
    • Use optional chaining
  • React
    • Use React Router
    • Test React components
    • Use React Testing Library to Render containers
    • Use jest-dom for assertions
  • Debug
    • Troubleshoot browser storage (browser application tab)
    • Troubleshoot data fetching (browser network tab )

Next.js

  • Understand the difference between SPA, and SSR vs SSG
  • Use create-next-app to generate and develop apps
  • CRUD and navigate between pages
  • Understand Next.js pre-rendering
  • Generate static content (SSG) with getStaticProps
  • Use getServerSideProps to SSR
  • bonus Build dynamic routes
  • bonus Create static/dynamic API routes
Clone this wiki locally