Skip to content

Instantly share code, notes, and snippets.

@Asilo5

Asilo5/AmandaSierra-mod-0-capstone.md

Last active April 29, 2019 00:29
Show Gist options
  • Save Asilo5/8cdadaf1ffc749dace924248455be85c to your computer and use it in GitHub Desktop.
Save Asilo5/8cdadaf1ffc749dace924248455be85c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
AmandaSierra-mod-0-capstone.md

Day 1

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

    • It creates and gives structure to a website to make it easier for the user to understand and navigate the website.
    • The h1 tag, for example is the header of the page. The h1 tag should be inside the body tag, which lieas inside the html tag. The body tag is where everything visible on the html code is. Inside the body tag you can add the paragraph, image, link, article tags, which help put the page together before making it visually pretty with CSS.

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

    • The elements live inside the the two tags, opening and closing tag. But in whole they are considered an element. They are also used interchangeably.

  3. Why do we use attributes in HTML elements?

    • Attributes add information to the element/ tag being coded. For example, we can add a font-family attribute to a paragraph to change the font, but you can also do that in CSS.

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

    • The head is where you add informtion to the site that is not visible to the user on their page.
    • The title is what one will see on the URL or tab.
    • The body is where you write everything you want the user to see.

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

    • On top of the page, you go to View, then to Developer, then click on 'View Source'. Or do option + command + u.

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

    is a paragraph element, and it is used to represent a paragraph of text.

    • blockquote - Usually indents long quotes made on a page, but CSS should be used instead.
    • cite - Used to reference the title of a piece of work, for example a book.
    • s - Line goes through a word that is no longer relevant.
    • sup - Used to contain characters that should be superscript, like the 'th' after a date.
    • sub - Used to contain characters that should be subscript, like the 2 in CO2.

  7. What are empty elements?

    • Empty elemtents are elements that do not have a closing tag and do not have any words in-between. For example br (adds space) and hr (adds a break with a line).

  8. What is semantic markup?

    • Sematic markup properly interprets the meaning of the word or emphasises it. For example, strong element shows what content is important in a paragraph.

  9. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.

    • header
    • article
    • footer

Codepen Link:

https://codepen.io/Asilo5/pen/QPWmdY

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

    • Ordered: It is a list that is ordered.

    • Unordered: Is a bullet point list.

    • Definition: Is a list that has terms and definitions.

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

    • The basic structure of an element used to link to another is by having an 'a' element with a href attribute and the name/ description to where you want to link the people to between the opening and closing tags.
< a href="https://github.com/Asilo5/git_and_gh_practice"> Link to one of my github repos </a>

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

    • An href attribute

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

    • You use the same href attribute but instead use the name of the file or a directory along with a file.
< a href="index.html"> Home </a>

Day 2

  1. What is the purpose of CSS?

    • CSS styles the page, for example you can add colour, font styles, ect.

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

    • Cascading Style Sheet is CSS. Cascading meaning that when you write CSS, CSS will read your code from the top to the bottom, no other way. Like a waterfall.

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

    • A CSS rule has two parts. A selector and a declaration.
      • The selector applies to the the element you want to style.
      • The declaration is where you write the styling process.

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

    • Inside the HTMl head element, between the opening and closing tags, you add a link empty element that has an relative href attribute to a CSS file, as well as the type, tells you which kind of document, and rel, tells you relationship between file and HTML, attribute.

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

    • When you build a website that has more than one page, it is more useful and less hectic to use an external stylesheet. The HTML would also be easier to read and edit when you keep the CSS and HTML file seperate.

  6. Describe what a color hex code is.

    • Hex code is a six digit code that represents the amounts of green, blue, and red in a color and it starts with a # sign.

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

    • Hue
    • Saturation
    • Lightness

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

    • Serif : Fonts have extra detail on the ends.
    • Sans-Serif : Fonts have straight ends to the letters.
    • Monospace : The meaning of it is same-width, so all the letters in this font have the same width.

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

    • Pixels
    • Percentages
    • Ems

