Skip to content

Erika vinculado #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
erikavin wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Erika vinculado #9

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e605955
Update GA-worksheet.md
erikavin Oct 19, 2015
0effed3
Update GA-worksheet.md
erikavin Oct 19, 2015
25b9169
Update GA-worksheet.md
erikavin Oct 21, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 35 additions & 33 deletions GA-worksheet.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@


##Project #2 Part #1: Header HTML
1. What is the purpose of the header tag?
1. What is the purpose of the header tag? A header tag is made for headers and its similar to a body, however it is meant specifically for a website's header.
Copy link
Copy Markdown
Owner

@tekd tekd Oct 26, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The header sits within the body (as opposed to the head, which is for metadata).

More specifically, the header tag actually holds the introductory material for the website, such as a logo and navigational links. Check it out on Buzzfeed.com. The top of the page that lets you know that you're on Buzzfeed is the header (inspect element to clarify).


2. What is a Navigation Bar?
Navigation bar is just a list of link.
3. What tag do we use to make a navigation bar? <nav>

3. What tag do we use to make a navigation bar? < >
4. <ul> Stands for unordered list
<li> Stands for list items

4. <ul> Stands for _____________________
<li> Stands for ______________________
5. What does the <a> tag do? The <a> is an anchor list, which makes list not just a text but links to another page.
Copy link
Copy Markdown
Owner

@tekd tekd Oct 26, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The li tag is separate from the a tag, so they aren't always lists. They just set up a link to go somewhere, with the destination specified in the attribute href.


5. What does the <a> tag do?

6. What would the line of HTML below do?
6. What would the line of HTML below do? the line of HTML below would make it a link to a specific page, which is google.

``` html
<a href="http://www.google.com">Google</a>
Expand All @@ -26,44 +26,46 @@
##Project #2 Part #2: Style the Header with CSS

1. What advantages does the `<link>` tag have over the `<style>` tag?

2. What is normalize.css?
The advantages of <link> tag is it includes CSS from an external file instead of writting it all out in HTML file.
Copy link
Copy Markdown
Owner

@tekd tekd Oct 26, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes! Why is that an advantage?

2. What is normalize.css? Normalized.css is according to its websites and makes browser render all elements more consistently in line with modern standards so the page will look the same in any browser.

3. Why do we need to add a padding property to the `<ul>` tag?

4. What does the “inline” property do to a list of items?
We use padding property to the <ul> to make the list in the center.
Copy link
Copy Markdown
Owner

@tekd tekd Oct 26, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the dash tutorial, the `text-align: center' in the header is actually what makes it centered.
There is default padding on the left for unordered lists to accommodate the bullet points, so adding padding to all sides makes this particular ul centered. Without it, it would stay shifted to the right.

4. What does the “inline” property do to a list of items? The "inline" property makes all links line up next to each others in a row.

5. What do the following padding values do?

padding: 25px 50px 75px 100px;

* top padding is __px
* right padding is __px
* bottom padding is __px
* left padding is __px
* top padding is 25px
* right padding is 50px
* bottom padding is 75px
* left padding is 100px

padding: 20px;

* top padding is __px
* right padding is __px
* bottom padding is __px
* left padding is __px
* top padding is 0px
Copy link
Copy Markdown
Owner

@tekd tekd Oct 26, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be 20px on all sides. When the padding property is given one value, the value applies to all sides of the 'box'.

* right padding is 20px
* bottom padding is 0px
* left padding is 20px

6. What is the difference between padding and margin?
6. What is the difference between padding and margin? While margin creates space on the outside of an element, the padding creates space in the inside.
Copy link
Copy Markdown
Owner

@tekd tekd Oct 26, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Remember that the padding is a part of the HTML element and the margin is not.


7. What did border-radius do to the square border around the image?
7. What did border-radius do to the square border around the image? it made the image's side more rounder.

##Project #2 Part #3: Responsive Design and Javascript

1. Why is responsive design becoming a more important aspect to consider when making a website compared to ten years ago?

websites before were designed differently and you couldn't access websites through your phone.
2. Why is it important to center and narrow text on a webpage? (think visually)
3. so it wont be all stretched out.
Copy link
Copy Markdown
Owner

@tekd tekd Oct 26, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we don't want the text to stretch out the width of a page. It would be too difficult to read!


3. What does this line of HTML do to an object? `margin: 0 auto;`
4. it makes the line in the center instead of it being stretched out.

4. How does using `max-width` instead of `width` improve the readability of any webpage?
4. How does using `max-width` instead of `width` improve the readability of any webpage? max-width makes the article element smaller the XXpx and wont be any larger than that XXpx

5. The media query to the below will not be activated unless…
5. The media query to the below will not be activated unless… when the browser is a certain width.

``` css
@media (max-width: 500px) {
Expand All @@ -73,23 +75,23 @@
}
```

6. What does each digit of this Hexidecimal Color Code represent? #E78
6. What does each digit of this Hexidecimal Color Code represent? #E78 red

E represents ...
E represents ...amount of redness

7 represents ...
7 represents ...amount of greenness

8 represents ...
8 represents ...amount of blueness

7. What is the Hex Color Code for true purple? #
7. What is the Hex Color Code for true purple? #F0F

8. _______________ is the programming language that allows websites to be interactive.
8. javascript is the programming language that allows websites to be interactive.

9. This tag allows us to add JavaScript into any webpage? < >
9. This tag allows us to add JavaScript into any webpage? <script></script>

10. What is an event?
10. What is an event? when you move,click,scroll press a key the browser fires off an event.

11. How does JavaScript use events?
11. How does JavaScript use events? to select elements and listen for events.

**Activity** Copy all the text from your project so far into a new JS Bin workspace. From there you can change the site to an “About Me” website about yourself. To do this you will need to do the following:

Expand Down