Techtonica Wk 2 Assessment

Assessment-1.md

Assessment-1

Portfolio Project with HTML, CSS, Bootstrap

Portfolio Link: https://github.com/daaimah123/portfolio-website

Languages

• HTML
• CSS
• Git
• bash

Frameworks

• Bootstrap

Other Skills

• VS Code
• Developer Tools
• Keyboard Shortcuts
• Web Patterns
• UI/UX
• Github for code storage and static-site hosting
• Ergonomics
• Writing a good ReadMe

Primary Goals

To demonstrate understanding of the topics covered in the first two weeks of this course.

Overview

In this project, you will build a simple portfolio page to practice what you've learned about VSCode, HTML, CSS, Git, and Bootstrap. This should take about 3 hours.

Context

• A great portfolio page will be valuable way to showcase your skills as you look for engineering work.
• After you've learned more coding skills and tools, you will be making this site even better.
• Include your new coding skills in your resume!

Motivation

Increase your job prospects dramatically with your own personal web page. Get creative and show off your technical skills. Employers will love you! Here's a list of example portfolios https://github.com/HackathonHackers/personal-sites

Starter Code

There is no starter code for this project. You can do it!

Project Requirements:

---

Part 1 - Build your amazing portfolio page in with HTML, CSS, and Bootstrap

Ergonomics

• Remember get up to stretch or walk for 5-10 minutes every hour. (Set an alarm)
• Each hour, check foot, knee, elbow, and spine position and correct if necessary. (Set an alarm)

Create your project

• Use bash to create a local portfolio-website directory. Use the command line to make an portfolio.html and an portfolio.css in the portfolio-website directory.
• Use the command line to change the names of portfolio.html and portfolio.css to index.html and index.css.
• Use the command line to make a gitignore file in your desktop directory and add at least one real unwanted file to the gitignore.
• Use the command line to move the gitignore file from your desktop directory to your portfolio-website directory.
• Using your command line, initialize a github repo in portfolio-website.
• Create a remote repo for the project in your github account.
• Using your command line, add and commit your portfolio-website directory, and then do a git push.
• Open your portfolio-website directory in VS Code using your command line.
• Increase or decrease your VSCode text size before starting.
• Open your VSCode Integrated Terminal, and close your terminal/command line program.
• Add a linting extension to VSCode. You are welcome to keep or remove it after trying it out.

HTML

• Use VS Code shortcuts to create boilerplate code for your html file.
• Open and view your html file in Chrome using only the VSCode application.
• Make a basic header for your online resume - your name and a short description of your experience.
• In a seperate section, list a few coding experience entries and some past work experience that you can apply to a tech job.
• Add a title tag to your file.
• Double check that you have proper indentation for readability.
• Use semantic tags rather than presentational tags when possible.

Developer Tools

• Inspect your page at least once using the Source Code Viewer
• Inspect your page at least once using the Quick Source Viewer Chrome Extension
• Access the JavaScript console at least once to check your page for errors and warnings.

CSS

• Link your index.css file to index.html.
• Style your text using at least 3 different properties.
• Add and style a profile photo of yourself. Include a border.
• Have some info in a second column
• Use one "id" correctly.
• Select 3 web design patterns to implement
• Use your search bar at least once to jump to an element or style.
• Have 2 css blocks that include the class "override" with one overriding the other rule in an obvious way.
• Change the display property of at least one element.

Bootstrap

• Link bootstrap to index.html file.
• Create a navigation bar that includes your name as the page title, and at least two links including your github profile and linkedin profile.
• Use at least two bootstrap tags or classes to style your nav bar.

Media Queries, UI, UX

• Have at least one style change each for a narrow, medium, and wide browswer window.
• Use developer tools at least once to inspect your styles and check window width.
• Make sure the User Interface of your site is appealing at all widths while keeping it simple.
• Ask a peer to test your site and tell you about their experience. Change one thing that would provide better UX.

ReadMe

• Create a ReadMe.md file with your command line.
• Include relevant ReadMe content.
• Use markdown to organize your ReadMe.

---

Part 2 - Save it using your command line, Git, and deploy on Github

• Use git to check the diff of each changed file to be sure the changes are what you want.
• Add the changed files one at a time, commit with a short message about what you changed, and push to github.

Go live with GitHub

• Go into the settings of your portfolio-website repo in Github and create a link for your live site
• Make the link to your live github.io site clickable on your ReadMe.

---

