Skip to content

Latest commit

 

History

History
101 lines (86 loc) · 4.38 KB

readme.md

File metadata and controls

101 lines (86 loc) · 4.38 KB
Raw

Front End Fundamentals

Learning Goal

Build an interactive web-page that utilizes HTML, CSS, and JavaScript

Learning Objectives

Intro to WDI

  • Get to know our fellow students
  • Determine some guiding principles for our class culture
  • Identify our big goal for the course
  • List the core expectations for instructors and students
  • Map out the various topics and technologies of web development
  • Identify how those technologies fit into the arc of the course
  • List two "soft" goals on which to focus for the first week.
  • Explain the role of Fundamentals relative the rest of the course.

Intro to the Web and HTML

  • Diagram the relationship between a server and a browser, including responses and requests.
  • Explain the difference between http:// and file://.
  • Semantically structure a given document using HTML without regard to style.
  • List commonly-abused HTML elements.
  • Label the components of an HTML element and its tags.
  • List commonly-used special characters.
  • Run a website through a validator and fix its errors accordingly.
  • Identify the different roles of HTML, CSS, and Javascript on a given webpage.
  • Link to a given file using either absolute and relative paths.
  • Use Chrome Dev Tools to inspect an element.

Homework

https://github.com/ga-dc/html_resume

The Command Line

  • Setup your working directory for WDI
  • Compare and Contrast CLI to GUI
  • Describe the anatomy of a command (statement, flags, arguments)
  • Know where to go for help
  • List common commands
  • List unsafe commands
  • Manage folders and files (using Finder and Shell)
  • Explain the difference between relative and absolute path

Git

Conceptual

  • Explain what version control is and why developers use it
  • List the main components of a git repository and how they relate:
    • repo, working tree, index (aka staging area), commit
  • Describe what a git remote repository is.
  • Differentiate between git as a tool, and github as a service
  • Define and differentiate between forking and cloning

Mechanical

  • Initialize a local git repository
  • Add and commit changes to a git repository
  • Add a remote repository, and push/pull changes to that remote
  • Use the 'fork, clone, and pull request' model to submit assignments
  • Un-initialize a git repository

JS Data Types, Variables, and Arrays

  • Describe the role Javascript (JS) plays alongside HTML and CSS.
  • Define JS as a programming language.
  • Set up and use Node to manipulate JS data types.
  • List JS data types and how each is used.
  • Describe composite data types and use arrays and objects to store data types.
  • Practice proper JS syntax and semantic variable naming.
  • Explain what a variable is and the role memory allocation plays in storing data types.

JS Loops and Conditionals

  • differentiate between true & false && truthy & falsey
  • describe why control flow is utilized in computer programming
  • write an if, else if, and else statement in JS
  • write a for loop and while loop in JS and differentiate between them
  • Utilize loops to iterate through complex data types
  • write a JS program that utilizes conditionals and loops

Objects, Functions and DOM

  • Compare objects and key-value stores to arrays as data structures
  • Explain the difference between object properties and methods
  • Create empty objects and objects with multiple properties and methods using object literal syntax
  • Compare adding and retrieving properties to objects using dot and bracket notation
  • Iterate over the keys of an object to return and manipulate values
  • Define what a function is
  • Define hoisting
  • Differentiate between referencing and invoking a function
  • Explain what the DOM is and how it is structured
  • Select and target DOM elements using a query selector
  • Change the attributes or content of a DOM element

CSS Intro

  • Define the following terms: css rule, selector, declaration, property, and value
  • Describe the syntactic relationship between these components in CSS
  • Describe the syntactical and functional relationship between selectors, properties, and values
  • Differentiate between stylesheets, styles in the head, in-line styles
  • describe "cascading" and CSS specificity
  • Use tag name selectors to style all elements of a given tag on a page
  • Describe the difference between class and id selectors
  • Apply styles to specific elements by selecting elements with classes and ids
  • Differentiate between padding border and margin using the box model