`Day 1`

Read Chapters 1 and 2 on Structure and Text from HTML and CSS: Design and Build Websites

1. On a website, what is the purpose of HTML code?

It describes the structure of the page with the information that it contains in its tags.

2. What is the difference between an element and a tag?

The terms element and tag are used interchangeably. Element includes the opening and closing tags, and everything in between.

3. Why do we use attributes in HTML elements?

attributes provide additional information about the contents of an element.

4. Describe the purpose of the head, title, and body HTML elements

The head element contains information about the page.
The title element contains contents that are shown at the top of the browser, or on the tab for that page.
The body element contains everything that's inside the main browser window.

5. In your browser (Chrome), how do you view the source of a website?

You right click on the page, and then go down to view source page.

6. List five different HTML elements and what they are used for

<p></p> indicates a paragraph
<h1></h1> indicates a heading content
<body></body> indicates everything in the main browser window
<head></head> contains information about the page
<title></title> contents are either shown at the top of the browser or on the tab of the page you're viewing.

7. What are empty elements?

Empty elements don't have any words in between the opening/closing tags.
It usually only has one tag

8. What is semantic markup?

Provides extra information. (where emphasis is needed, if something is quoted, or if you have acronyms or abbreviations)
In a sense it adds more emphasis and describes the "expression" of your page more accurately.

9. What are three new semantic elements introduced in HTML 5?

<abbr>
<nav>
<article>
<aside>
<footer>

10. CodePen Gist

link: https://codepen.io/Jessiewithani/pen/eopBee

`Day 2`

Read Chapters 3 and 4 on Lists and Links from HTML and CSS: Design and Build Websites

1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?

An ordered list is a numbered; Unordered is a bullet point list that doesn't have to go in any particular order, and definition has a series of terms and their definition.

2. What is the basic structure of an element used to link to another website?

<a href = "link"> text user clicks </a>

3. What attribute should you include in a link to open a new tab when the link is clicked?

To open up a new tab you would have to insert the target attribute on the opening <a> tag.

4. How do you link a specific part of the same page?

Before you do so, you have to utilize the id attribute to specify the desired segment you want to link. When making the actual link, you're going to use the element <a>. Inside the <a> element, however, your href syntax is going to look different. It's going to start with a # key, followed by the value of the id attribute you want to link to.

Ex. <a href="#top">

Read Chapters 10, 11, and 12 on What is CSS, Color, and Text from HTML and CSS: Design and Build Websites

1. What is the purpose of CSS?

CSS lets you personalize the content (appearance) of an element by assigning certain rules as to how it should be displayed.

2. What does CSS stand for? What does cascading mean in this case?

CSS stands for Cascading style sheet. Cascading means that the styles can fall (cascade) from one style sheet to another, making multiple style sheets possible.

3. What is the basic structure of a CSS rule?

a CSS rule is divided into two parts: a selector and a declaration.

The structure looks like:

selector {
         declaration (made up of a property and a value separated by a :)}

4. How do you link a CSS stylesheet to your HTML document?

By inserting a <link> element in your HTML document, you can access your CSS stylesheet.
The <link> element should contain three attributes:
1. href: file path
2. type: type of document
3. rel: relationship between the HTML page and the linked file

5. When is it useful to use external stylesheets as opposed to using internal CSS?

When you're creating a site with multiple pages, it's best to use external style sheets. That way, you can style those pages as a whole instead of styling them individually.

6. Describe what a color hex code is.

Hex codes are comprised of 6-digits that rate the amount of primary colors (red, green, and blue) in a given color. It starts off with a # symbol then 6 digits following.

Ex. #ee3e80

7. What are the three parts of an HSL color property?

The three parts of an HSL color property are: hue, saturation, and lightness.

8. In the world of typeface, what are the three main categories of fonts? What are the differences between them?

There are three main categories of fonts:
1. Serif: The letters are more accentuated at the ends.
2. Sans-serif: The letters are straight with no details added.
3. Monospace/fixed-width: These letters have the same width.

9. When specifying font-size, what are the main three units used?

Weight
Style
Stretch

`Day 3`

Read Chapter 7 on Forms from HTML and CSS: Design and Build Websites

1. If you're using an input element in a form, what attribute controls the behavior of that input?

When using an <input> element, type will be the attribute that determines the value of the input.

2. What element is used to create a dropdown list?

the <select> element is used to create a dropdown list.

3. If you're using an input element to send form data to a server, what should the type attribute be set to?

the post method attribute should be used when sending form data to a server.

4. What element is used to group similar form items together?

you can group elements with related form information using the <fieldset> element.

Read Chapters 13 and 15 on Boxes and Layout from HTML and CSS: Design and Build Websites

1. Describe the differences between border, margin, and padding

