GA-worksheet.md

####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?Upper Part or a theme or like a title

2. What is a Navigation Bar?It's like a link to show something imporatant or important part for different parts

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

   1. Stands for unorderlist
      • Stands for list item

      • What does the tag do?It's like a placeholder or a hyperlink

      • What would the line of HTML below do? Give us the link for somewhere

   <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?A link between a document and an external resource but the style just changes the color

   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? So then the size wouldn't be too big or too small.

   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? It changes the the size of something like make it larger or make it smaller.

      padding: 25px 50px 75px 100px;

      • top padding is __px
      • right padding is __px
      • bottom padding is __px
      • left padding is __px

      padding: 20px;

      • top padding is __px
      • right padding is __px
      • bottom padding is __px
      • left padding is __px

   6. What is the difference between padding and margin? The padding change the inside while the margin changes the outside

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

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

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

   @media (max-width: 500px) { body { background: red; } } ```

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

   E represents ... Red

   7 represents ... Green

   8 represents ... Blue

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

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

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

   10. What is an event? A event is something that occurs when the user press something

   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:

   • Manipulate much of the text and tags to represent yourself… Not Jeff

   • Make sure that your "Like" button functions. If it does not work ask a teacher for guidance.