Skip to content
Open
Changes from all commits
Commits
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
48 changes: 34 additions & 14 deletions GA-worksheet.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,22 @@

##Project #2 Part #1: Header HTML
1. What is the purpose of the header tag?
To contain elements of headings.
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

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?
A list of links

3. What tag do we use to make a navigation bar? < >
The <ul></ul> tags

4. <ul> Stands for _____________________
<li> Stands for ______________________
4. <ul> Stands for _unordered list_______
<li> Stands for _list item____________

5. What does the <a> tag do?
The <a> tag makes a particular section a link.

6. What would the line of HTML below do?
It would take you to google.com if you click the word "Google"

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

1. What advantages does the `<link>` tag have over the `<style>` tag?
You can its better in an orginization sense.
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

It definitely helps with organization. <style> lets you apply styling to the HTML document, and `' lets you connect an external resource, like a CSS document.


2. What is normalize.css?
The CSS File
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

It's a special type of CSS file and serves a particular purpose...what is that purpose?


3. Why do we need to add a padding property to the `<ul>` tag?
To add space between the links / text
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

We added padding to the individual <li> tags to add space around the links.

The padding around the <ul> is tricky -- 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 appear centered.


4. What does the “inline” property do to a list of items?
It puts them in a straight line.

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 20px
* right padding is 20px
* bottom padding is 20px
* left padding is 20px

6. What is the difference between padding and margin?
Copy link
Copy Markdown
Owner

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.

Padding: Creates space inside an element
Margin: Creates space outside an element

7. What did border-radius do to the square border around the image?
It made the edges rounded.

##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?
Because there are many different ways people now can accses websites.

2. Why is it important to center and narrow text on a webpage? (think visually)
To make the layout easier for the user to use.

3. What does this line of HTML do to an object? `margin: 0 auto;`
It gives the effect of the text being centerized. The "auto" part sets the margin on both left and right of the screen to an automatic distance.

4. How does using `max-width` instead of `width` improve the readability of any webpage?
It restricts the text from expanding a certin point.

5. The media query to the below will not be activated unless…
unless the width is less than 500px

``` css
@media (max-width: 500px) {
Expand All @@ -75,17 +94,18 @@

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

E represents ...
E represents ... The ammount of Redness.

7 represents ...
7 represents ... The ammount of Green-ness.

8 represents ...
8 represents ... The ammount of Blueness

7. What is the Hex Color Code for true purple? #
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

Just think about what colors you need to mix to get purple.


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? < >
The <script> tag

10. What is an event?

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

And how does JavaScript use events?

Expand Down