Turing Pre-work

Two weeks to start date as of 4/17

Daily Workflow Links

-Typing

-Brilliant Warmups

-Turing Pre-work page

-CodePen

-Github

-Gist Markdown Formatting

-UX Crash Course

---

Day One

HTML and CSS: Design and Build Websites Chapters 1 & 2

1. HTML describes the structure of a web page
2. HTML uses elements to describe the structure of a webpage. Elements are usually made up of two tags.
3. We use attributes to provide additional information about the contents of an element.
4. The head element contains information about the page, the title element, usually found inside the head, gives the page a title and the body element is what holds what is found inside the main browser window.
5. To view the page source in Chrome, on the tool bar go to View > Developer > View Source, or press command + alt + u, or Control click on the page and choose view source or inspect element to inspect a specific part of the page.
6. Five different HTML elements
   • <h1></h1> creates a main header
   • <em></em> creates emphesis
   • <strong></strong> indicates its content is important
   • <blockquote></blockquote/> is used for longer quotes that take an entire paragraph
   • <q></q> is used for shorter quotes that sit within the paragraph
7. An empty element has no words between an opening and closing tag and usually has only one tag
8. Semantic markups are elements that are not inteded to affect the structure of the web pages, but they do add extra information to the pages.
9. <header>, <nav> and <article>

The Drive To Learn

---

Day Two

HTML and CSS: Design and Build Websites Chapters 3 & 4

1. The defference between ordered, unordered and definition lists are that ordered lists are numbered, unordered list begin with bullet points and definition lists are made up of a set of terms along with the definitions for each.
2. The basic structure of an element used to link to another website has an opening link tag <a href="URL goes here"> and a closing link tag </a>, and between the two is clickable text, like this: <a href="URL">Clickable Text</a>
3. You should include a target attribute with a blank value if you want to open the link in a new tab. For example: <a href="URL" target="_blank">Clickable Text</a>
4. You link a specific part of the same page by using id attributes to identify the points in the page that you want to link to, then using the <a> element again you link to the id by using the # symbol at the start of the href attribute followed by the id you want to link to. For example <h1 id="top"> Header </h1> then linking to this using <a href="#top">Top</a>

HTML and CSS: Design and Build Websites Chapters 10 - 12

1. The purpose of CSS is to style a webpage.
2. CSS stands for Cascading Style Sheet. Cascading means the rules are read from the top to the bottom and are implemented in that order.
3. Each CSS rule has a selector and a declaration. The selector is the part associating the rule to an HTML element. The declaration indicates how the element referred to in the selector should be styled. Declarations are made up of a property and a value. For example:

p {
    font-family: Arial;}

Where p is the selector, font-family is the property and Arial is the value and together font-family: Arial; is the decloration.

4. A CSS style sheet is linked to an HTML document by using the <link> element in the HTML document that links the name of the CSS page to the HTML document.
5. External stylesheets should be used when a website has more than one page so that the stylesheet can be used to style multiple pages and changes can be made easily in one place for all pages.
6. Hex codes use hex values 0-9 and a-f (16 total values) to represent values for red, green, and blue. Each channel gets 2 places to hold a value in each place which makes it possible to have a total of 256 values represented in each channel. Though the strictly number value system, from 0 - 255, is known as RGB values. So in Hex code, an f is the greatest value while 0 is the least. This makes the hex value #ffffff, or because they are all the same value it can be abbreviated to #fff, white; and the hex value #000 black.
7. The three parts of an HSL color property are Hue, Saturation and Lightness. Hue is the colloquial idea of color and is often represented as an angel, saturation is the amount of gray that's in a color where 100% is full saturation and 0% is desaturation and is a shade of gray, and lightness is the amount of white or black in a color and is also represented as a percentage.
8. The tree main catagories of fonts are serif, san-serif, and monospace. Serif fonts have extra details on the ends of the main strokes of the letters, like platform and tail looking endings to letter; san-serif fonts have straight ends to letters and monospace fonts have the same widths in every letter.
9. The main three units used in specifying a font-size are pixels, percentages and ems. Pixels determine size in relation to the resolution of the screen, percentages determine size based on the default size of text in a web brower which is 16 pixels and ems determine size in a similar way as percentages where 1em is the same as 16 pixels.

