HTML Qualification

Task:	Demonstrate the ability to build a web page with nested HTML.
Conditions:	This Github repository is downloaded locally and loaded into vs-code.
Standards:	In a Pull Request (PR) with a Netlify preview enabled create a HTML webpage with the following: three different types of headings two paragraphs with three different kinds of inline elements A br and a hr A header and footer Two different sections An unordered list of three items An anchor tag with a link A Form with a textarea, three types of inputs` and a button A table with three columns and three rows with a header, body, and footer

Notes:

• Create a Pull Request (PR) to this Github Repo and assign the web-qualifed team.
• #18

References

• Deploy Netlify
• Getting to know HTML
• Building Forms

Task	Demonstrate the ability to build asynchronous Javascript applications
Conditions	vscode Live Server running and serving an HTML webpage with Javascript
Standards	Use Javascript to: Create an HTML button that on click that uses a JS Promise to wait one second and then sends a fetch request to GET data from an external API Once the request is sent show that the request is loading If the request succeeds show the contents of the received data to the webpage If the request fails show the error status code and message

Notes

• You'll get a list of data by sending a Fetch (AJAX) GET request to https://swapi.dev/api/people/
• If you're getting CORS errors ensure you're navigating to the web page served by vscode Live Server

References

• vscode Live Server
• setTimeout
• JS Callbacks
• JS Promises
• fetch (AJAX)
• JSON.stringify

Welcome to the Javascript Web path

Task	Create a plan to build a scalable portfolio
Conditions	With a Figma account
Standards	Present your design documents in the Cohort Slack channel Create a document with copy for your web portfolio Create a using Figjam Wire Frame Create a design using Figma

Resources

• Figma
• How to design a portfolio

CSS Qualification

Category	Standard
Task:	Demonstrate the ability to build a fully responsive website using CSS
Conditions:	This GitHub repository is downloaded locally and loaded into vs-code.
Standards:	In the PR style, the HTML webpage using CSS with the following: Style three sections so that they are in a row on desktop, two in a row on top and one on bottom on tablet, and all in a single column on mobile Use a media query to style an image to 100% width on mobile and 80% width on desktop Style three buttons in a row with padding, margin, border, and box shadow On button hover transition the background colors of each button Style the page by default is completely hidden. On page load reveal all the content using keyframe animation

Notes:

• Create a Pull Request (PR) to this GitHub Repo.
• Use a naming conventions for CSS class naming (like BEM)

References

• Getting to know CSS
• Box Model
• Backgrounds
• Responsive Design
• Transitions and Animations

Task	Create an API that uses the file system as a database
Conditions	Nodejs and Nextjs are installed and configured
Standards	In your folder create a file that will be your "database" name it with the file extension .json. In the pages/api folder have the following: 1 file that reads and returns the state of the database. 1 file that can delete data in the database. 1 file that can create/update data in the database

Notes

• Recommend using fs/promises API as it's simpler than the callbacks API

References

• process.cwd
• path.join
• Nodejs File Processing

Task	Use Next.js to build a full stack application with a framework
Conditions	Submit a pull request to this repository
Standards	Create a next.js app with typescript Build a CRUD app with data that is served from an external API Use getServerSideProps to load data and prerender the page

Notes

• Use crudcrud.com as the external API for this task

References

• Create a Next.js app with typescript
• Next.js Page
• Next.js getServerSideProps
• Next.js API Routes
• Next.js real Easy by Coding Train ~Schuster

Task	Use Figma Components and Prototyping to scale mockups and use UI/UX best practices
Conditions	Member has a working Figjam/Figma account
Standards	Create a PR that updates a README explaining what design updates you made to your previously linked Figma and why you made them Update your design to utilize Figma components Setup Prototype interactions to show navigation Update your design to use 5 different UX laws

References

• User Interface Best Practices
• Laws of UX
• UI/UX Design Tutorial
• Figma Components
• Figma Prototyping

Task	Use React js to build a component based web page
Conditions	As a Pull Request to this repository
Standards	Create a Parcel js web browser project with React and Typescript Create a React webpage that uses two buttons to change a number's value Build a third button that resets the value Build a component that changes the background color of the web page

Note

• Use React hooks as opposed to React classes

References

• Parceljs Web app
• Parceljs React
• Explore React
• React useState

Task	Use Typescript to write reliable Javascript
Conditions	Parceljs configured library
Standards	Setup Typescript in your Parceljs project Create a type for an array of objects with their values being strings Create a function that takes an array and a number as parameters In that function add the number parameter amount of objects with strings of random characters. Return the array Create an empty array with the array type created Create a new variable calling the function passing in the array console.log the result

Note

• Add "noImplicitAny": true, to tsconfig.json
• Please don't use any if you can

References

• Parceljs Typescript setup
• Typescript Arrays
• Typescript Objects
• Typescript Functions

Task	Use Javascript to add interactivity to a web page
Conditions	A HTML webpage with JS loaded after the HTML
Standards	Use Javascript to do all of the following: Select the <body> element Add a list element as a child of the body Add 2 button as children to the <body> element The first button should add an list item element to the newly created list The second button should remove a list item from the list Make an event that listens for a click on one of the list items and when that event happens something updates (example: the background color updates) using .classList.add and .classList.remove

Notes

• Please use addEventListener instead of onclick. We will use onclick later in the course.

References

• DOM overview
• Select elements
• Modifying the Document
• JS Events
• classList

Task:	Demonstrate the ability to use Javascript to manage basic data structures.
Conditions:	Member has a web page that is loaded to a browser
Standards:	Make a Pull Request with a a Javascript file that is loaded in the head of an HTML file that does the following: Assign an array of 5 random numbers to a variable Assign a number to a variable and call it counter Use a for loop to iterate through the array and add the counter to each item in the array On each iteration add 1 to the counter Define a function that takes an array as an argument and uses a while loop to console.log whether each item in the array is even or odd Call the above function with the previously assigned array variable as a parameter Call the above function with a new array with 5 random numbers Delete the third item of the saved array Add a string to the front of the saved array Add a string to the end of the saved array console.log the saved array

Reference

• Script Element
• console.log
• Declaring Variables
• Arrays
• Functions
• Loops and Control Flow
• Conditionals

Dev Workflow Qualification

Task:	Demonstrate the ability to use VS-Code to write Markdown that is pushed to Github via the github CLI tool
Conditions:	vs-code installed github cli installed github cli configured with user profile
Standards:	The student must demonstrate over the course of ~30 min meeting that they can: Create a Github repository Download that repository Create a git branch Use vs-code to add 3 Markdown formatted README.md changes Push those changes to the Github repo via a commit to the newly created branch Open a Pull Request to the main branch

Note

Pull Request #15

References

• Download VS Code
• Download github cli
• Configure profile with ssh keys
• git guide
• Create a pull request