Extensions

• Spend what remains of your 3 hours to make improvements to your portfolio site, and be sure to push your changes up to github.

Assessment-10.md

Assessment 10 Objectives

Assessment Outline: Advanced Methods: Assessment 10

Deploying to Heroku

Deploy their website to a third-party hosting service such as Heroku.

Recursion

Understand the structure and definition of a recursive algorithm Distinguish between iterative and recursive functions Recognize problems where recursion would be a good solution Solve coding challenges using recursion

Memoization

Understand memoization Recognize the benefit in runtime complexity when using memoization Write code that uses memoization Explain the differences in runtime with memoization, tabulation and regular recursion

Agile Development

Explain why Agile became popular in the software development world Identify the difference between plan-driven and Agile development Understand Agile values and principles Name and understand at least 2 Agile methods and some technical and process-oriented tools

Refactoring

Understand the intent of refactoring Know when to refactor and when not to Know the potential impacts of refactoring

Functional Programming

Participants will be able to learn the basics of functional programming in JavaScript: map filter reduce mutation

Optimization

explain caching explain minification

Assessment-11.md

Assessment 11 Objectives

Assessment Outline: Data Structures

Stacks

Explain what a stack data structure is and show how it is implemented.

Queues

Understand when to use a queue Be familiar with common methods Implement a queue Find and use a queue library Discern performance tradeoffs for different implementations of a queue

Deque

Understand when to use a deque Be familiar with common methods Implement a deque Find and use a deque library Discern performance tradeoffs for different implementations of a deque

Linked Lists

Implement various types of linked lists. Understand which portions of linked lists are already implemented in JavaScript. Implement their own linked lists under the correct circumstances.

Hash Table

Understand basic hashing algorithms Know the runtime of hash table operations Be able to identify problems where hash tables could be used Be able to write code that uses hash tables to solve problems Understand how hash tables are implemented and how this implementation leads to the runtime properties

Trees

identify, implement and differentiate: trees binary tree traversal binary heaps tries

Intro to Algorithms

Understand what an algorithm is. Understanding what a sorting algorithm is. Understand the mechanics of a few sorting algorithms including Bubble Sort, Merge Sort, and Quick Sort. Understand the Runtime Complexity of these algorithms. Understand how linear and binary search work Understand the runtime of linear and binary search Know when to use linear and binary search

Assessment-2.md

Assessment-2

Portfolio Project - Incorporate SEO & a11y

Primary Goals

To demonstrate understanding of Search Engine Optimization and Accessibility Standards by incorporating them into your Portfolio site.

Overview

In this project, you will continue to build a portfolio page to practice what you've learned about SEO and a11y. This should take about 90 minutes.

Context

A great portfolio page will be a valuable way to showcase your skills as you look for engineering work, both in the content and in the code.

Languages

• HTML
• CSS
• Git

Frameworks

• Bootstrap

Project Requirements

• As you go through the lesson, commit your code in git and push to Github after each bolded section. You should write clear + informative commit messages for each commit.

---

Part 1 - Incorporate SEO into your portfolio webpage

Open latest version of Portfolio Project

• Using the command line, practice pulling the latest version from your remote git repo.
• Open your portfolio project in your text editor application using your command line.

Semantic HTML Tags

• Replace as many non-semantic elements as you can with semantic ones.
• Headers are semantic and content is suitable for SEO.
• (Remember to make a git commit after each set of code changes!)

Metadata

• Include open graph metadata
• Include at least 2 additional types of social meta tags
• Include a viewport meta tag
• Add Google Analytics to your site

Links

• Include links to at least your LinkedIn and Github pages.

---

Part 2 - Incorporate a11y into your portfolio webpage

• Images have alternative text
• Include at least 2 aria attributes in a relevant way
• Website meets WebAIM color and contrast standards.
• Passes axe accessibility tests
• Can be navigated easily using a screen reader

---

Extensions

• Spend what remains of your 90 minutes to make improvements to your portfolio site, and be sure to push your changes up to Github.

Assessment-3.md

Assessment-3

Portfolio Project: Collaboration and Review

Primary Goals

To demonstrate understanding of the topics covered in week 3 of this course, as well as pair programming skills.

Overview

In this project, you will put the finishing touches on your project by collaborating on documentation, reviewing, refactoring, and re-deploying with a partner. This should take about 2 hours.

Context

This is the third and final part of the Portfolio page project

Languages