---

Day Three

HTML and CSS: Design and Build Websites Chapter 7

1. In an input element in a form the type attribute controls the behavior of that input.
2. The select element is used to create a dropdown list.
3. When using an input element to send form data to a server, you should set the type attribute to submit.
4. The fieldset element is used to group similar form items together.

HTML and CSS: Design and Build Websites Chapters 13 & 15

1. The border of a box seperates the edge of one box from another, margin sis outside the edge of the border and can be used to create a gap between the borders of two boxes, and padding is the space between the border of a box and any content contained within it.
2. In this example the pixel values correspond to the box in a clockwise order starting at the top, right, bottom then left.
3. A block-level element always starts on a new line and takes up the full width available to it. An inline element does not start on a new line, it flows between surrounding text and only takes up the width that is necessary.
4. The role of fixed positioning is to set an element in position in relation to the browser window, as opposed to the containing element. The z-index allows you to control which box appears on top in the case that boxes overlap.
5. A fixed layout does not change sizes as the user may increase or decrease the size of the browser window but a liquid layout wil stretch and contract as the user might increase or decrease the size of the browser window.

---

Day Four

HTML and CSS: Design and Build Websites Chapter 5

1. The alt attribute in an image element is important because it will provide a text description in case the image doesn't load.
2. Where the image element is placed in the code, whether its followed by a block-level element or insidea block-level eleement, will determine if the image is inline or block.
3. The benefits of using jpg are that they hold color value well and are compressed images that will help the web-page load quicker. The benefits of using png are that they are a smaller file and can have transparent backgrounds.

Chapter 16

1. Specifying the height and width of images in CSS and not HTML allows the page to load more smoothly because the HTML and CSS code will often load before the images allowing the rest of the page to render without waiting for the image to download.
2. The advantage to using sprites is that the web browser only needs to request on image rather than many images, which can make the web page load faster.

---

Day 5

Eloquent JavaScript Chapters 1 & 2

1. In JavaScript there are three main data types: numbers, strings, and booleans. Numbers are just that, numbers. Whole numbers, exponents and special numbers like infinity, -infinity and NaN (not a number). Strings are anything put into quotation marks, single or double. Booleans are values that distinguish between two possibilities and represented and written with the words true and false.
2. Three logical operators that javascript supports are the && operator which represents the logical and, there is the || operator which represents the logical or and there is the == which represents the logical equal to.
3. The naming convention used for variables is that variable names can be any word that isn't reserved as a keyword (such as var). They may not include spaces. Digits can also be part of variable names but the name must not start with a digit. A variable name cannot include punctiation, except for the characters $ and the underscore.
4. The difference between an expression and a statement is that an expression is a piece of code that produces a value, a statement is made up of an expression and the simplest kind of statement is an expression with a semi-colon after it. For example:

1;
!false;

5. A few JavaScript reserved words are break case catch interface let new throw true while with this and are important to avoid using as variable names because they are being reserved for future versions of JavaScript.
6. Control flow is the predictablility, from top to bottom, of execution of statements when your program contains more than one statement and it is useful so that we can know the order of execution.

Day 6

Eloquent JavaScript Chapters 3

1. Writing sayHello() in the console is declaring a function called sayHello where as just writing sayHello is not.
2. The keyword return is used to determine the value a function returns. Without an expression the return keyword will cause the function to return undefined.
3. Function parameters are the names listed in the function definition, they are the statements that are to be executed when the function is called. Parameters behave like regular variables, but their initial values are given by the caller of the function, not the code in the function itself.
4. When naming functions the first letter should be lower-case and the name should not include a period except for console.log.

---

Day 7

UX Crash Course: 31 Fundamentals

• UX stands for User Experience and its aim is to make users effective by doing research to understand users, solve their needs and the needs of businesses. The goal of a user is to find a get what they want where as the goals of business's is often to make money or create brand awareness or to build a community base for whatever social media purpose. Whatever the reason the UX design will look different depending on the goal. The five main ingredients to UX are Psychology, Usability, Design, Copywriting & Analysis.