Check out this Web Development Mindmap to connect the tools you hear about. Or if you want it explained to you watch it here.
In-class examples can be found here.
Day 1: HTML (HTML Cheat Sheet) - assignment
Recommended Atom Packages Notes: boiler plate, syntax, lists, buttons, tags: (p, h1-h6, div, hr, em, strong, img, input)
- What are the neccesary (needed) tags for a working HTML file?
- What is a
<div>tag is and what it is for?
Day 2: Forms & CSS (CSS Cheat Sheet) - assignment
Notes: form tag, action="javascript:void(0)", input types, submit button, attributes: (autofocus, name, placeholder, required), textarea, values, selectors: (element, id, class, pseudo-classes), properties: (border, shadow, background, overflow, gradient), centering, Google Fonts
- How do you create a proper form (what tags are needed)?
- What is the difference between an ‘id’ and a ‘class’?
- How do you target elements on a web page?
Day 3: Box Model, Positioning, Transitions - assignment
Notes: box model: (margin, padding, border), positioning: (static, relative, absolute, fixed), transitions
- What is the difference between margin, padding, & border?
- What is the difference between static, relative, absolute, & fixed?
- How do transitions work (what do you target)?
Day 4: Bootstrap - assignment
Notes: container, grid (container -> row -> column), custom classes(text-center, img-responsive, & text-uppercase), btn, jumbotron, navbar, themes
- How do you correctly set up a grid layout?
- How do you target specific elements of Bootstrap components?
Notes: flexbox, carousel, commit, sync
- How do you make rows & columns within rows & columns?
- What are the basic concepts of GitHub?
Notes: comments, const, let, primitive data types: (number, string, boolean), pop ups: (alert, prompt, confirm), connecting .js to .html
- Law of Variables: Variables are just 'pointers' to their values.
- What denotes strings?
- Law of Functions: The ENTIRE function call gets replaced by the return value (if there is one).
- What denotes function calls?
Day 7: Control Flow - assignment
Notes: if, else if, else, truthy, falsie, logical operators, nesting, ternary operator
- How do you create an if-else statement?
- What is a predicate?
Day 8: Loops, Math & Date Objects, & Functions - assignment
Notes: while, for, break, Math, Date, hoisting, return, parameters vs arguments, default parameters, global vs local variables, function declarations vs function expressions & hosting
- When do you use while loops?
- When do you use for loops?
- How do you declare a function, pass it arguments, and return values?
- What are higher-order functions?
- What does it mean when they say that functions are first-class citizens?
Day 9: Data Structures -> Objects & Arrays - objects assignment arrays assignment
"Bad programmers worry about the code. Good programmers worry about data structures and their relationships."
— Linus Torvalds
Object Notes: object creation, properties & values, dot notation, bracket notation, iteration (for in loop), add properties & values after object creation, methods
Array Notes: list, array methods, iteration (for of loop), pass by reference vs pass by value
- Can you use variables with Dot Notation?
- What is the difference between a method and a function?
- How do you add properties to an object after you have already created it?
- Can you have an object inside an object (nest objects)?
- How do you declare, insert, & retrieve elements from an array?
- What does it mean when they say that arrays are pass-by-reference?
Day 10: Dom Manipulation, Event Listeners - assignment
Notes: Document Object, Element Object, getElementById(), querySelector(), .textContent, .innerHTML, .style, .cssText, setAttribute(), addEventListener(), Events, forms
- How do you select HTML elements (DOM elements) using JavaScript?
- How do you modify those elements?
Day 11: jQuery - assignment
Notes: jQuery cheatsheet, You Might Not Need jQuery, setTimeout(), setInterval()
- How do you select, modify, & create HTML elements using jQuery?
- How do you handle events (click, mouseover, etc.) using jQuery?
Day 12: AJAX, APIs, & Animate.css - assignment
Notes: .ajax(), .getJSON(), animate.css
- How do you make AJAX requests to APIs?
- How do you display specific data the gets returned from from the request?
Day 13: forEach, map, & Class
Notes: constructor, this
- What is the difference between an object and a class?
Day 14: React Basics - Examples
Notes: JSX, render, ReactDOM, props
Notes: this.props.children, state, require, export default class, this.someMethod.bind(this)
Notes: onClick & e.target, ref, onSubmit,
Notes: npm, webkit, prop types
- SASS - SASS Guide
- terminal/command prompt
- git
- Google Analytics
- cookies
- Firebase - Quickstart
- What is your target audience (age, sex, location, income, education, occupation, etc.)?
- Why do people visit your website (entertainment, necessity, work, information, etc.)?
- Does your site make sense (i.e. are things in appropriate places, are pages linked correctly)?
- [Draw.io[(https://www.draw.io)
- Moqups
- Cacoo
- Mockingbird
- HTML, CSS, SASS, Bootstrap, JavaScript, React, jQuery, AJAX, JSON, Web Development, GitHub
Answers: Day 1:
- What are the neccesary (needed) tags for a working HTML file? - doctype, html, head, title, body
- What is a
<div>tag is and what it is for? - it is used to dividing sections of the document into more manageable parts
Day 2:
- How do you create a proper form (what tags are needed)? - all form elements should be inside a
formtag and you must have a submit button; each input element should have a name attribute that acts as a 'handler' for the input - What is the difference between an ‘id’ and a ‘class’? - you should only have one unique id per html file but you can have multiple classes
- How do you target elements on a web page? -
document.getElementByIdordocument.querySelector
Day 3:
- What is the difference between margin, padding, & border?
- What is the difference between static, relative, absolute, & fixed?
- How do transitions work (what do you target)?
Day 4:
- How do you correctly set up a grid layout?
- How do you target specific elements of Bootstrap components?
Day 5:
- How do you make rows & columns within rows & columns?
- What are the basic concepts of GitHub?
Day 6:
- What are the primitive data types? - number, string, and boolean
- What denotes strings? - quotation marks
- What denotes function calls? - the invocation operator
()
Day 7:
- How do you create an if-else statement?
- What is a predicate? - a statement that evaluates to either true or false
Day 8:
- When do you use while loops? - when you do not know how many times you should loop
- When do you use for loops? - when you know exactly how many times you should loop
- How do you declare a function, pass it arguments, and return values?
- What are higher-order functions? - functions that either take functions as arguments or return functions
- What does it mean when they say that functions are first-class citizens? - functions are variables just like any other data type
Day 9:
- Can you use variables with Dot Notation? - You CAN NOT use variables with Dot Notation
- What is the difference between a method and a function?
- How do you add properties to an object after you have already created it?
- Can you have an object inside an object (nest objects)?
- How do you declare, insert, & retrieve elements from an array?
- What does it mean when they say that arrays are pass-by-reference?
Day 10:
- How do you select HTML elements (DOM elements) using JavaScript?
- How do you modify those elements?
Day 11:
- How do you select, modify, & create HTML elements using jQuery?
- How do you handle events (click, mouseover, etc.) using jQuery?
Day 12:
- How do you make AJAX requests to APIs?
- How do you display specific data the gets returned from from the request?
Day 13:
- What is the difference between an object and a class? - An object is an instantiation of a class.