• HTML
• CSS
• Git
• bash

Frameworks

• Bootstrap

Other Skills

• Pair Programming
• Brand Development
• Github Collaboration
• Good Documentation
• Writing a good ReadMe
• Deploying your client-side app with Netlify

---

Project Requirements:

Part 1: Pair Programming

Overview

For this section you should pair program with a partner the whole time. Complete this section with one partner's project, then the other's. Spend about 40 minutes on each person's project. Each person should spend 20 minutes "driving" and 20 minutes "navigating" for each of the projects.

GitHub Collaboration

• Fork your partner's project and use git to download it to your computer.
• Create a new branch and make changes on that throughout this section.
• For each change you make on your project or your partner's, practice making a PR for your changes rather than pushing it straight to master.

Writing Readable Code / Documentation

• Refactor code to make it more readable using whitespace at least once.
• Refactor code to make it more readable using a more clear/descriptive tag, class, id, or possibly a file name.
• Add useful comments to clarify code.
• Commit your changes, push the branch to Github, and make a PR to the master branch.

Developing your brand as a software developer

• Make sure your blog site is provided as a link somewhere on your portfolio page. If you don't yet have one, make it now with your partner.
• Have your partner describe their goals for the blog site. Does the site acheieve these goals? If not, let them know; they should write down your comments and work on this in their extra time later this week.

Part 2: Practice Code Review

Each partner should go back to their own computer and open their repo on Github.

• Leave a 'review' of the PRs created for your site. To practice the code review process, find at least one small change to request, such as changing punctuation, improving a comment, or whatever else you think of.
• Your partner should make the change and push another commit to the branch
• Now you can approve the PR, then merge it!

Part 3: Deployment

Deploying a client-side app with netlify

• Make sure your project runs without errors after all of your changes have been merged.
• Relaunch your new version of the site on netlify.

Turn in your project

• Send your portfolio page's netlify url and your portfolio's github repo url in an email to the program facilitator.

---

Extensions

• Customize your netlify url to something more professional that includes your name.

Assessment-4.md

Assessment 4 Objectives

Here are the concepts being assessed in Assessment #4: Week 3 Assessments 1-4 emailed via Repl.it :

JS1

• Create descriptive variable names
• Store numbers and strings in variables
• Perform math operations on numbers
• Increment and decrement variables
• Obtain a random number
• Find the length of a string
• Index into a string

JS2

• Create arrays using the proper syntax
• Create nested arrays
• Index into arrays
• Change data inside an array using index reassignment
• Change data inside an array using .push(), .pop(), .shift() and .unshift()
• Define a function using proper syntax
• Pass arguments into a function
• Understand the difference between global scope and local scope
• Differentiate between var/const/let

datetime

use Date() and its methods:

• new Date(...arguments),
• Date.setTime()

Assessment 4.5 Objectives

Here are the concepts being assessed in Assessment #4.5: Whiteboarding Interview Challenges :

whiteboarding

• Understand what interviewers are looking for during a code challenge
• Ask the right clarifying questions about their challenge
• Plan their solution before starting to code
• Describe the parts of the code they are writing, and the reasons for them
• Test their own functions
• Find resources for further learning

Assessment-5.md

Assessment 5 Objectives

Here are the concepts being assessed in Assessment #5: Week 4 - Loops, Conditionals, Runtime Complexity:

JS3

• Make comparisons of equality and value
• Determine the Boolean value of a given comparison
• Write a conditional control flow using if, else if and else statements
• Implement logical operators &&, || and !

JS4

• Write proper JavaScript for loop syntax
• Iterate through an array using a for loop
• Write proper JavaScript while loop syntax
• Increment a counter variable properly inside a while loop

JS5

• Know when to use a switch statement instead of an if/else statement
• Write a switch statement using proper syntax

JS6

• Create Object Literals in Javascript
• Understand property-value pairs
• Assign values to properties with both dot-notation and bracket-notation
• Change the value associated with a property
• Delete property-value pairs

Runtime Complexity

• Understand the following runtimes: O(1), O(log n), O(n), O(n log n), O(n^2), and O(2^n)
• Know the runtime of array and object functions
• Determine time complexity for simple functions and algorithms

Assessment-6.md

Assessment 6 Objectives

Assessment Outline: Restaurant Recommender System with Javascript

OOP

• Understand some of the main concepts of object-oriented programming
• Start developing an understanding of objects and classes

Assessment 6.5 Objectives

