/002-careerfoundry-interactive-website

CareerFoundry Web Development Course

Primary LanguageHTML

Interactive Website

To unlock this achievement, submit a portfolio website to your mentor that fulfills the following criteria: You have successfully implemented interactive HTML5 elements with semantic tags in your website, including

  • footers,
  • forms,
  • embeds,
  • modal windows,
  • tooltips.

You have installed jQuery plugins for advanced functionality by linking script files in your HTML file, as well as writing JavaScript directly within script tags in your HTML file. Your CSS file is revised for efficiency and organization.

2.11 JavaScript and APIs

Learning Goals

  • Understand how to work with a documentation
  • Understand how data is stored and retrieved using APIs and obtain Google Maps API Keys
  • Nest Google Maps view in a visible div using HTML5 iFrame and Embed API
  • Insert interactive Google Maps using JavaScript APIv3 with properties
  • Customize Google Maps using external resources and implementing JavaScript

2.10 Object Literals

Learning Goals

  • Create new objects with object literal notation with a variety of properties, including functions, arrays, and other property-value pairs, and update object’s properties
  • Manipulate data from objects, including accessing properties from and calling methods on objects using dot notation
  • Use the this keyword to refer to the object a function is being called on and select the object’s properties
  • Use IDs to obtain values of an indexed array

2.9 Arrays and More

Learning Goals

  • Dynamically generate an overview of your work examples with a for-loop in jQuery
  • Create, access, and iterate through objects in an array
  • Explain the difference between Comparisons (=== and ==) vs. Assignment (=)
  • Use the bang operator (!)
  • Apply modulus to retrieve even numbered values
  • Apply logic to for-loops

2.8 Conditional Statements

Learning Goals

  • Console log a variety of functions and events
  • Set variables to variety of data types and JavaScript statements that return different values
  • Chain methods together
  • Write conditional statements

2.7 Introduction to jQuerry

Learning Goals

  • Explain the relationship between DOM and jQuery
  • Name and call basic functions in the console and the DOM
  • Select and manipulate DOM elements with jQuery
  • Use alerts and console.log to check code
  • Use event listeners

2.6 Introduction to JavaScript

Learning Goals

  • Create new JS file and correctly link it to the HTML file
  • Name and call basic JavaScript functions
  • Discuss JS variables as well as how and why they are used

2.5 Better CSS

Learning Goals

  • Refactor CSS code to make it neater, more readable, and more efficient, and discuss why changes have been made to improve the code
  • Write semantic CSS and describe why one should make one's code “semantic”
  • Abstract out styles for greater modularity and DRYness
  • Eliminate excessive nested styling
  • Professional: utilize outside resources and keep learning as the demands of a project increase, including selecting from various frameworks or style guide

2.4 Tooltips

Learning Goals

  • Create tooltip as a hover-box on a link or a button
  • Link jQuery plugin that enables tooltips
  • Implement basic jQuery code in their HTML file and describe the logic
  • Design interactive content in About or Work section with tooltips

2.3 Modal Windows

Learning Goals

  • Implement Bootstrap modal windows of various sizes using links or buttons with user exit strategy
  • Embed an iFrame inside of a modal window and adjust it with CSS

2.2 HTML5 Forms

Learning Goals

  • Create a form with multiple input tags including textbox, email, and textarea and nest input groups inside of the form group
  • Label form elements appropriately with title, ID, and other attributes, and add placeholder text for form inputs
  • Validate HTML forms using the required type attribute
  • Use and style Bootstrap's grid system
  • Add name attribute
  • Explain backend vs. frontend

2.1 Semantic HTML & Footers

Learning Goals

  • Create Footer with copyright symbol using HTML5
  • Make existing navigation bar semantic
  • Embed and customize a variety of social media functions (such as YouTube videos, Facebook's "Like" button, and a Twitter button)