Giter Club home page Giter Club logo

js-web-path-fitzcodes's People

Contributors

axecopfire avatar eduv2-prod[bot] avatar fitzcodes avatar

Stargazers

avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

aleemilyas

js-web-path-fitzcodes's Issues

Typescript

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

React

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

HTML

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

CSS

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

Developer workflow

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

JS I

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

User Interface/User Experience (UI/UX)

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

Welcome

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

Asynchronous Javascript

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

JS DOM Manipulation

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

Nodejs

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.