Assessment Outline: Restaurant Recommender System with Javascript - Part 2

jQuery

• Link to jQuery in their HTML pages in the correct place
• Incorporate jQuery code in the correct place in their HTML files
• Select HTML elements by their element type, class and ID with jQuery
• Implement the .on("click") and .on("hover") jQuery methods
• Implement the .append() jQuery method
• Implement the .remove() and .empty() jQuery methods

Testing, TDD

• Add automated tests to validate their website.
• Why test?
• QA
• Test methodologies
• Test-Driven Development
• Types of tests
• Unit tests
• Integration tests
• Acceptance tests

Jasmine Tests

• Add automated tests to validate their website.

Assessment-7.md

Assessment 7 Objectives

Week 6: API, AJAX, JSON Assessment can be found here. (Only admin can view.)

Debugging

• Understand the various kinds of errors that may arise
• Use console.log() statements to verify logic and output at different points in the code
• Use the rubber duck technique to talk through troublesome code
• Debug their JS code using Chrome Developer Tools

JS 9 - Callbacks and Promises

• Identify and write callbacks and Promises.
• Know when to use a Promise.

APIs and JSON

• Create request URLs
• Send requests to APIs
• Read and utilize JSON response data

AJAX

• form AJAX calls to an API.

Assessment 7.5 Objectives

Week 6: Regex Assessment can be found here. (Only admin can view.)

Regex

• Read and write RegEx in Javascript
• Use RegEx to test and replace strings
• Understand basic regular expression special characters: .*+?\w\d

Assessment 7.9 Objectives

Week 6: Assessment 7.9 can be found here.

Data Vizualization

- [ ] Become more familiar with publically available data sets

• Gain some experience determining how to select data to visualize
• Learn about several common tools and open-source libraries for visualization
• Utilize one (or several) tools to display data in a compelling and meaningful way
• Use D3 methods in JavaScript to create DOM elements
• Learn about SVG and its elements

Assessment-8.md

Assessment 8 Objectives

Week 7: Minimal API Project can be found here: https://github.com/Techtonica/curriculum/blob/master/projects/minimal-api-project.md

NodeJS

• Download and install Node.js
• Run commands in the Node.js REPL
• Explain non-blocking I/O
• Explain (a)synchronous calls
• Explain event-driven programming

ExpressJS

• Explain the MVC framework
• Create a basic web app using Node.js for the server and Express.js as the MVC framework

Data Models

• become familiar with different types of data models
• (given a user flow description) identify the necessary data needed as the user moves from page to page
• (given different types of data or a user flow description) create a data model diagram to show the relationship between data

.env

• make a .env file
• add it to gitignore
• export variables to a config
• reference the config anywhere while you develop locally
• add env variables to heroku or netlify for deployment

Relational Databases

• Explain the purpose of a database
• Explain the concept of a relational database and the use of schemas to enforce structure
• Execute basic SQL commands for CRUD with a database
• Perform basic selects and joins to find the requested information
• Create tables using DDL
• Understand the existence of different SQL dialects
• Understand the existence of other database types
• Become familiar with ORMs
• onsider how to model data for relational databases

SQL

• Create database tables
• Add, update, and delete data
• Query data
• Design a basic relational database schema fitting a use case

Database Migrations

• Add a field to a table
• Remove a field from a table
• Change the properties of a field (name, data type)
• Change the name of a table
• Know what database transactions are and when to apply them

Unit Tests

Assessment-9.md

Assessment 9 Objectives

Assessment Outline:

MongoDB

Set up MongoDB on their laptops Create databases and collections in MongoDB Add, query, and update documents

React

Explain the Pros and Cons of using React instead of other tools, like jQuery. Create a simple React Component. Hook up user actions to state changes in the UI.

Auth0

Describe the three roles associated with OAuth social media integration Explain the difference between OAuth (the protocol) and Auth0 (the service) Set up an Auth0 account and associate a social media login with a sample app

Enzyme

Add through testing with Enzyme and Jest to one of your React components

Assessment-Eleven.md

Assessment 11: Data Structures and Algorithms

(Assessment 11 Grader Guide)

Directions: For each of these data structures and algorithms, please explain in a few sentences:

• what it is used for
• what its advantages are (mention run-times when possible!)
• the high-level ideas of how it is implemented

Topics:

• Stacks
• Queues
• Deque
• Linked lists
• Hash Table
• Trees
• Linear Search
• Depth First and Breadth First Searches
• Binary Search
• Compare and contrast a few sorting algorithms

