Skip to content

My ga worksheet #11

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
DanielLin1 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

My ga worksheet #11

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9436e4e
Update GA-worksheet.md
DanielLin1 Oct 19, 2015
38f36f2
Update GA-worksheet.md
DanielLin1 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
57 changes: 26 additions & 31 deletions GA-worksheet.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,34 @@
####Name:
####Name:Daniel Lin
####ScriptEd
####Topic: HTML, CSS, and JS

**Directions:** Project #2 on dash.ga.co asks you to create a blog for Jeff. Although you are not creating what someone can consider a blog, you are creating an intricate webpage using HTML, CSS and some JavaScript. Three skills that you will master in your time with ScriptEd. Log into your General Assembly account on dash.ga.co walk through the second project while answering the questions below. After completing this project you will be asked to convert this page into a four page website about your self.


##Project #2 Part #1: Header HTML
1. What is the purpose of the header tag?
1. What is the purpose of the header tag?Upper Part or a theme or like a title
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.

More specifically, the header tag 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?It's like a link to show something imporatant or important part for different parts
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.

It's a set of links that take you to the main parts of your website.

3. What tag do we use to make a navigation bar? < ><ul> <ol> <li> <ul> Stands for unorderlist <li> Stands for list item

2. What is a Navigation Bar?
5. What does the <a> tag do?It's like a placeholder or a hyperlink

3. What tag do we use to make a navigation bar? < >

4. <ul> Stands for _____________________
<li> Stands for ______________________

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? Give us the link for somewhere
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! The link below takes us to http://www.google.com.

The <a> tag sets up the link and the href' attribute gives us the destination of the link. In between the` tags is the text that will serve as the hyperlink.


``` html
<a href="http://www.google.com">Google</a>
```

##Project #2 Part #2: Style the Header with CSS

1. What advantages does the `<link>` tag have over the `<style>` tag?
1. What advantages does the `<link>` tag have over the `<style>` tag?A link between a document and an external resource but the style just changes the color
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 <style> tags are a way to add many styles directly to the HTML document--not just color. The link tag does connect an external resource, but could you tell me what the advantage is?


2. What is normalize.css?
2. What is normalize.css?Small CSS file that provides better cross-browser consistency in the default styling of HTML elements

3. Why do we need to add a padding property to the `<ul>` tag?
3. Why do we need to add a padding property to the `<ul>` tag? So then the size wouldn't be too big or too small.
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.

Take a Look at Project 2, Section 2, slide 14 in the dash tutorial. It's not about size in particular, but we want to get the nav bar centered.


4. What does the “inline” property do to a list of items?
4. What does the “inline” property do to a list of items? It line up the words in like a line.

5. What do the following padding values do?
5. What do the following padding values do? It changes the the size of something like make it larger or make it smaller.

padding: 25px 50px 75px 100px;

Expand All @@ -49,21 +44,21 @@
* bottom padding is __px
* left padding is __px

6. What is the difference between padding and margin?
6. What is the difference between padding and margin? The padding change the inside while the margin changes the outside
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.

👍


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 would change the sqaure more and ore into a circle

##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?
1. Why is responsive design becoming a more important aspect to consider when making a website compared to ten years ago?Responive didn't exist 10 years ago so it was different so that mean there is a huge different because long ago we didn't have responsive design at all
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.

What changes in the last 10 years made responsive design so important?


2. Why is it important to center and narrow text on a webpage? (think visually)
2. Why is it important to center and narrow text on a webpage? (think visually) So then it would be easier to read it and wouldn't be hard to read it.

3. What does this line of HTML do to an object? `margin: 0 auto;`
3. What does this line of HTML do to an object? `margin: 0 auto;`It would be center and equal in length and auto would fill the container.

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 sets a limit so you cannot go any higher

5. The media query to the below will not be activated unless…
5. The media query to the below will not be activated unless… It won't work unless the px is 500 or below

``` css
@media (max-width: 500px) {
Expand All @@ -75,21 +70,21 @@

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

E represents ...
E represents ... Red

7 represents ...
7 represents ... Green

8 represents ...
8 represents ... Blue

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

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>

10. What is an event?
10. What is an event? A event is something that occurs when the user press something
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.

An event is basically anything that happens on the web page: click, hover, page load, etc. We used the alert in this tutorial to alert us of a "click" event.


11. How does JavaScript use events?
11. How does JavaScript use events? The javascript wait for the click event and butten event.

**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