Skip to content

Instantly share code, notes, and snippets.

@JustinD85
Last active September 8, 2018 08:48
Show Gist options
  • Save JustinD85/03f3b5d0a31460070cb3de17bcadbf91 to your computer and use it in GitHub Desktop.
Save JustinD85/03f3b5d0a31460070cb3de17bcadbf91 to your computer and use it in GitHub Desktop.
FrontEnd prework

TECHNICAL PREWORK

Day 1

1. On a website, what is the purpose of HTML code? To give the website an initial structure.

2. What is the difference between an element and a tag? Elements are parts of an HTML document that are comprised generally of two tags. Tags are part of an element that typically comes with an opening and closing portion.

3. Why do we use attributes in HTML elements? For a variety of reasons namely: identifying the element, styling the element, or giving the element some other attribute. 4. Describe the purpose fo the head, title, and body HTML elements. Head: Responsible for non-visual data. Title: To be used to display in search results and the tab portion of your browser, placed inside the head. Body: Where the main content of the page should be kept.

5. In your browser (Chrome), how do you view the source of a website? Right click on the page and click view page source, or inspect and navigate to the elements tab.

6. List 5 different HTML elements and what they are used for. For example, <p></p> is a paragraph element, and it is used to represent a paragraph of text.

  • <footer></footer> is a footer tag, and it represents the bottom portion of a webpage.
  • <a></a> is an anchor tag, it represents a path to a resource, usually to another webpage.
  • <link> is a link tag, it represents a link to a resource, commonly for linking stylesheets, etc.
  • <script></script> is a script tag, it represents code that can be executed and that should be imported into the document, such as javascript files.

7. What are empty elements? Elements that can have no child element such an <img>.

8. What is semantic markup? In a nutshell, the usage of tags aligned with their meaning. <span> and <div> for example have no semantic meaning thus, are not semantic markups. Semantics is the usage of a word aligned with its meaning.

9. What are three new semantic elements introduced in HTML 5? <aside>, <header>, <nav>

CODEPEN

CodePen

Day 2

Part 1

1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences? Ordered lists give the ability to have numerical or alphabetically organized lists. Unordered lists are lists that give you items that are in an arbitrary order, usually is denoted by bulleted notation. Definition are lists that have the tags dl, dt, and dd. Respectively they represent a list of definitions, the definition term, and the definition description.

2. What is the basic structure of an element used to link to another website? <a href="somelink.com">Text to Click on</a>

**3. What attribute shoudl you include in a link to open a new tab when the link is clicked? ** target="_blank"

4. How do you link to a specific part of the same page? An easy way is to use an id attribute on an element in conjunction with an anchor <a> tag that href's to that id.

Part 2

1. What is the purpose of CSS? To style webpages.

2. What does CSS stand for? What does cascading mean in this case? Cascading Style Sheets. There are 3 attributes checked to give a weight value to each style decoration. Those are: specificity, importance, source order. Specificty in this context means that the most specific rules will be applied to pages styling. That is, rules that apply generally are easily overridden by rules that apply to a specific element. Importance is determined by the origin of the stylesheet. The 3 main sources are User Agent(browser), User Styles and Author style(stylesheet). Finally, if two or more style decorations have the same weight, whichever is written latest is given higher weight and will take effect over the others.

3. What is the basic structure of a CSS rule? selected element followed by a left angle bracket, inside this bracket with be propert:value pairs followed by a right angle bracket.

4. How do you link a CSS stylesheet to your HTML document? <link rel="stylesheet" href="styles.css">

5. When is it useful to use external stylesheets as opposed to using internal CSS? When you want to reuse a style for other webpages. It is easier to have a seperate external sheet to import than to copy and paste large amounts of code over and over. Especially if something changes, then you would need to change it in multiple files as opposed to one file.

6. Describe what a color hex code is. It is a base 16 number representation of an RGB color value.

7. What are the three parts of an HSL color property? Hue, Saturation and lightness.

8. In the world of typeface, what are the three main categories of fonts? What are the differences between them? Serif, San-Serif, and script. Serif type font is characterized as having feet, san(which means without) are serif fonts without the feet and script is usually modeled after handing writing(cursive style).

9. When specifying font-size, what are the main three units used? px, rem and em

Day 3

Part 1

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

2. What element is used to create a dropdown list? The select tag

3. If you're using an input element to send form data to a server, what shoud the type attribute be set to? The type should be text.

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

Part 2

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

  • border *margin
  • padding

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

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

3. Describe the difference between block-level and inline elements.

  • Block: has a new line(or break) placed before and after the element, takes up entirety of width page, up to its height.
  • Inline: only takes up the space it needs.

4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning? Fixed positioning lets an element be positioned in a fixed location in relation to the viewport. Fixed-positioning creates their own stacking contexts, the element is able to break the z-order.

5. What is the difference between a fixed and liquid layout? A fixed layout does not change the its format according to the size of the users screen so all users will view the same page. A fluid layout uses percentages(for example) so that the layout adjusts according to the users screen size.

Day 4

1. In an image element, why is alt attrbute important? It is useful for when the element cannot be correctly rendered, the text would briefly explain the element.

2. What determines if an image element is inline or block? The display property of the element does.

3. What are the benefits ofjpg or png image file formats? Well jpg is lossy meaning that data is actually destroyed when saved in the format. Really useful for storing images as the size is smaller. PNG on the otherhand is lossless meaning data is preserved when changing size for example which is great when file size is a nonfactor and quality is important.

Day 5

1. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are. Numbers: They represent numerical values. Strings: Represents characters like "ab3cd" or just 'a' Booleans: Represent a true or false statement.

2. What are the three logical operators that JavaScript supports? ! && ||

3. What is the naming convention used for variables? let somVar = "someVal"; const someFunc = ()=>{} var someObj = {}

4. What is the difference between an expression and a statement? Simply expression give a value and statements do something. Expressions are part of statements.

5. What are a few JavaScript reserved words, and why are they important to avoid using them for variable names? var, let, const: They are important because they give common tasks one name that can be easily identified by the community. The reserved words I chose keep the memory location of something for the programmer instead of the programmer having to manipulate machine code to do it themselves.

6. What is control flow, and why is it useful for programming? Control flow is basically the order a program follows to execute statements. This is important because it allows a single program to do multiple things or even entirely new things depending on the programming.

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? One would return the statement you wrote, the other(with brackets) would execute the function and output Hello! to the console.

2. What is the keyword return used for? to return a value in a function

3. What are function parameters? parameters are simply the names in the function delcaration, arguements are the actual values( writing this here also so I hopefully remember it!).

4. What is the naming convention used for function names? const somefunc = function(){return "YAS";}

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