Submission:

Please put your answers in a gist and email the link to your Program Coordinator.

Assessment-Ten.md

Assessment 10 Objectives

Assessment Outline: Advanced Methods: Assessment 10

Deploying to Heroku

Deploy their website to a third-party hosting service such as Heroku.

Recursion

Understand the structure and definition of a recursive algorithm Distinguish between iterative and recursive functions Recognize problems where recursion would be a good solution Solve coding challenges using recursion

Memoization

Understand memoization Recognize the benefit in runtime complexity when using memoization Write code that uses memoization Explain the differences in runtime with memoization, tabulation and regular recursion

Agile Development

Explain why Agile became popular in the software development world Identify the difference between plan-driven and Agile development Understand Agile values and principles Name and understand at least 2 Agile methods and some technical and process-oriented tools

Refactoring

Understand the intent of refactoring Know when to refactor and when not to Know the potential impacts of refactoring

Functional Programming

Participants will be able to learn the basics of functional programming in JavaScript: map filter reduce mutation

Optimization

explain caching explain minification

CSS Commit: https://github.com/daaimah123/portfolio-website/commit/93af9627854f40b22ece63c3b0772e1c682188b9
HTML Commit: https://github.com/daaimah123/portfolio-website/commit/27e220473aeafb4d441d49c569853f11fbceded6

Assessment 1 Objectives

Here are the concepts being assessed in Assessment #1: Portfolio Project with HTML, CSS, Bootstrap:

Ergonomics

• Outline how to keep their bodies strong and healthy through the use of proper posture and body positioning relative to their computers
• Explain the importance of taking regular breaks

Command Line Interface

• Create a directory and files
• Navigate to a directory
• Change the name of the file
• Copy a file to a directory

Keyboard Shortcuts

• Navigate the command line more easily using common shortcuts

VS Code

• Download and install VS Code
• Create a Terminal shortcut to open files in VS Code
• Change the UI theme of their VS Code application
• Use several keyboard shortcuts for more efficient coding while using VS Code
• Open and execute commands on the VS Code Integrated Terminal
• Open a file quickly using VS Code
• Run a global or local search
• Add a VS Code Extension

HTML

• Create an HTML file and open it in Chrome
• Code a bare-bones HTML structure
• Draw a hierarchy of the HTML elements
• Properly write opening and closing tags for commonly-used HTML elements
• Use proper indentation to improve readability
• Code an unordered and ordered list, and know how they are different
• Make a word or phrase link to an external webpage
• Separate HTML code into containers
• Identify semantic and non-semantic elements

Git & Version Control

• Explain what Git is and why it's useful
• Define basic vocabulary used when talking about Git
• Show how to add a file to Git's tracking system and commit changes made to that file

.gitignore

• Add unwanted files to their .gitignore
• Know what data to protect from public view
• Know which files don't need to be committed

GitHub for Code Storage

• Explain the difference between Git and GitHub
• Create their own GitHub account
• Push code from their local machine to GitHub
• Identify what should be included in a README

Chrome Developer Tools

• Open the Source Code Viewer
• Use the Quick Source Viewer Chrome Extension
• Access the "Elements" tab within the Developer Tools pane
• Access the JavaScript console within the Developer Tools pane

CSS

• elect HTML elements using the type, .class and #id CSS selectors
• Explain the difference between classes and ids
• Explain what CSS properties and CSS values are, and how they're related
• Describe the 3 ways that CSS code can be incorporated into a project
• Understand the basic file tree for web projects
• Describe several text properties that can be altered using CSS
• Describe how borders can be styled using CSS
• Describe the hierarchy of specificity for CSS selectors
• Describe the different parts of the "Box" model
• Effectively use the display property

Media Queries

• understand what media query parameters mean.
• use min (minimum size and higher) and max (maximum size and lower) for query parameters.
• understand that later styles will override styles earlier in the code
• troubleshoot override issues

UI/UX Design

• Define "UI" and "UX."
• Explain how UI and UX work together.
• Identify good examples of UI and UX.

Web Patterns

• Come up with a list of web design patterns they encounter frequently during their own Internet and mobile app usage
• Select 3 web design patterns they want to implement on their personal portfolio page

Bootstrap

• Create a responsive layout using Bootstrap
• Design a website using the 12-column Grid system
• Inspect an HTML's box model using Chrome's developer tools