Although they may seem quite similar to each other you can think of border, margin, and padding in this order. First comes the content which is framed by the padding. The padding is framed by the border, which is then framed by the margin.

2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?

the value are in clockwise order so the top top padding would be 1px, the right padding would be 2px, then comes the bottom padding which is 5px, and lastly the left padding which is 10px.

3. Describe the difference between block-level and inline elements.

block-level elements start on new lines and take up the full width that's available, while in-line elements are the exact opposite; they don't start on new lines and they an only take up the necessary width that is needed.

4. What is the role of fixed positioning and why is z-index important in the scenario of using fixed positioning?

fixed positioning, in a sense glues the elements in place. These elements don't affect their surrounding elements and they don't move when the user scrolls up/down the page. You need to include z-index so the boxes don't overlap. By using z-index you have control of which box you want to appear on top.

5. What is the difference between a fixed and liquid layout?

Fixed layouts stay the same regardless of window size, and a liquid layout expands and contracts according to the size of the window.

`Day 4`

Read Chapter 5 on Images HTML from HTML and CSS: Design and Build Websites

1. In an image element, why is the alt attribute important?

The alt attribute lets you input a text description of the image you're providing (if it's not viewable).

2. What determines if an image element is inline or block?

If an image is considered to be an inline image then it won't start on a new line and will just blend in with the surrounding texts. An image is considered to be a block element if it starts on a new line, above other elements.

3. What are the benefits of jpg or png image file formats?

you would jpg when you have several colors in a picture, that way the colors aren't distorted. When you have pictures that have mainly the same color throughout the picture you would want to png.

Read Chapter 16 on Images CSS from HTML and CSS:Design and Build Websites

1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?

When you specify the height and the width of images in CSS, it helps the images load at a better pace, rather than loading after the other contents of the page.

2. What is an image sprite, and why is it useful?

When several images are used for several different parts of an interface it is called a sprite. Instead of requesting for multiple images, the browser only needs to request one image.

Read the Introduction and Chapter 1 from JavaScript & jQuery: Interactive Front-End Web Development

`Day 5`

Read Chapter 2 (Statements, Variables, Data Types, & Arrays) from JavaScript & jQuery: Interactive Front-End Web Development

1. How do you declare a variable? What does the equals sign really mean in JavaScript? What is it called in JavaScript?

To declare a variable, when you are creating a variable you have to give the variable a name as well in order for you to actually be able to use it. The equal sign is called an assignment operator. It just means that you're now assigning a value to the undeclared variable.

2. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are

numbers: this data type deals with numbers (integers) and is used when counting or calculations are involved. You can also use decimal numbers and numbers that are negative.
strings: this data type is made up of letters and other characters. Strings are created with quotation marks ("" or ' '). Typically strings are used when dealing with texts.
booleans: are values that are considered to be only true or false

3. What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?

Name must begin with a letter, dollar sign, or an underscore (MUST NOT START WITH A NUMBER)
Name can contain letters, numbers, dollar sign, or an underscore (DON'T USE DASHES OR PERIODS)
CANNOT use keywords or reserved words
All variables are case sensitive
Use a name that describes the kind of information that the variable stores
If your variable name is made up of more than one word, use a capital letter for the first letter of every word

some reserved words that you should avoid using are:

4. How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?

When dealing with multiple related values, the convenient aspect of arrays is that you don't need to specify how many values it will hold. You can access a value in an array by typing in the name of the array followed by the index number of the item you are specifying in square brackets. To change it you simply change the value by using the equal sign.

5. What is the difference between an expression and a statement?

expressions rely on operators to execute the desired function. Expressions can be numbers, functions, variables, etc that result in a single value. Operators need an arguement before and after the operator. ( like addition, subtraction, etc)

6. What are three types of operators and how are they used?

1. arithmetic operators: used for mathematical functions
2. string operators: the + symbol is used to join strings from either sides together to create a single value
3. assignment operators : assigns a value to a variable

`Day 6`

Read part of Chapter 3 (Functions & Scope), pages 85-99, from JavaScript & jQuery: Interactive Front-End Web Development

1. If we have a function defined as function sayHello() {console.log("Hello!")}, What is the difference between entering sayHello and sayHello() in the console?

by leaving out the parenthesis, you're only calling the method not the value of the method.

2. What is the difference between function parameters and arguments?

Parameters are more like variables in a method, while arguments are the data (the actual value of the variable that gets passed to function)

3. What is the keyword return used for?

it simply returns a value to the code that called the function

4. How are local variables better than global variables? Are there instances you can think of where you might want to use a variable that is globally scoped over local?

local variables don't take up as much memory as a global variable. Different functions can use the same name without any conflict as well. When you forget to declare your variables, it will work if it's considered global, although it's not highly recommended to do so.

Jessiewithani/JessieLeHo-mod-0-capstone.md

Day 1