Day 3

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

    • There are a few attributes that control the behaviour of the input. For example, there is the type and name attribute. The type attribute lets the input know that text will be used and the name attribute is the name of the input that is then sent to the server.

  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 value attribute sends the value and the name.

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

    • Fieldset element groups related form controls together.

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

    • Border : The border is what seperates one box from the other, it lies between the padding and margin.
    • Margin : The margin is the space outside of the border box.
    • Padding : The padding is the space that lies between the content and the border of the box.

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

    • 1px is top
    • 2px is right
    • 5px is bottom
    • 10px is left

  7. Describe the different between block-level and inline elements.

    • Block-level can begin on a new line.
    • Inline generally stay in one line. Elements appear right next to eachother rather than on top.

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

    • The fixed positioning fixes the position the element to one spot where even scrolling wont move it. Z-index tells you that a at a higher number, the item will sit on top rather than overlap.

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

    • Fixed : They do not change in size even if the browser size changes.
    • Liquid : Adapts to the size of the browser when the user resizes it.

Day 4

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

    • The alt attribute is used by screen readers for the visually impaired. It adds a description so they can understand what is going on in the picture.

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

    • Block elements usually include h1 and p elements. If an image is before the block element, the block element will sit on a new line.

    • Inline elements include b, em, and img elements. They do not start on a new line.

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

    • For jpg file formats it is widely used, it is great for photographs and a lot of color.

    • For png file formats it does not loose quality when compressing the image. Good for transparency and opacity.

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

    • It is beneficial because if the image is used more than once, you need to only change the CSS rather than go search for each image to change it.

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

    • An image sprite is a single image used in many different parts of the interface. It is useful because the browser needs to only request it once which then helps to load the page faster.

JavaScript

Day 5

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

    • You declare variables by giving it a name.
    • An equal sign means that you are going to assign a value to the variable or update it.
    • An equal sign in JavaScript is called an assignment operator.
    • var variables are similiar to let variables, the value can later be changed.
    • const variables cannot be changed later on, once the value is given it has to stay that way.

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

    • Numbers : Data type handles the numbers. If you have a tasks that requires counting or determining sizes, you use this one.
    • Strings : Data type handles letters and characters. The characters and letters must be stored between quotes. You use this when you are using any type of text.
    • Booleans : Data type consists of two values, true and false. You use it to get a simple answer of yes or no.

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

    1. Variables cannot start with a number.
    2. You cannot use a dash (-) or a period (.) in a variable name.
    3. You cannot use keywords or reserved words, like var, finally, for, else.
    4. You cannot create two variables with the same name but different cases.
    5. Do declare a varialbe with a name thst describes what the variable will hold.
    6. Use camel case if the variable name is made up of two words.

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

    • An array is useful when you have a list.
    • You can access an array by specifing the array name along with the index number in square bracket.
      • var itemZero;
        • itemZero = shoppingList[0];
    • By accessing it you are then also able to change the value.
      • itemZero[0] = 'Plantain';

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

    • Expression : Evaluates values.
    • Statement : Is an instruction to perform actions.

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

    • Arithmetic : They perform basic math.
    • String : Combine two strings together.
    • Assignment : Assign a value to a variable.

Day 6

  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?

    • An error will show up. sayHello is not the same as sayHello() because the first sayHello is not a complete function name.

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

    • Function parameters are what lies between the parantheses when you are first declaring your function.
    • Function arguments are what lies between the parentheses when you later call the function to fill in the information needed to perform a calculation.

  3. What is the keyword return used for?

    • The keyword return is used for returning the value or answer of a code that has been called in 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 are better than global because they use less memory and are less likely to use naming conflicts.
    • It is better to use a global variable when that variable will be used more than once anywhere in the script.

Day 7

  1. What is the user’s motivation to be here in the first place?

  2. Could you solve this just as well by doing something more common?

  3. Do the colours, shapes, and typography help people find what they want and improve usability of the details?

  4. Does it reduce anxiety?

  5. How can you use this analysis to make improvements?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment