Thinkful

Accessing arrays?

Array contents are accessed by index — you can access an item in an array by asking for the item in a given position in the array. Ex: const allTheThings = ['cats', 'dogs', 42, ['foo', 'bar'], true, function() { console.log('hello')}]; console.log(`The first thing is ${allTheThings[0]}`);

CSS specificity?

If there are conflicts for a given property, the browser will choose the rule with higher specificity.

Lesson1: Frontend first steps?

- First, we'll create a version using repl.it, which is a cloud-based coding environment that we'll use for examples and drills in this course. - Second, we'll install Sublime Text, which is the text editor we'll use throughout this course to write our code.

.shift()?

Like .pop(), but removes and returns the first item of a list: const myArray = [1, 2, 'three']; console.log(myArray.length); // => 3 const firstItem = myArray.shift(); console.log(firstItem); // => 1 console.log(myArray.length); // => 2

absolute?

Like fixed elements, absolute elements are outside the normal flow and can be offset, but unlike fixed elements, they are offset in relation to the first parent container with a non-static position. https://repl.it/@thinkful/Absolute-position-example

Object basics?

Objects are a data structure used to hold key/value pairs. If you've ever used a dictionary, you already have an intuitive sense of what a key/value pair is: you look up a word (aka, key), and you find its definition (aka, its value).

objects?

Objects are considered to be a complex data type because they combine the primitive data types we've just explored (numbers, strings, Boolean, null, undefined).

Adding key/value pairs to an object?

Once an object is defined, you can add new key/value pairs to it using either dot or bracket notation. Here's an example: const myFamily = { lastName: 'Doe', mom: 'Cynthia', dad: 'Paul', }; myFamily.sister = 'Lucinda'; myFamily['brother'] = 'Merle'; myFamily.sayHi = function() { console.log(`Hello from the ${myFamily.lastName}s`); } myFamily.sayHi() // => Hello from the Does

Assignment 5: Introducing accessibility?

Web accessibility: is the practice of making web pages accessible to both able-bodied and disabled users.

Project 2: Responsive grids?

- First, we'll describe the behavior of a standard 960px, twelve column grid system. - After that, we'll view an implementation of our grid using the CSS float property, which is one of three common solutions to the grid layout problem.

Assignment 2 summary?

- Foo bar on Sublime - index.html and main.css

Developer tool?

- Used to inspect the HTML - Open web we can check their code - Add new development things

How to open command palette on Sublime?

Windows: Ctrl + Shift + P

Challenge-from-design-to-code?

https://repl.it/@Kanie/Challenge-from-design-to-code

Content-driven ?

means recognizing that our users are real people with real goals. Your challenge is to enable users to access and consume (or produce, in some cases) the content they expect to work with on our page.

Mobile-first ?

means that when designing web pages, and also when coding them up, we start with the mobile experience. Mobile devices have the smallest screen size, and by designing for them first, with a content-driven approach, we ensure that our web site has "good bones". The idea is that if we can make our content work first within the small confines of a mobile screen, it is fundamentally working.

How browser determine which property-value pairs to apply to a particular element?

- Determines which rules apply to the element - Takes all the relevant rulesets and sorts them according to their origin (for instance, inline styles vs. external stylesheets — inline styles win over external) and importance (more on importance in a moment) - Takes all rulesets that have same origin and importance and sorts them by selector specificity - If there are still conflicting values for rulesets with the same importance, origin, and specificity, applies the last to be declared ruleset.

Control flow and conditionals?

- Control flow dictates how programs execute different sets of instructions based on differing conditions. - We're going to discuss 2 ways of achieving control flow: conditionals (if, else, else if) and try/catch/finally blocks.

Assignment 1: Anatomy of HTML?

- HTML is the simplest - HTML is not the full-fledged programming languages because we can't write logical statements in HTML like other languages. - HTML is used to mark up content so web browsers know what kinds of content they're dealing with.

jQuery traversal methods .find() and .parent()?

.find() is used to traverse the elements contained in a jQuery selection, using a filter condition. .parent() is used to target the first parent element of a jQuery object that passes a filter condition.

Ex:

<aside> <p>The quick brown fox jumps over the lazy dog.</p> <div class='alert'> <h3>Pay attention!</h3> <p>Because the quick brown fox jumps over the lazy dog.</p> </div> </aside> Sometimes you need to target elements that are children of another element. For instance, you might want to target all paragraphs that appear within aside elements: aside p { /* make rules */ } Sometimes we need to target only elements that are direct children of an element. For that we can use the direct child selector: aside > p { /* make rules */ }

Function basics?

A function describes a repeatable process or behavior. You define that behavior once, and you can call it whenever you need to run your set of instructions. alert's sole responsibility is to display a pop-up window to the user with a message in it. alert takes one argument, the text you want to display in the alert. In the context of functions, an argument (or parameter) is a value that gets passed to the function when it's called.

Defining variables with var

Creating variables with var is almost identical to creating them with let. var pi = 3.14159; console.log(pi); // => 3.14159 // on second thought, let's round to the nearest tenth place... pi = 3.1; console.log(pi); // 3.1

Logical operators?

In JavaScript we have 3 logical operators: && (and), || (or), and ! (not). && evaluates to true if the values on both sides of the operator evaluate to true. || evaluates to true if one of the values evaluate to true. ! negates a boolean value so !true evaluates to false, and !false evaluates to true. Ex: const foo = true; const bar = false; foo === bar; // => false foo || bar; // => true foo && bar; // => false !foo; // => false !bar; // => true

lang attribute?

tell the screen reader which language it's reading. Ex: <html lang="en">

Unit 3

you'll have your first taste of putting your JavaScript programming fundamentals skills to use, as you learn how to build basic interactive web pages using jQuery.

Unit 2

you'll use these programming fundamentals to create interactive web pages with jQuery (a popular JavaScript library), set up servers with Node and Express, and build cutting-edge client-side apps using React, an advanced frontend JavaScript framework.

./ mean?

A dot slash is a dot followed immediately by a forward slash ( ./ ). It is used in Linux and Unix to execute a compiled program in the current directory. Ex: ./main.css

Factory functions?

A factory function is any function which is not a class or constructor that returns a (presumably new) object. In JavaScript, any function can return an object. When it does so without the new keyword, it's a factory function. The job of a factory function is to create an individual instance of some model — in this case, an individual instance of an animal. Inside the factory function, we indicate the properties and default values that all instances of an animal will have.

Whitespace define in HTML?

Alternatively referred to as spacing or whitespace, white space is any section of a document that is unused or space around an object. White spaces help separate paragraphs of text, graphics, and other portions of a document, and helps a document look less crowded.

five are important to styling anchors?

a:link { /* unvisited link */ } a:visited { /* visited link */ } a:hover { /* mouse over link */ } a:focus { /* keyboard focus on link */ } a:active { /* selected link (i.e., you've clicked but not released on the link) */ }

Media queries?

are a tool that CSS gives us to apply blocks of CSS rules to only certain viewports. So on a single stylesheet, we can specify how things should look at one viewport size and specify a different layout and appearance at a different viewport size.

Webfont?

are fonts that you load in the browser using HTML and then can reference in your CSS.

How does a function in JavaScript know about variables declared in the global scope?

because of the scope chain. Inside functions, when you refer to a variable, JavaScript follows the scope chain to determine the value of the variable. First, it looks in the current scope to see if there's a variable with that name. The interpreter will continue looking "up" the scope chain until it reaches the global scope, and if it doesn't find the variable defined there, it will raise an Uncaught ReferenceError indicating that the code refers to a variable that's not defined. This means that when you define a variable in a function that has the same name as a variable in the global scope, that local variable's name shadows the name in the global scope.

Defining constants with const

const is used to define constant values, which is another way of saying variables whose value cannot be reassigned. const, you type the const keyword, followed by the variable name, then an = sign Ex:const pi = 3.14159; console.log(pi); // => 3.14159 In the example above, we create a constant called pi, setting its value to 3.14159. We print its value by running console.log(pi);.In the example above, we create a constant called pi, setting its value to 3.14159. We print its value by running console.log(pi);.

booleans?

Booleans signify truth and falsity. A boolean has two possible values: true and false.

Combinations?

Example: .foo.bar { /* make some rules */ } p.foo.bar { /* make some rules */ } https://repl.it/@thinkful/Combination-selectors-drill

Assignment 5: JavaScript's Data Types?

is a kind of value that variables can have in a given programming language. JavaScript has six data types: String, Number, Boolean, Null, Undefined, and Object.

functions?

is a mini program that you define once in your code and invoke or call elsewhere. We saw three functions in the Fibonacci example earlier in this lesson: generateFib, getFibListLength, and displayFibs.

The Problem with Globals?

Global variables tend to make unintended side effects in a program more likely. A side effect is when a function reaches outside its local scope up into a parent scope and alters a value that lives there. The combination of global variables and unintended side effects almost guarantees that code becomes indeterminate. A determinate function is one that will always return the same value if it's provided with the same inputs. An indeterminate function, in contrast, is one that — given a single set of inputs — returns one value some times and another at other times.

Array and loop drills?

https://gist.github.com/KanekaKy/10ca5568a2be31475b7756787437862a

Challenge in your own words?

https://gist.github.com/KanekaKy/59d89d8f827285a3e871e35f36b1a1c1

Objects drills 2

https://gist.github.com/KanekaKy/773a5c72e182f146388361ead3be419d

Event Listerner Drills

https://gist.github.com/KanekaKy/f1840a0f05262fb7edff3a49d68ef688

Array-copying-I-drill?

https://gist.github.com/anonymous/73459b7810305c6655961c7b6ab8f975

Objects drills 1?

https://gist.github.com/anonymous/86c4a6520e5282dda0c9bb4f691d78b1

Logic drills my solutions?

https://gist.github.com/anonymous/8ba1bd7aaba9a2c1f3720323137c57e7

Lesson 5: Challenge sign up page?

https://repl.it/@Kanie/Challenge-Signup-Page

Challenge: shopping list app?

https://repl.it/@Kanie/Shopping-list-app-jQuery-1

Exhibit A: The Menace of Globals?

https://repl.it/@Kanie/The-Menace-of-Globals-example In this example, there are 2 problem points in our code. First, getOptionName has unintended side effects — it alters a global variable (firstOption). When the line firstOption = 'firstOption changed!'; runs, the JavaScript interpreter looks through the scope chain to see if there's already a variable called firstOption, and if it finds that there is not, it creates a new global variable. The second problem is that doBothOptions relies on firstOption being defined in the global scope, rather than passed in as argument to the function.

Project2: Exercise?

https://repl.it/@Kanie/display-property-drill

Challenge: analyze a most frequent word program?

https://repl.it/@Kanie/most-frequent-word-analyzer-challenge

Sally Resume with Kyle's comment?

https://repl.it/@krutland/Challenge-Sally-Resume

Anchor pseudo-classes drill?

https://repl.it/@thinkful/Anchor-pseudo-classes-solution

Drill 3: Background images?

https://repl.it/@thinkful/Background-images-solution

Descendant and direct child selectors?

https://repl.it/@thinkful/Descendant-selectors-solution

Element selectors?

https://repl.it/@thinkful/Element-selector-solution

Drill 2: Font basics?

https://repl.it/@thinkful/Font-basics-solution

Looping over collections of objects

https://repl.it/@thinkful/Looping-over-collections-of-objects-example

Drill 4: Text contrast problem?

https://repl.it/@thinkful/Text-contrast-solution

Implementing a Fibonacci UX?

https://repl.it/@thinkful/fib-demo

Inline element Vs block-level element?

In brief, here are the basic conceptual differences between inline and block-level elements: **Content model Generally, inline elements may contain only data and other inline elements. You can't put block elements inside inline elements. **Formatting By default, inline elements do not force a new line to begin in the document flow. Block elements, on the other hand, typically cause a line break to occur (although, as usual, this can be changed using CSS). https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

Assignment 2: What is JavaScript??

JavaScript is one of many programming languages, but it's the only one available in all modern browsers.

Multiple selectors?

Let's say you want to target elements that have either .foo or .bar, or both .bizz and .bang. To target multiple selectors with the same ruleset, just separate your selectors with commas: .foo, .bar, .bizz.bang { /* make the rules */ }

.forEach()?

Like .map(), this method applies a function to each item in a collection, but it does not return an array of transformed elements. const directionsLibrary = ['wash', 'rinse', 'repeat']; function saveDirectionInDatabase(direction) { // save the direction in the database console.log(direction); } directionsLibrary.forEach(saveDirectionInDatabase); // or directionsLibrary.forEach(direction => console.log(direction));

Unit 3 Lesson 2 wrap up?

Moving forward you should feel comfortable with the following: Explaining what the DOM is Using jQuery to traverse and manipulate the DOM Setting up event listeners for common user behaviors like clicking and submitting forms Explaining and using event delegation

Getting values and running methods?

Once the object is created, you can get values and run object methods in one of two ways: dot notation ( ledZeppelin.singer) or with bracket notation (ledZeppelin2['lead singer']). Usually we use dot notation to get values from an object, but if you need to get a key with spaces or periods, you must use bracket notation.

One exception?

One exceptional case where it's okay to use globals is when you're using a JavaScript library, like jQuery for instance (which we'll cover in depth in the next unit). index.html <!DOCTYPE html> <html> <body> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html> app.js $(function() { alert('hello world'); }); When the browser loads jQuery in index.html (<script src="https://code.jquery.com/jquery-3.1.0.js"></script>), it puts a variable called $ in the global scope. We can then reference that variable in app.js ($(function() {...}).

Strings?

Strings are delineated by opening and closing quotes

forEach?

The forEach method calls the callbackfn function one time for each element present in the array, in ascending index order. The callback function is not called for missing elements of the array.

Brackets, parenthesis and curly bracket in JavaScript?

Unfortunately, the best answer is "use them each as appropriate where necessary". Parenthesis () in JavaScript are used for function calls, to surround conditional statements, or for grouping to enforce Order of Operations. function myFunc() { if (condition1) { } if ( (1 + 2) * 3) { // very different from (1 + 2 * 3) } } Braces {} are used during the declaration of Object Literals, or to enclose blocks of code (function definitions, conditional blocks, loops, etc). var objLit = { a: "I am an Object Literal." }; Brackets [] are typically mostly used for accessing the properties of an Object (or the elements of an Array), so mylist[3] fetches the fourth element in the Array. var mylist = [1,2,3,4]; alert(mylist[2]);

fixed?

When an element's position is set to fixed, it will stay in place even when the user scrolls. Fixed elements are taken out of the normal flow, and other elements will position themselves as if the fixed element does not exist. https://repl.it/@thinkful/fixed-position-example

relative?

When an element's position property is set to relative, it is still in the normal flow (in other words, relatively positioned elements are rendered in the order they appear in HTML), but unlike with static elements, we can use offset properties (left, right, top, bottom) with relative elements. https://repl.it/@Kanie/Relative-position-example

Centering inline-* elements with text-align?

When you need to horizontally center inline elements within a block element, text-align: center does the trick.

Traversal and Manipulation Methods?

When you use the $() jQuery method to target a set of elements, the object you get back is a jQuery object, and it has numerous traversal methods that you can use to traverse the selected element(s).

Form design and user experience?

With that in mind, there is a simple principle you should strive to follow when designing forms: keep them short, simple, and as semantic as possible.

Variable?

a name that is attached to a value. Variable two functions: 1. First, they give us a shorthand way to refer to values created elsewhere in a program. 2. Second, variables give us a way to manage state in a program. State has to do with persisting values over time.

Lesson 5: Variable scope?

we explore the idea of variable scope, which defines how the variables you declare either can or cannot be accessed at different places in your code. Scope is one of those ideas you have to understand in order to reason about how your code works and avoid bugs. For code using let and const, , there are 2 kinds of scope to understand: global and block.

The part of JavaScript that deals with modeling and manipulating data ?

using variables, constants, strings, numbers, logic, functions, etc. — is specified by ECMA (the European Association for Standardizing Information and Communication Systems).

Deeper into object?

we explore some more advanced use cases for objects. These topics will prove to be especially important when you move on to working with jQuery in the next unit, as you begin to iterate over collections of data returned by third-party APIs.

Buttons element?

Our form uses <button> elements to allow users to submit and reset the form. This is done by setting the type attribute.

Block-level elements?

- A block-level element has the opposite qualities. It gets displayed on a new line (and takes up the whole available line), may contain additional block-level or inline elements, and its height and width can be explicitly set. - By default, block-level elements will take up the entire width of whatever element they appear inside of, but we can override this by explicitly setting the width or max-width property on an element.

Inline elements?

- An inline element - for example, a, strong, em, or span doesn't start on a new line and usually does not contain additional elements, but instead just contains text. -You can't explicitly set the width, height, margin, or padding of an inline element; instead, its dimensions are determined by how much space its contents require. However, the text in an inline element can be set to a large or smaller font-size or different color, and it will be different than the text around it.

try/catch/finally?

- JavaScript gives us 3 commands (try, catch, finally) for dealing with conditional logic in the case of errors. - These language constructs allow us to specify a block of behavior that is to be tried (the try block). If that does not succeed, the behavior in the catch block runs. And in either the success or failure case, the instructions in the finally block will run.

Conditionals if, else, else if?

- JavaScript gives us 3 keywords for working with conditionality: if, else, and else if. Ex: function sanityCheck() { if (true === true) { console.log("true is still true. that's reassuring"); } } sanityCheck() // => "true is still true. that's reassuring" - To use a conditional, you begin with the command (if in this case), followed by an expression wrapped in parentheses (true === true). Between the curly brackets ({...}) comes the statement(s) to be executed if the expression evaluates to true. Ex: function analyzeNumber(num) { if (typeof num !== 'number') { console.log('not a number'); } else if (num % 2 === 0) { console.log('even number'); } else { console.log('odd number'); } } - The conditional (ternary) operator is the only JavaScript operator that takes three operands. Ex:let myVar = condition1 ? 'something other than default' : null;

Input and labels?

- Labels tell human users, web crawlers, and screen readers what an input is for — using the for attribute. - The for attribute goes on a label, and its value should be set to the ID of the input it's for. - Although you're generally discouraged from using IDs as CSS selectors, you must use IDs for label association to work. This association is what makes inputs take focus when you click on their labels. - Whichever approach you choose, you must use the for attribute if the label is not a parent of the input it controls. two different ways to use label and input: Ex: <label for="first-name">First name</label> <input id="first-name" name="first-name" type="text"> <label for="first-name">First name <input id="first-name" type="text"> </label> We lean slightly towards the first method because when the label wraps the input, margin-right behavior is surprising — we think of labels as coming before the input, but if you set a right margin on a label wrapping an input, that margin right will appear to come after the input, not the label.

Assignment 1: Anatomy of Responsive Design?

- Responsive:Responsive means creating layouts that can dynamically respond to the dimensions of the user's viewport. - The responsive design solution is to change the layout and presentation of the navigation bar when users are viewing it on small screens. With a responsive layout, a subset of the navigation links will be rendered in the navbar, and the omitted ones will be pushed into a dropdown (the "More" item in the nav), instead of being laid out side by side across the nav bar (the desktop view).

<Form>?

- The <form> element wraps all our inputs and labels.

Inline-block elements?

- The final display value we'll discuss here is inline-block, which combines characteristics of both inline and block-level elements. - An inline-block element displays inline like a span or a element, but you can give it an explicit width, height, margin, and padding. -This can be a good approach when you need to create elements with a set width, but you also need them to display side-by-side.

Event-driven DOM manipulation?

- we focus on using the JavaScript library jQuery to alter the HTML displayed to end users. - DOM (document object model) manipulation - The key idea of this lesson is event-driven DOM manipulation, which in plain English, just means writing instructions that tell the computer to listen for when specific kinds of events happen and then do something in response. - Whenever the event occurs, the computer executes a callback function, which is a set of instructions about what to do whenever the event occurs.

Equality, strict equality, and coercion?

- we will learn === strict equality differs from simple equality == - The strict equality operator === first compares data type of the 2 items being compared, and if they're not the same data type (as in this case), it returns false. ex: If you run true === 1, you'll see that this evaluates to false. - The == operator in JavaScript has a looser notion of equality. When it compares 2 items, if it finds that the 2 values are not of the same type, it coerces (or converts) one of the value types to the type of the other. So true == 1 evaluates to true because when you have a boolean and a number, the number gets converted to a boolean, and Boolean(1) is true.

Making logical assertions?

- we'll introduce how to make logical assertions in JavaScript. An assertion is a statement that evaluates to either true or false — for example: true === true or 1 <= 5. - Truth in JavaScript: The easiest way to remember which values are true and which ones are false in JavaScript is to memorize the "falsy" ones. If it's not false, "", 0, null, undefined, or NaN, it evaluates to true. That's the rule. That means that negative numbers, empty arrays ([], which we'll learn about later), and empty objects ({}, which we'll also learn about later) all evaluate to true.

Lesson 3: Application logic?

- you'll learn how to use JavaScript's if and else to implement conditional application logic. - We'll cover if, else, and try/catch/finally blocks, which are 3 forms of control flow in JavaScript.

The algorithm — or set of instructions — to produce the Fibonacci numbers ?

1. Define an integer value, n. n determines the length of the list of Fibonacci numbers output by the algorithm. 2. Set the first 2 items in the resulting list to 0 and 1 respectively. 3. For a remaining n - 2 times, compute the next item in the list by adding the previous two. Here, we have n - 2 because the first 2 slots in the Fibonacci sequence are taken by 0 and 1. 4. When the list's length is equal to n, we're done.

Unit 2 Wrap up?

1. Explaining what a function is 2. Declaring and invoking functions in JavaScript 3. Using built-in string methods like .length. 4. Manipulating strings 5. Doing basic arithmetic in JavaScript

Naming variables

1. Reserved words: Reserved words are a special category of words that you're not allowed to use as variable names in a given programming language. For instance, in JavaScript, you can't reassign the name var to a new value (that is, you can't do var var = 'some value';). If you try to use a reserved word as a variable name, you'll get an error. 2. Character restrictions: A variable name must begin with an upper or lower case letter, $, or _. It cannot begin with a number. Numbers can be used elsewhere in the variable name (let myFoo2; is okay). Spaces cannot appear anywhere in the variable name (let my Foo = 'bar';, not okay). Comparison and logical operators cannot be used in variable names (let my+Foo; is not okay).

Recommended resources Lesson 3?

1. Shay Howe's lesson on Getting to Know CSS is a good primer on CSS and does a great job explaining the idea of the cascade and CSS specificity. 2. This short reading on choosing good class names gives a good explanation of (you guessed it!) choosing good class names. 3. If you're looking for more practice with CSS selectors, CSS Diner is a fun, interactive way to practice increasingly complex CSS selectors. 4. The first two chapters of the free Discover DevTools tutorial from Google and CodeSchool do a great job demonstrating how to manipulate HTML and CSS on live web pages using Chrome Developer Tools.

Assignment 4: Recommended resources

1. Shay Howe's lesson on building forms does a good job introducing the HTML elements used in forms and how to think about styling them. 2. Forms are the primary way users can supply inputs for 2. our web pages, and following best practices for accessibility is crucial. Web Accessibility in Mind's guide to creating accessible forms will help you understand how to ensure your forms are accessible for all users.

Recommended Source?

1. The Mozilla Developer Network's entries on truthy and falsy, logical operators, and control flow and error handling all have good information. 2. This tutorial on conditionals from Learn-JS features interactive examples that illustrate the basics of working with conditionals in JavaScript. 3. The chapter on program structure from Eloquent JavaScript explains control flow and conditionals. Note that it also covers some topics we haven't covered yet (but soon will!) like loops.

Unit 2 Recommended resources?

1. The first chapter of Eloquent JavaScript discusses values, types, and operators, but along the way, it explains numbers and strings in depth. 2. Also from Eloquent JavaScript, the chapter on functions is a good intro to functions. Note that this resource assumes knowledge of some things we haven't covered yet (such as loops). 3. Mozilla Developer Network is always a good go-to source. Consider checking out the pages on numbers, strings, and functions 4. The chapter on functions from Speaking JavaScript introduces the basics and also goes deeper into functions than we did in this lesson.

Reasoning about layouts?

1. We can begin breaking this design down into sections, top to bottom, left to right. 2. The first section to notice is the header. The header itself doesn't appear to require any special positioning, it takes up the full width of its parent.

Lesson 3: wrap up?

1. explaining the idea of "truthiness" in JavaScript 2. Using logical operators and expressions 3. Explaining what control flow is 4. Using conditionals (if, else, else if) to achieve control flow 5. Using try/catch blocks to handle errors.

Use of <fieldset and <legend?

<fieldset: used to group related elements in a form. <legend:defines a caption for the <fieldset> element. The main reason to use fieldsets is that they help web crawlers and screen readers understand how inputs are grouped together (even if this is not revealed visually to sighted users). The legend element is like a title for the fieldset. Ex: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset

Meta viewport?

A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. You should include the following <meta> viewport element in all your web pages: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Callback function?

A callback function is executed after the current effect is finished. Example with Callback $("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden"); }); }); Example without Callback $("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden"); }); https://repl.it/@thinkful/event-handling-example

The A11Y Project?

A community-driven effort to make web accessibility easier.

Assignment 1: What is programming?

A program, in simplest terms, is a set of instructions for a computer to carry out. In the context of frontend web development, you might write a program that validates form inputs when the user submits their username and password to a form or checks to make sure they've typed a valid phone number before passing the data to a server.

ARIA?

Accessible Rich Internet Applications helps people who use assistive technologies understand and use websites. ARIA in HTML goes well beyond the role attribute. If you'd like to learn more, you can watch a talk by Léonie watson to see how developers use ARIA to ensure that interactive elements are properly represented to screen readers.

Event delegation?

According to the official jQuery docs, event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

The length property?

All arrays have a length property that counts the number of items in the array: Ex: const myArray = [1, 2, 3, 4]; console.log(myArray.length); // => 4 The length property can be used in conjunction with indexing to get or set items relative to the end of the list: const myArray = ['one', 'two', 'three', 'four', 'five']; console.log(myArray[myArray.length - 2]); // 'four'

static?

Any HTML element with the position: static (which is also to say, any element that you don't explicitly set position to a different value on) will have what is called normal flow. Normal flow refers to the default way browsers render content. Under normal flow, block-level elements get rendered in the same order that they appear in the HTML markup, one on top of another, starting from the top left corner of the document, and inline elements stretch as wide as their inside content (usually text). position: static - or rather, not setting any value for position on an element - is often the behavior we want. https://repl.it/@thinkful/Normal-flow-example

Arrays?

Arrays are used to store lists of items in JavaScript. List items can be of different types and can even be other lists. Any time you're dealing with a problem that involves collections of things, chances are you're going to be dealing with arrays. These could be collections of emails, statistics, server logs, etc.

Array methods and anonymous functions

Arrays have just under two dozen built-in methods. I

Lesson 5: Forms and Inputs?

As in previous lessons, we'll start with an in-depth reading on forms and inputs. After that, you'll demonstrate your mastery of the material by coding a simple signup page for a company called "AnalogSea". Moving forward, you'll still have plenty to discover about how to design and implement effective user experiences with forms, but you'll feel confident determining which input types to use and how to submit forms to a server.

Unit 2 Lesson 5: Wrap up?

At this point you should feel comfortable: Explaining what scope is, and the difference between global and local scope Explaining why global variables are to be avoided Using strict mode to limit unintended globals Explaining what side effects and pure functions are

Wrap-up Lesson 2?

At this point, you should feel comfortable with the following: - Describing the difference between elements, tags, and attributes - Explaining what is meant when people say HTML is about structure (vs. style or behavior) - Explaining and using semantic HTML - Inspecting and manipulating HTML using Developer Tools - Learning new HTML elements - Taking content and structuring it into well-formed, semantic HTML - Explaining what a11y is and describing and following basic a11y best practices

Wrap up Lesson 3?

At this point, you should feel comfortable with the following: - Describing the different parts of a CSS ruleset (the selector, the declaration block, declarations, properties, values) - Explaining what is meant when people say CSS is about presentation (vs. structure or behavior) - Explaining the box model Inspecting and manipulating CSS using Developer Tools - Learning new CSS properties - Solving basic CSS problems like setting background colors, font colors, width, height, etc. - Using a wide variety of CSS selectors to target HTML elements

Assignment 7: Wrap up?

At this point, you should feel comfortable with the following: - Explaining and implementing horizontal centering for inline and block-level elements - Explaining and using the display: block vs. display: inline-block vs. display: inline - Explaining the so-called "white-space" problem and how to solve it - Explaining and using position: static vs. position: relative vs. position: fixed vs. position: absolute - Explaining and using the float property to get text to wrap around images or other content - Coding up a wide range of layouts from designs.

Assignment 3: Wrap up?

At this point, you should feel comfortable with the following: - Following accessibility best practices for forms - Validating form inputs - Creating and describing forms and form elements - Learning new input types

Assignment 4: Wrap up?

At this point, you should feel comfortable with the following: -Creating HTML and CSS files, and linking to a CSS file inside your HTML -Structuring a simple project folder -Using Sublime Text to create and edit files -Inserting the boilerplate code that all HTML pages need (by using the Sublime Text tab completion shortcut html followed by a tab)

Lesson4: CSS Layouts?

CSS layout describes the placement of elements on the page. Some examples of common layout problems are: - Creating a fixed navigation bar that stays at the top of the screen even when you scroll down - Creating a three- (or two-, or four-, etc.) column layout - Horizontally or vertically centering a piece of content We'll focus on the following CSS properties: margin text-align display position float left, right, top, bottom (which together are known as offsets)

Attribute Selectors

CSS lets us target elements by attribute value. A common use for this is targeting specific kinds of form inputs (for instance, input[type="radio"] to apply rules exclusively to radio selector inputs). We have several options for matching attribute values: 1. Exact match: element[attribute=value] 2. Match pattern anywhere in value: element[attribute*=value] 3. Match pattern at beginning of value: element[attribute^=value] 4. Match pattern at end of value: element[attribute$=value] Drill solution: https://repl.it/@thinkful/Attribute-selector-drill

What you do with JavaScript in the browser ?

Can be broken down into two categories: 1.first, modeling and manipulating data and processes; 2. second, interacting with browser elements (which are represented using HTML).

Defining and invoking functions?

Ex: function alertHelloWorld() { alert('Hello world'); } alertHelloWorld(); The function keyword signifies that a function is about to be defined. Next comes the function name (in this case, "alertHelloWorld"), followed by its call signature (). Call signature refers to the arguments or parameters — if any — that get passed to a function. alertHelloWorld doesn't get any parameters (aka, arguments) passed to it. This function has a return statement, as do many functions. A return statement causes a function to return the value to the right of the return keyword.

Conclusion lesson 2?

For now, in this early stage in your learning, as you're first setting your coding habits, be sure to incorporate the patterns we've covered here: - Always use structured, semantic HTML - Always set the lang attribute on the opening HTML tag - Set the role attribute where appropriate, especially for sectioning elements: +<header role="banner"> for site-wide headers +<nav role="navigation"> for navigation elements +<main role="main"> for main elements +<footer role="contentinfo"> for your site's footer

Assignment 1: Anatomy of Forms and Inputs?

Forms are containers that hold a set of inputs. You've interacted with forms thousands of times, for example, when you provide contact info, answer questions, or order something online. Inputs are individual components that a user interacts with - typically corresponding to a single data point. HTML provides numerous input types (text, email, number, password, etc.), and input types differ in how they are rendered. Inputs also vary in how they are validated.(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_<input>_types)

Assignment 4: Target Practice: CSS selector drills

Here's what we'll cover: - Element selectors (e.g., p {...}) - Combination selectors (e.g., .foo.bar {...}) - Multi selectors (e.g., .foo, .bar {...}) - Descendant selectors (e.g., .foo li {...}) - Direct child selectors (e.g., .foo > li {...}) - Before and after pseudo-elements selectors (e.g., li::before {...}) - Anchor pseudo-classes (e.g., a:hover {...}) - Attribute selectors (e.g., input[type="text"] {...})

Assignment 1: Horizontal alignment?

Horizontal centering with margin: auto - When you need to horizontally center block-level content relative to a parent element, margin: auto is your friend. - margin-left: auto; margin-right: auto is a valuable recipe that you should memorize. Whenever you need to horizontally center a block-level content within some parent element. - By setting left and right margins to auto, it ensures that the element will remain centered, even if its parent element changes in size or moves.

Working with styles and CSS in developer tools?

If you're looking to read more about working with styles and CSS in Developer Tools, Google's official learning materials are a good place to continue your learning.

Event objects?

In fact, just about every piece of information you could ever want to know about how you performed an action is contained within the event object. The object representing that data is the event you see in function(event). event.which contains information about which button was pressed in a mousedown event and the key property contains information about which key was pressed in a keydown event.

Self-reference and this?

In the myFamily object we looked at earlier, we added a method called sayHi that made use of self-reference: const myFamily = { lastName: 'Doe', mom: 'Cynthia', dad: 'Paul', sayHi: function() { console.log(`Hello from the ${myFamily.lastName}s`); } }; myFamily.sayHi() // => Hello from the Does

Assignment : CSS Basic Training?

In this assignment, you'll work through four drills to build up your CSS chops. These drills will familiarize you with learning about new language features on your own (which is a core skill of professional engineers) and using CSS properties.

Lesson 6: Responsive Design Basics?

In this lesson, we introduce responsive design, a technique for creating web pages that work well on a phone, a large desktop monitor, and everything in between. First, we'll introduce the idea of responsive, reviewing the tools CSS gives us (media queries, fluid grids, and flexible images) and best practices (content-driven, mobile-first, fluid). After that, we'll have an in-depth look at an implementation of a fluid CSS grid. In the final assignment for this lesson and unit, you'll code up a responsive site that has distinct mobile and desktop states, bringing together everything you've learned so far into one project.

Lesson 2: Architecting client-side apps?

In this lesson, we'll continue to explore interactive web apps with jQuery. We'll focus less on learning new jQuery methods, and instead on how to better use the tools we learned about in the previous lesson, and how to move from an understanding of what an app should do (stated in plain language) to actually implementing the app

Lesson2: Functions, Strings, and Numbers

In this lesson, you'll learn how to use numbers, strings, and functions in JavaScript. Numbers and strings are both primitive data types. This means they are amongst the simplest data types that JavaScript gives us.

Assignment 3: Challenge: Move Your "About Me" to Standard HTML and CSS Files"?

In this short challenge, we'd like you to reinforce that knowledge by re-creating your "About me" from repl.it on your local computer. You'll create a folder, an HTML file, and a CSS file, and you'll link to the CSS file from your HTML file.

Internet/server/webpage/ip?

Internet is wire. A server is computer connected to the wire. Two servers can connect with each other through this wire. Webpage is the file on this server hard drive. Each server has the unique ip address to help computer find each other. we give name like google for the ip rather than using number.

List of inline elements?

List of inline elements The following elements are inline by default: <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

Lesson 4: Assignment 8 Recommended resources?

Looking for more practice with CSS layouts? Here are some good resources to check out (keeping in mind that the way you'll ultimately master CSS layouts is by building real web pages!): The Learn CSS Layout guide provides clear, easy to understand examples of all the important concepts in CSS layout. Shay Howe's lessons on the box model and positioning content do a good job introducing CSS layouts. Flexbox is becoming the standard solution for dealing with complex layouts, but most existing code continues to use non-flexbox solutions for layout. Ultimately, you'll eventually want to understand both. Flexbox Froggy is an interactive game that teaches you how to use flexbox to achieve different layouts. At times, the seemingly simple task of centering HTML elements can prove to be difficult (especially vertical centering). This CSS-Tricks article on centering does a good job breaking down this problem. More generally, CSS-Tricks is a great resource for knowledge of CSS.

Lesson 6: Objects?

Objects are a complex data type that allow you to bring together common properties and behaviors into a single entity. Objects provide an excellent way of organizing code that belongs together, help you avoid global variables, and let us represent individual instances of some model. Objects give us a way of representing instances of an idea or model, and because of that, they're used all the time in programming.

event.currentTarget?

One of the most powerful properties of an event object is the currentTarget. This contains information about which DOM element the user has interacted with. By using event.stopPropagation(), we're telling the browser to stop the event from "bubbling up" the DOM. It will run for the innermost clicked element (in this case, the li that we've clicked), but it won't run again for the ul or div.foo.

Use let, const, and strict mode?

One of the problem points we identified above is that getOptionName creates a variable without using the let (or a const). If firstOption was not already defined in the global scope, getOptionName would create it, and if it is in the global scope, getOptionName will mutate it (assuming it's not a const). The way to get around this is to always use either let or const inside your functions. In other words, never do: someVar = 'something'. Relatedly, unless you have a specific reason not to do so, take advantage of JavaScript's strict mode. When strict mode is enabled, any time a variable is declared without the let or const keyword, an error will be triggered. Here's an example: 'use strict'; function myFunc() { foo = 'foo'; // do something } myFunc(); // => raises `Uncaught ReferenceError` The 'use strict' command can be put at the top of a file to enforce strict mode for the entire file, or at the top of a function, if you only want to use strict mode within the function body. it's best practice to default to putting 'use strict'; at the top of all your JavaScript files

The tree structure of HTML code?

Parents(HTML)>two children(Head and Body)> each child(title or nav) has their own children(ul, h1)>each child has their own children called nested element(li,li). This tree consists of a series of nodes (each represented by a box) that lie in hierarchical relation to one another. We call the <html> element the root element because it is the parent (or grandparent, or great-grandparent, etc.) of all other elements in the document. The root element has children (<head> and <body>).

DNS explained?

Real web addresses aren't the nice, memorable strings you type into your address bar to find your favorite websites. They are special numbers that look like this: 63.245.215.20. This is called an IP address, and it represents a unique location on the Web. However, it's not very easy to remember, is it? That's why Domain Name Servers were invented. These are special servers that match up a web address you type into your browser (like "mozilla.org") to the website's real (IP) address. Websites can be reached directly via their IP addresses. Try going to the Mozilla website by typing 63.245.215.20 into the address bar on a new browser tab.

What skills will get?

Skills: - Working knowledge of HTML - Working knowledge of CSS - Code up static web pages - Familiarity with Sublime Text

Assignment 2: Event listeners?

Some common use cases are: 1. Listening for when a user submits a form, then validating the data they submitted and displaying helpful error messages if they need to modify their entries 2. Listening for when a user types a search term into an input and displaying type-ahead text 3. Listening for when a user clicks an element on the page and launching an animation jQuery provides a streamlined, cross-browser compatible interface for setting up event listeners An event listener consists of 2 parts. First, you have to specify which event to listen for. Second, you have to provide a callback function that runs whenever the event occurs.

a11y and interactive web apps?

Some of the questions you should be asking are: 1. When new information is added to the page, will all users know it's there? 2. Will they know when information is removed? 3. Is the information easily understood by users of all abilities? Also remember that DOM manipulation is all about creating, modifying, and deleting HTML. That means that whatever you do to your HTML should be as clean, logical, and semantic as possible.

::before and ::after pseudo-elements?

The ::before and ::after pseudo-elements allow you to render content just before or after your element. This technique is great for creating smart quotes around block quotes (which you'll have to do in the drill below). More broadly, writing ::before and ::after style rules can be a good way to handle repeated visual content that surrounds an element. https://repl.it/@thinkful/before-and-after-solution

The <select> and <option> elements?

The <select> element is used to let users choose from a list of options. Ex: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option

The DOM

The DOM, or document object model is the browser's representation of the current state of the HTML content of a page.

The Fibonacci sequence?

The Fibonacci sequence describes a sequence of numbers in which each number in the list is the sum of the previous 2 (with the exception of the first 2 numbers in the list, 0 and 1).

HTML elements reference

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Object.keys?

The Object.keys() method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

From idea to user stories to pseudocode?

The app is composed entirely of a single, anonymous document ready function that has jQuery event listeners for submit and click events that in turn call additional anonymous functions, which appear to do something to the DOM, but without inspecting the HTML, it's hard to know what they do.

Google fonts?

https://fonts.google.com/

Project 2: The display property?

The display property determines how an element's box is rendered in the browser (recall that we learned that all HTML elements are boxes, as described by the box model).

Numbers?

The number type in JavaScript is used to represent numbers — both integer values

Project 4: float property

The primary use case for floats is getting text to wrap around an image (or some other container).

How are property and value presented?

The property name is followed by a colon, and the value is followed by a semicolon. Ex: p { font-family: Arial; }

src in HTM

The required src attribute specifies the URL of the image. Note: When a web page loads; it is the browser, at that moment, that gets the image from a web server and inserts it into the page.

Run method in Object?

The same syntax is used to run methods on an object. In the mammal example above, we use dot notation to call the evolve method. Note that just like functions outside of objects, an object method can take arguments. Here's an example: const simpleCalculator = { add: function(a, b) { return a+b; } }; simpleCalculator.add(1, 1); // => 2

Example of pseudo element?

The selector here (p::first-letter - note the double colon) is a pseudo-element. Ex: p::first-letter { text-transform: uppercase; color: red; font-size: 30px; }

Target=

The target attribute specifies where to open the linked document: <a target="_blank|_self|_parent|_top|framename"> <p>Open link in a new window or tab: <a href="https://www.w3schools.com" target="_blank">Visit W3Schools!</a></p> Output: Open link in a new window or tab: Visit W3Schools!

Lesson3: CSS the Right Way?

The trajectory of this lesson is similar to that of the previous one. We'll start out by going over the terminology and background knowledge you need to understand and competently discuss CSS. Next, we'll revisit Chrome Developer Tools, this time focusing on how to alter CSS on live pages. After that, you'll work through a series of drills designed to level up your CSS skills. By the end of this lesson, you'll have a solid conceptual understanding of CSS, and you'll be comfortable editing and creating style rules.

Type attribute?

This attribute determines how the element looks and how its validation works. For instance, an input with type='email' will be valid if the user inputs text that has an @ with text before and after.

.reduce()?

This is useful for aggregating array data. This method iterates over the array while maintaining an accumulation object. This object is returned inside the reduce function and is passed into the subsequent iteration. function sum(total, num) { return total + num; }; const numbers = [1, 2, 3, 4]; console.log(numbers.reduce(sum)); // => 10

.slice(begin, end)

This method creates a new array from an existing one. If you call it with no arguments, the entirety of the original array will be copied. It can be called with begin and end to specify only part of the original array has been copied. Finally, you can use negative values for the begin parameter in order to select the last n numbers of an array. const myArray = [1, 2, 3, 4]; myArray.slice(); // => [1, 2, 3, 4] const copyArray = myArray.slice(0, 2) console.log(copyArray); // => [1, 2] myArray.slice(-2); // => [3, 4];

.find()?

This method is used to find a single item in an array.

.map()?

This method is used to generate a new array of items by applying the same function to each item in the original array. Here we provide an example of using map to work with numbers, first using a named function, then with an anonymous (arrow) function: function double(num) { return 2 * num; } const myNumbers = [1, 2, 3, 4]; const doubledNumbers = myNumbers.map(double); console.log(doubledNumbers); // => [2, 4, 6, 8]; const doubledNumbersAlt = myNumbers.map(num => 2 * num); console.log(doubledNumbersAlt); // => [2, 4, 6, 8];

.pop()?

This method is used to remove the final item from an array. It also returns the discarded item: const myArray = [1, 2, 'three']; console.log(myArray.length); // => 3 const lastItem = myArray.pop(); console.log(lastItem); // => three console.log(myArray.length); // => 2

.filter()?

This method is used to take one array of items and make a new one that contains only items that a filtering function returns true for. function isEven(num) { return num % 2 === 0; } const myNumbers = [1, 2, 3, 4, 5, 6]; const evens = myNumbers.filter(isEven); console.log(evens); // => [2, 4, 6] // or const evensAlt = myNumbers.filter(num => num % 2 === 0); console.log(evensAlt); // => [2, 4, 6];

.sort()?

This method sorts an array in place. In place means that this method sorts the original array; it does not copy the array, sort it, and then return the sorted copy. If you pass no arguments to .sort(), it will alphabetically sort the list by default: const myArray = ['zebra', 'yodel', 'xylophone']; myArray.sort(); console.log(myArray); // => ['xylophone', 'yodel', 'zebra']

Showing users the Fibonacci numbers?

This user experience can be broken down into three distinct moments: 1. getting the number of results to compute from the user 2. computing an n-length list of Fibonacci numbers 3. displaying that list of numbers

A simple implementation using the float property

Three main approaches: - display: inline-block (along with variable, percentage-based widths on column elements in order to get them to line up side by side.) -Another approach is to use the new flexbox feature.

Adding items to the end of an array?

To add an item to the end of an array, use the built-in .push method: Ex: const myArray = [1, 2, 3]; myArray.push(4); console.log(myArray); // => [1, 2, 3, 4]

Coercion?

To close out this assignment, we want to make you aware of the idea of coercion. In JavaScript, if you try to use an operator — say the + operator — with two values who have different data types, JavaScript will coerce (that is, force) one of the variables to the data type of the other.

Creating arrays?

To create an array, we use the square brackets ([]). We separate items in the array with commas. Arrays can be created with zero or more elements. ex: const emptyArray = []; const nonEmptyArray = [1, 'two'];

Lesson 1: DOM traversal and manipulation?

To create an interactive web app, we need a way to programmatically alter the HTML that's displayed to users when certain events occur. For instance, we might want to display validation errors in a form or load additional articles to display as a user scrolls down in a result list.

Deleting key/value pairs?

To delete a key/value pair from an object, use the delete command: const foo = { bar: true }; delete foo.bar; console.log(foo.bar); // => undefined

Unit 2 Recommended Source?

To learn more about the DOM and event listeners, we recommend the following resources: Mozilla Developer Network's article Introduction to the DOM provides a good overview. Eloquent JavaScript's chapter on the Document Object Model provides a good practical introduction to the DOM, with a code along example. The official jQuery docs are comprehensive and relatively beginner friendly. The jQuery fundamentals site contains interactive tutorials on jQuery basics, traversing and manipulating the DOM, and events and event delegation Heydon Pickering's write-up on accessible toggles if you want to read more about building interfaces like the one above, or his collection of other accessible patterns. Léonie Watson's accessible tooltip demo bears repeating now that you're getting ready to make your own interactive apps.

Action attribute Vs Method attribute?

To progressively support all users you'll want to set the action and method attributes. - The action attribute is the URL of the server endpoint that submitted form data should be sent to. - The method attribute is the request method that the browser should use when sending the data to the server.

Preventing default element behaviors?

Try commenting out the event.preventDefault() line and then re-running the repl.it. When you submit the form, you may briefly see your submitted text display below the form, but then it will disappear. This is because the default form submission behavior kicks in and an attempt is made to submit the form data.

Updating values?

Updating values in objects is just like adding them. const foo = { bar: 'bizz' }; foo.bar = 'bang';

list-style: none?

Used on parent element <ul> to turn off the default dots that appear for bullet points.

Class and id attribute?

Valid on almost HTML element but not on some elements:<base>, <head>, <meta>, <param>, or <title>. Other attributes are specific to a particular element. The href attribute on our anchor element above is specific to anchor elements.

while loops?

We said that for loops run a block of behavior a set number of times. while loops are about running a block of behavior as long as some logical condition is true. ex: let counter = 1; const countTo = 10; while (counter <= countTo) { console.log(counter); counter++; } With while loops, you first have the while keyword, followed by a condition in parentheses. If the condition evaluates to true, the loop will run; if not, it won't. Ex: while (true) { // do something if (someCondition) { break; } } Since the while condition here (true) will always be true, this loop will run forever unless (or until) the condition in the if block is true. If that is the case, we use the break command to break out of the while loop and move on to any remaining code.

DOM Traversal and Manipulation?

We'll be using jQuery to find particular elements in the DOM (which is called traversing) and update them (which is called manipulating)? Recall that the browser reads our HTML file top to bottom, so if you have an index.js file that depends on jQuery, that index.js file needs to come after jQuery.

The accessibility model of a <form>

accessibility in forms is about more than just labels: properly constructed forms make it easier for everyone to understand when and how to provide information in a form. ARIA uses this tree to send information to and receive information from assistive devices such as screen readers.

The part of JavaScript that deals with interacting with HTML elements?

called the DOM (document object model) API, which we'll cover in unit 3 of this course — is specified by the W3C(World Wide Web Consortium), which is the same organization that creates the specification for HTML.

Example of objects?

const ledZeppelin = { singer: 'Robert Plant', guitar: 'Jimmy Page', bass: 'John Paul Jones', drums: 'John Bonham' } The curly bracket syntax above ({}) is one way we can create a new object. When you create an object like this, it's called an object literal. The keys in our ledZeppelin object are singer, guitar, bass, and drums. The values for these keys are 'Robert Plant', 'Jimmy Page', 'John Paul Jones', and 'John Bonham'. Each key is followed by a colon (:). Each key/value pair is separated by a comma (,). Also, know that the keys in an object must all be unique — that is, each key can be used only once in the object.

<textarea> tag

defines a multi-line text input control. A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier). The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties. Ex: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea

for loops?

for loops are used to run through a set of instructions a specific number of times. Here's a minimal example that just prints how many times the loop has run: const countTo = 10; for (let i = 1; i <= countTo; i++) { console.log(i); } Use for loops whenever there is a set of operations that you want to do a set number of times. You'll use them all the time in your daily life as a programmer.

The syntax of the callback function ?

function callbackfn(value, index, array1) Callback argument Definition value The value of the array element. index The numeric index of the array element. array1 The array object that contains the element.

Function declarations vs. function expressions

function myFunction() { console.log("myFunction"); } ...is called a function declaration. The other way to define a function is with a function expression, and it looks like this: const myFunction = function(arg1, arg2) { console.log("myFunction"); }

Get the photo with different sizes?

http://lorempixel.com/

Use codeshare to share code?

https://codeshare.io/5gKW7Y

Text image design?

https://css-tricks.com/design-considerations-text-images/

Flexbox from Kyle?

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Anchor pseudo-classes?

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

List of block level element?

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements

<br> tag ?

inserts a single line break. The <br> tag is an empty tag which means that it has no end tag.

Flexbox?

is a new layout mode in CSS3. distributes space along a single column or row. Like float layouts, but better! The Flexbox spec is finished and enjoys excellent browser support today. The previous version of CSS defined four layout modes: 1. block layout for laying out documents 2. inline layout for laying out text 3. table layout for laying 2D tabular data 4. positioned layout for explicit positioning

Versus spaghetti code?

is a pejorative phrase for source code that has a complex and tangled control structure, especially one using many GOTO statements, exceptions, threads, or other "unstructured" branching constructs.

Cascade?

is a process browsers follow to determine which CSS values get applied for all the properties on a given element.

null?

is a special value used to indicate that a variable has no value. It's not uncommon to see code that defaults to assigning null when other data is not available.

Grid systems?

is a structure that allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion.

Project 3: Position property?

is all about the flow of elements in an HTML document. The most common values used for position are static (which is the default value), absolute, relative, and fixed.

required?

is used to indicate that an input must be filled out. When the user submits the form, if there are any required child inputs on the form, the browser will display a message telling the user where they need to supply data.

Placeholder?

is used to set text that initially displays before the user has input any data.

pattern attribute?

is used to supply regular expression patterns that the user's input must match in order to be valid.

A string literal?

is zero or more Unicode code points enclosed in single or double quotes. - Unicode code points may also be represented by an escape sequence. - All code points may appear literally in a string literal except for the closing quote code points, U+005C (REVERSE SOLIDUS), U+000D (CARRIAGE RETURN), U+2028 (LINE SEPARATOR), U+2029 (PARAGRAPH SEPARATOR), and U+000A (LINE FEED). Any code points may appear in the form of an escape sequence. String literals evaluate to ECMAScript String values...

Defining variables with let

let is used to define variables whose values can (but need not) be reassigned. we can initially declare a variable without yet assigning a value. When you declare a variable, you create a link between a variable name and a place in the computer's memory that stores the value of that variable. Ex:let pi = 3.14159; console.log(pi); // => 3.14159 // on second thought, let's round to the nearest tenth place... pi = 3.1; console.log(pi); // 3.1

Clear=right?

make sure the text wont overlap the photos.

Why set font-size:0?

or better or worse, it's a common CSS hack used to remove whitespace between inline-block elements.

Root element?

parent element of all other elements.

try/catch/finally example?

try { // this will raise an error because // nonExistentVariable is undefined nonexistentVariable += 'foo'; } catch (e) { // this block runs if the try block fails. `e` // is an object representing the error console.log('Something went wrong'); console.dir(e); } finally { console.log('This happens in both success and failure case!'); } - The e that you see in catch(e) will be an object representing the error. - Also, note that there's nothing forcing you to refer to the error as e in catch(e). It's also common to see catch(err), and in principle, you could name that parameter whatever you'd like.

undefined

undefined is a special value that the browser assigns to variables when it first creates them in memory.?

The this keyword?

we said that in the context of object literals, this allows properties and methods on an object to refer to other properties and methods defined on the same object. Inside a callback function on an event listener, this refers to event.currentTarget. So anywhere that you have been typing out event.currentTarget, you can replace it with the this keyword. All that has changed is that you are using the this keyword to refer to the element which was clicked, rather than finding out this information from the event object.

.sort() with anonymous functions?

we saw how to apply a named function. That is to say, we defined a function called sortNumbers and passed it to myArray.sort(). We could also achieve the same result with an anonymous function: const myArray = [200, 20, 2, 100, 1, 10]; myArray.sort(function(a, b) { return a - b; }); console.log(myArray) // => [1, 2, 10, 20, 100, 200] It's also increasingly common to use arrow function syntax for anonymous functions. The example above could also be written like this: const myArray = [200, 20, 2, 100, 1, 10]; myArray.sort((a, b) => a - b); console.log(myArray) // => [1, 2, 10, 20, 100, 200]

Lesson 4: Arrays and Loops?

we'll learn about working with arrays and loops in JavaScript. Arrays are a data structure for storing lists of items. Loops allow you to execute a set of instructions numerous times.

Assignment 5: Loops?

we're going to explore loops. In programming, a loop is a construct that allows you to repeat a set of instructions a set number of times or until a specific condition is true.

In JavaScript, there are 3 commands we can use to declare space in memory ?

where we'll store values: let and var declare a variable; const declares a constant(A constant cannot be reassigned to a new value. ).

Global vs block scope?

you declare a variable in the global scope, it is available everywhere in your code. When you declare a variable in the global scope, it is available everywhere in your code. Any variable that is declared outside of a function in JavaScript has global scope.

Lesson 4: Wrap up?

you learned how to represent lists of things in JavaScript using arrays and how to repeatedly execute instructions using loops. You should feel comfortable explaining both concepts and why they're useful. You should also have the syntax for for loops memorized, as well as the syntax for interacting with arrays.

Drill 1: Width, height, color, border?

you'll add classes to the two divs to create a blue box and a red box, as described in the code comments and paragraphs in the repl.it. https://repl.it/@thinkful/Solution-width-height-color-border

Possible way to put CSS withing a style element?

<!— somewhere in <head> —> <style> p { color: red; } </style> <!— somewhere in body —> <p>Hi there how's it going?</p>

Getting CSS into HTML?

Typically, to utilize CSS, we link to one or more external stylesheets that contain style rules that get applied to the linking HTML page.

Why Semantic HTML usage?

semantic HTML is always preferable because: - The names of the HTML elements we choose help browsers, web-crawlers, screen readers, and project collaborators to better understand our content. - The first code snippet, it's easy enough to see that it represents a paragraph and a bulleted list, while with the second snippet composed entirely of div elements, that structure is less obvious.

Browser defaults vs. resetting vs. normalizing CSS?

Browsers differ in their defaults, which means your end users might get a different experience when they're using Chrome than when they're using Firefox. There are two common solutions to this problem. The first strategy is to use a CSS reset, the most popular of which is the Meyer reset. By linking to this file in your HTML (above your other style sheets, so it sets a base that they add to), you can guarantee cross-browser consistency for default styles. Another option is normalize.css, which is a CSS library that normalizes a subset of browser elements to be consistent between browsers.

CSS Selectors?

CSS provides a rich set of selectors that give you precise control over the elements targeted by a declaration block. Later in this lesson, you'll complete drills on CSS selectors to build up your working knowledge of the most commonly used selectors. /* universal selector (applies to everything) */ * { /* set stuff */ } /* targeting a single element type */ p { /* set stuff */ } /* targeting two different elements */ p, input { /* set stuff */ } /* targeting a class */ .foo { /* set stuff */ } /* targeting an id */ /* avoid these, but know how to recognize them in the wild. It's usually better to use a class selector instead. */ #bar { /* set stuff */ } /* targeting an element with a class */ /* try to avoid this, in favor of simple class declaration */ p.foo { /* set stuff */ } /* targeting descendants */ ul.foo li { /* any `li` within `ul.foo` will get targeted */ } /* targeting direct children */ ul > li { /* only `li`s that are direct children of ul targeted */ } /* targeting submit buttons */ button[type="submit"] { /* any button with a type of "submit" */ }

Lesson 2: HTML the Right Way?

First, we'll go over the terminology and background knowledge you need to competently talk about HTML. We'll discuss the difference between tags, elements, and attributes, what is meant when people say HTML is about "structure" (vs. style or behavior), and we'll learn to write semantic HTML. Next, we'll take our first look at Google Chrome Developer Tools, which you can use to inspect and modify the HTML on any site. In the third assignment, you'll complete a series of short drills to practice HTML. In the fourth assignment, you'll complete a challenge where you create an online resume for a fictional person (Sally Student is back!), using semantic HTML. Then we'll introduce the idea of accessibility (commonly shortened to a11y, with the "11" representing the eleven characters between "a" and "y"). In the sixth assignment, you'll put your knowledge of basic a11y best practices to work, refactoring Sally Student's resume to be a11y-friendly.

Structuring content with HTML?

HTML tells the browser what content to represent, while CSS tells the browser how that content should appear. When we say that HTML is about structuring content, we mean two things. First, we mean that an HTML document specifies each and every one of its elements. These can be visible elements (paragraphs and images) or ones that human users never see (for instance, <meta> elements appearing in the head of the document). Second, HTML specifies the hierarchical relationship between elements in a document.

Assignment 2?

Sublime Text and Basic Project Structure.

Role attribute?

Tell a browser, "This is the kind of job my content is supposed to do.

Anatomy of CSS?

The key vocabulary words for CSS are: ruleset, selector, declaration block, declarations, property, and value. Ex: input { display: block; font-family: 'Proxima Nova W01', sans-serif; font-weight: 400; font-style: normal; height: 45px; width: 420px; min-width: 210px; max-width: 100%; padding: 6px 1em 5px; border: 1px solid #d0d2d5; border-radius: 3px; font-size: 15px; line-height: 30px; color: #404853; box-shadow: inset 0 3px 7px #f6f7f7; }

Unit consists of how many lessons?

This unit is divided into six lessons. Here's what we'll cover: In Lesson 1: Frontend First Steps, you'll dive straight into HTML and CSS walking through creating an "About me" page. You'll also learn about Sublime Text, which is the text editor you'll use to write code in this course. In Lesson 2: HTML the Right Way, you'll do a deep dive on HTML, learning the concepts and vocabulary you need to effectively write and discuss HTML. In Lesson 3: CSS the Right Way, you'll do a deep dive on CSS. In the remaining lessons, you will build full pages using HTML and CSS, including pages with forms, setting up layouts with CSS, and making pages using responsive design — meaning your page responds to the type of device a person is using and displays appropriately on mobile, desktop, and tablet.

Assignment 1: Create an "About me" page?

To create this page, we'll be adding the following eight HTML tags: 1. <h1> - A first level heading tag. Normally there's only one of these on a page, and it's used to indicate the most important header. 2. <h2> - A second level heading tag. This is used for headers that are less important than <h1>. HTML gives us <h1> to <h6>. From <h2> on, it's fine to use more than one on a page. Note that these heading tags help Google's web crawlers understand what a page is about, and therefore are crucial for SEO (search engine optimization). They also set default styling for any text they wrap (so an H1, for instance, will have bigger, bolder font than a paragraph, by default in all modern browsers). 3. <p> - The paragraph tag, which you'll be shocked to learn is used to indicate that a grouping of text is a paragraph. 4. <ul> - The unordered list tag is used in conjunction with the <li> tag to represent un-numbered, bulleted lists of items. 5. <li> - Used to indicate a list item in a <ul>. 6. <a> - The anchor tag, which is used to link to another part of the page, or another page entirely. 7. <div> - The div tag, which is a generic container element, used to group together content.

Tags in HTML?

To generalize, an HTML element usually consists of some content (could be plain text or additional HTML elements) wrapped by opening and closing tags. Tags, then, are used to mark off the beginning and end of an element. Both opening and closing tags consist of angle brackets and the tag name (< ... >), with closing tags distinguished by a forward slash (</ ...>).

Semantic HTML?

When you're choosing an HTML element to wrap content, you should choose the one that most clearly aligns with the meaning of your content. For instance, if you're putting a paragraph of content into the body of your HTML page, use a <p> element (and not, say, a <div>). Ex: <main> <div class="paragraph">These are a few of my favorite things:</div> <div class="unordered-list"> <div class="list-item">pizza</div> <div class="list-item">cats</div> <div class="list-item">coding</div> <div class="list-item">chocolate</div> <div class="list-item">coffee</div> </div> <p>These are a few of my favorite things:</p> <ul> <li>pizza</li> <li>cats</li> <li>coding</li> <li>chocolate</li> <li>coffee</li> </ul>

Why we should keep selector as non-specific as possible?

When you're writing a ruleset, try to keep your selectors as non-specific as possible. For instance, p.foo would target any paragraph with the foo class. While that's valid CSS, it's almost always better to just create a ruleset for only .foo. That way the settings can be reused on other targets if we decide they should have the same style rules.

Unit 1?

You'll be comfortable creating basic web pages using HTML and CSS.

Recommended resources Lesson 2?

we recommend the following resources as a good starting point 1. The Getting to Know HTML lesson from Shaye Howe's Learn to Code HTML & CSS provides an excellent intro to basic HTML, with an emphasis on semantic HTML. 2. HTML Dog's short reading on Tags, Elements, Attributes 3. Mark Pilgrim's Dive into HTML5 is a great primer on the HTML5 standard and semantic HTML. 4. Mozilla Developer Network's HTML element reference lists all available HTML elements, with links to full entries on each one.

Metadata?

contains information about the page. This includes information about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or link to another file that has the information. <meta> The HTML <meta> element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.

Assignment 1: Anatomy of CSS?

- CSS (Cascading Style Sheets) is the language used to control the presentation layer.Whereas HTML is about structure and content (aka, the "content layer"), CSS is about style and appearance.

How the web works?

- Client and servers - The other parts of the tool box - What happens, exactly? - Package explained?

Heading elements?

- Heading elements (h1, h2, h3, h4, h5, h6) are used to establish information hierarchy. Although these elements are often styled so that h1s are bigger than h2s are bigger than h3s etc., their main role is to indicate the relative importance of different content in the page. - For instance, don't have an h1, then two h2s, and jump to four h5s.

meta description?

- Meta descriptions are HTML attributes that provide concise summaries of webpages. Ex: <head> <meta name="description" content="This is an example of a meta description. This will often show up in search results."> </head> -Meta descriptions can be any length, but Google generally truncates snippets ~300 characters

Making HTML accessible for different user types?

- Screen reader users - There are some simple best practices we can follow to optimize our web pages for screen readers.

HTML and default styling?

- The browser used its own internal styling defaults to determine what the structure we provided should look like. - If you create an HTML page with no CSS and view it in Chrome and Firefox, it probably won't look exactly the same. - In order to cancel out style differences between browsers, frontend developers often use what is called a CSS reset to zero out default styles and ensure a consistent user experience across browsers.

Things to cover?

- The parts of a CSS rule and the terminology used to describe CSS - How to target document elements using CSS selectors - CSS specificity - the "cascade" - How to activate CSS in your HTML code - The box model - Browser defaults, CSS resets, and CSS normalization

Assignment 2: Web Detective 101: Inspecting HTML with Dev tools

- We're going to cover the basics of using Developer Tools to inspect and modify HTML code on a live web page. - Later in this course, we'll discuss working with CSS and JavaScript in Developer Tools.

Client/ISP/DSL/packets/router?

- computer at home is not a server cos it's not directly connected to the internet. - So our computer is called client because it's connected indirectly to internet through ISP(internet service provider) with DSL(digital subscriber line service can be wired or wrieless). - Email, picture or webpage travels across the internet computers break the info into small pieces called packets. when it reaches its destination. The packets reassemble to make pic or message. - When we send packets, it goes through different routers with its own IP address(called layers) until it reaches the site you want to view. Then it will send info(identical packets) back to your computer through the same layers and unwrap one by one

Advantages of not using inline styling in html?

- maintaining the separation of concerns between HTML and CSS. - One of the advantages of CSS is reusable classes (say an .error class with red font color that we can apply wherever we need to give a user an error message), and classes are not possible with inline styles. - our code will be more maintainable and extensible (that is, easier to apply presentation rules we've set up in one place to new use cases).

Assignment 3: HTML Drills?

- you'll practice coding up common HTML elements. We've assembled four drills for you to complete. Each drill requires you to correctly use one or more HTML elements, including using attributes specific to that element.

Sublime: <!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>

1. <!DOCTYPE html>: Strictly speaking, this is not a tag, but rather a command to the browser to parse the page as HTML5, which is the most recent version of HTML. We'll learn more about HTML5 later in this unit. 2. <html>: The HTML element is bounded by opening and closing <html> tags. We say that the HTML element is the root element and all other elements are children of this element, meaning they're contained within the HTML tags. 3. <head>: The head element contains metadata about the HTML document. By default, we get <title> inside the head (discussed next). There are numerous children types that can appear in the head. If you take a look at head elements out in the wild, you'll often find metadata related to SEO (search engine optimization), Facebook sharing, or definition of document-wide variables going on in document heads. For now though, just remember that the head element is where we put document metadata. 4. <title>: Web browsers display the text in the title element in the browser tab. Web crawlers also look to this element to help classify web pages, so it plays an important part in SEO. 5. <body>: Body tags are used to delineate the main displayable elements of a web page.

Numerical representation of CSS specificity, allowing us to calculate specificity scores?

1. Elements and pseudo-elements (`a, div , body, :before, :after`) get a score of 1 2. Classes and attribute selectors (`.element, [type="text"]`) get a score of 10 3. IDs (`#header`) get a score of 100 4. Inline styles get a score of 1000 5. `!important` gets a score of NaN (it's more "specific"/powerful than even inline styles, and can only be overridden by the cascade — writing rules later in the stylesheet)

Assignment 5: Recommended resources?

1. How the web works? 2. Sublime Text

Beside sublime basics, what else will we learn?

1. Naming conventions for 2. HTML and CSS files 3. How to structure project directories 4. Six new HTML tags: <!DOCTYPE> <html> <head> <title> <body> <link> 5. How to link to a CSS file from an HTML file 6. How to preview a web page you're working on in the browser

What happens?

1. The browser goes to the DNS server, and finds the real address of the server that the website lives on (you find the address of the shop). 2. The browser sends an HTTP request message to the server, asking it to send a copy of the website to the client (you go to the shop and order your goods). This message, and all other data sent between the client and the server, is sent across your internet connection using TCP/IP. 3. Provided the server approves the client's request, the server sends the client a "200 OK" message, which means "Of course you can look at that website! Here it is", and then starts sending the website's files to the browser as a series of small chunks called data packets (the shop gives you your goods, and you bring them back to your house). 4. The browser assembles the small chunks into a complete website and displays it to you (the goods arrive at your door — new shiny stuff, awesome!).

The other parts of the toolbox?

1. Your internet connection: Allows you to send and receive data on the web. It's basically like the street between your house and the shop. 2. TCP/IP: Transmission Control Protocol and Internet Protocol are communication protocols that define how data should travel across the web. This is like the transport mechanisms that let you place an order, go to the shop, and buy your goods. In our example, this is like a car or a bike (or however else you might get around). 3. DNS: Domain Name Servers are like an address book for websites. When you type a web address in your browser, the browser looks at the DNS to find the web site's real address before it can retrieve the website. The browser needs to find out which server the website lives on, so it can send HTTP messages to the right place (see below). This is like looking up the address of the shop so you can access it. 4. HTTP: Hypertext Transfer Protocol is an application protocol that defines a language for clients and servers to speak to each other. This is like the language you use to order your goods. 5. Component files: A website is made up of many different files, which are like the different parts of the goods you buy from the shop. These files come in two main types: -Code files: Websites are built primarily from HTML, CSS, and JavaScript, though you'll meet other technologies a bit later. -Assets: This is a collective name for all the other stuff that makes up a website, such as images, music, video, Word documents, and PDFs.

Drill 3: Headers: No Longer Just for Soccer

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Headers drill</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <main> <h1>Lorem Ipsum</h1> <h2>Holding places since the 1st Century BCE</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae veritatis sed laborum, accusantium ut dolore asperiores ea enim, hic fuga corporis? Id cupiditate, voluptatibus veniam doloribus consectetur quia! Quae, eveniet?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste eligendi distinctio libero error vitae aliquid aut autem doloribus delectus necessitatibus possimus tempora, ipsam sequi, quae architecto maxime asperiores qui voluptate.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa est iusto doloribus consectetur fugit quis accusantium hic assumenda, dolorem autem dolor voluptatibus dolore sunt sed labore neque, saepe illum et!</p> </main> </body> </html>

Drill 1: Link Here, Link There?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Link here, link there drill</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <main> <h2>1. Open this Link THERE!</h2> <p><a href="http://stackoverflow.com/" target="_blank">Stack Overflow</a></p> <h2>2. Click a link to send email!</h2> <p><a href="mailto:[email protected]?subject=Link Here, Link There" target="_blank">Email me</a></p> </main> </body> </html> Output: 1. Open this Link THERE! Stack Overflow 2. Click a link to send email! Email me

Drill 4: Video Basics?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Video basics solution</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <main> <video src="https://archive.org/download/122Eyes1950/122Eyes1950_512kb.mp4" loop muted controls></video> </main> </body> </html>

Drill 2: Image Basics?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <main> <div class="container"> <h2>My Favorite Place</h2> <p>Of all the places in the world, this is the one I like the most:</p> <div> <img src="http://images.all-free-download.com/images/graphiclarge/dense_clouds_stock_photo_165861.jpg" alt="Beautiful image of clouds taken from an airplane" /> </div> </div> </main> </body> </html>

Elements vs. tags vs. attributes?

<div class="foo-class"> <p>This is a paragraph with <a href="https://somewhere.com">a link</a> in it.</p> <p id="second-paragraph">This is the second paragraph</p> </div> This snippet has four elements: one div, two paragraphs, and one anchor. If we look at the <div> element, it consists of an opening tag (<div>), some inner content (the two paragraphs), and a closing tag (</div>). Attributes are for setting properties on an HTML element. In the example above, there are three attributes: class="foo-class", href="https://www.somewhere.com", and id="second-paragraph". HTML attributes consist of a name (e.g., href) and a value enclosed in quotes (e.g., "https://www.somewhere.com").

URL format?

<protocol>://<server>/<path> 1. the protocol: This is the "how" - it tells your computer which conventions to use when talking to the computer serving the requested page. In this example, the desired protocol is "http", which is a special set of rules for requesting and receiving web content. 2. the server: This is the "where" - it tells your computer the name of the computer serving the requested page. In this example, the server is "www.npr.org", which is the name for one or more computers operated by NPR. 3. the path: This is the "what" - it indicates which page you're interested in accessing on the requested website. In this example, the path is "series/tiny-desk-concerts/", which is the name associated with a particular page among many available at the NPR website.

Attributes in HTML?

Attributes are for setting properties on an HTML element. In the example above, there are three attributes: class="foo-class", href="https://www.somewhere.com", and id="second-paragraph". HTML attributes consist of a name (e.g., href) and a value enclosed in quotes (e.g., "https://www.somewhere.com").

Client and servers?

Computers connected to the web are called clients and servers. 1. Clients are the typical web user's internet-connected devices (for example, your computer connected to your Wi-Fi, or your phone connected to your mobile network) and web-accessing software available on those devices (usually a web browser like Firefox or Chrome). 2 Servers are computers that store webpages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser.

Assignment 2: Web Detective 201: CSS Power Mode with Dev Tools

Developer Tools allows you to instantly change how everything about a web page looks. You can inspect the CSS applied to any element, locate the source code (that is, the original file that was downloaded that contains a set of style rules), change, delete, and add attributes, visualize the overall dimensions of an element, and see an element's computed styles. This interface is perfect for CSS detective work on existing sites, brainstorming style changes, and solving styling bugs.

Self-closing elements in HTML?

Elements which have no inner content. <img> which is used to embed images in an HTML document, has no inner content and doesn't require a closing tag. Ex: <p>This paragraph has an image: <img src="./images/foo.jpg"></p>.

What is pseudo-classes and pseudo-element?

In addition to element, class, and id selectors, there are also pseudo-classes and pseudo-elements. A pseudo-class is used to specify a special state of the element. A pseudo-element is used to style specified parts of an element.

Ex: container { padding: 30px; } div.foo p { color: green; } .foo p { color: red; } I'm green because `div.foo p` is more specific than `.foo p` even though `.foo p` comes second in stylesheet.

In this example, according to the second ruleset selector (.foo p), the paragraph color should be red because the selector says to target all paragraphs in an element with the .foo class. But the previous selector has higher specificity because it targets paragraphs in any div whose class is foo, so our end result is green. The key takeaway for now is that style rules with higher specificity will trump those with lower specificity if there are conflicting values being set for some property.

Unit 1: Fundamentals HTML and CSS: Structure and Style?

In this unit, you'll get up to speed on two key technologies: - HTML (Hyper Text Markup Language), which is the language used to describe the structure of a web page. - CSS (Cascading Style Sheets), which is the language used to describe the appearance of a web page.

Snippet of Thinkful's website?

It is a ruleset that describes how input elements should look. It consists of a selector (input, in this case), which is the element or elements that will be targeted by the declarations that follow. The declaration block follows the selector. A declaration block is a set of declarations contained in curly brackets ({, }). Within the block, each line is a separate declaration. A declaration consists of a property and the value it is to be set to (for instance, box-shadow: inset 0 3px 7px #f6f7f7;, above).

Sublime Text 3?

It is one of the most popular editors, in large part because it is easy to use and learn, lightweight, highly configurable, free to download, and has a rich ecosystem of plugins and integrations.

inline styling in html?

Most HTML elements allow a style property to be set. So <p style="color: blue; font-family: Arial">Lorem ipsum</p> would result in blue Arial text. This is an example of inline styling and it is to be avoided. Inline styles encode information about how an element should look directly into the HTML.

Screen reader?

Screen readers are software applications that attempt to convey what people with normal eyesight see on a display to their users via non-visual means, like text-to-speech,[4], sound icons,[5] or a Braille device.[2]

Why index.html is used as a default file name?

The default file name for a website's home page (INDEX.HTM is also used). Appropriately named, the home page serves as an index to the main pages on the site, each of which can link to any number of other pages and so on.

Example of pseudo-class?

This example also uses a pseudo-class to generate hover behavior (div.foo:hover {...}). If you hover over the gray container box, the background color switches to orange. Pseudo-classes target specific states of the document (such as the user hovering over or clicking on an element).

Commenting code?

Two purposes: 1. A code comment is a line of text that is used to document some feature or oddity of a given piece of code for fellow project collaborators. 2. Commenting out code is a common way of temporarily disabling code, often times for the purpose of debugging. In HTML, you can add comments to code using <!-- comment text -->. Ex: <!-- I'm a comment and I don't get rendered! --> Sublime shortcut for commenting: highlight first then "Ctrl+/"

How to have the box model respect the widths we set?

We set its value to border-box. By putting the following ruleset in your CSS: * { box-sizing: border-box; }

Nodes?

existing at the same level of the hierarchy (for instance, the <nav>, <header>, and <main> elements above) are called siblings.

Box sizing website?

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing https://css-tricks.com/box-sizing/

About me page?

https://repl.it/@Kanie/KookyTestyRail

Sublime text shortcut?

https://scotch.io/bar-talk/the-complete-visual-guide-to-sublime-text-3-getting-started-and-keyboard-shortcuts

Valid html language code?

https://www.w3schools.com/tags/ref_language_codes.asp

Deque System ?/ˈdiːkjuː/ DEE-KYEW

is a digital accessibility company based in Herndon, Virginia with additional offices in Ann Arbor, Michigan and Secunderabad, India. The company was started in 1999 and produces accessibility software in addition to offering accessibility consulting services.

Web crawler?

is a program or automated script which browses the World Wide Web in a methodical, automated manner. This process is called Web crawling or spidering. Many legitimate sites, in particular search engines, use spidering as a means of providing up-to-date data. A Search Engine Spider (also known as a crawler, Robot, SearchBot or simply a Bot) is a program that most search engines use to find what's new on the Internet. Google's web crawler is known as GoogleBot.

The box model?

is crucial to understanding CSS, especially when we move on to positioning and layout later in this lesson. The basic idea is that most elements on a web page are really rectangular boxes, even if they appear to be a different shape. The total space taken up by an element is determined by its width, height, padding, border, and margin.

Nested elements?

is quite common in programming, where different logic structures sequence, selection and loop, are combined (i.e., nested in one another). It also occurs in applications. For example, many word processing applications allow you to embed (nest) one document inside another.

<img src="my-kitten-bubbles.png" alt="A super cute picture of my tabby cat, Bubbles">

is read aloud by screen readers, which makes your images accessible to visually impaired users.

The use of !importance in css?

p { color: red !important; } You should know about !important, but try to avoid using it in your CSS. There are rare occasions where it's the right move, but usually, if you have to use !important, it's a sign that there are problems with the application of your style rules (for instance, you may just need to use a more specific selector).