| Day #1 | Day #2 | Day #3 | Day #4 | Day #5 | Day #6 | Day #7 |
| CodePen | Gist: GearUp | Gist: Professional Development |
1. Install Sublime Text Editor * [Y ]/ N
- Install Chrome Canary
- [Y] / N
- Install Xcode
- [Y] / N
* [Y] / N
1.On a Website, what is the purpose of HTML code?
- HTML describes the structure of a webpage
- What is the difference between an element and a tag?
- HTML uses elements to describe the structure of a page, elements generally consist of an opening and closing tag.
- Tags act like containers. They give you an indication of what is going on between 2 tags.
- The terms can generally be used interchangeably
- Why do we use attributes in HTML elements?
- They provide additional info about the contents of an element. Attributes contain a (name), (=), and ("(value)").
- Describe the purpose of the head, title, body, HTML elements.
- Head: contains information about the site rather than content on the site.
- Title: will show the page title on either the title bar or tab of your browser.
- Body: everything in the body is shown on the web browser's window.
- HTML: lables the document as HTML (Hyper Text Mark-up Language) file.
- In your browser (Chrome), how do you view the source of a website?
- Right-click any where on the page and click the link for "view page source" or ("ctrl" + "u").
- List five 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.
- <'address'>: contains contact details for the author of the page, like email or physical address
- <'ins'><'del'>: these elements are useful for editing, notating whether something should be inserted or deleted
- <'abbr'>: allows you to add a floating title for an abbreviated word or acronym
- <'blockquote'>: if you need to seperate a long quote from the rest of the paragraph, this element will indent the text
- <'strong'>: indicates the contents have a strong importance/emphasis and will bold the text
- What are empty elements?
- Empty elements are tags that are self-closing and do not need a second closing tag.
- What is semantic markup?
- Semantic markup does not effect the structure of an HTML doc, but rather provides additional information.
- What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
- <'nav'>: Navigation tag that allows the grouping of important links for navigation of your site.
- <'hgroup'>: Allows for two or more h1-h6 tags be grouped together as one heading.
- <'section'>: Normally accomanied by a title (<'section class=" . "'>), helps in grouping content together that would not otherwise have a div element.
- Basic HTML Structure
- [Y] / N
- At least 2 levels of headings
- [Y] / N
- Multiple paragraphs
- [Y] / N
- Paragraph should be about what drives you to learn web development
- [Y] / N
* ([Y] / N)
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- Ordered <'ol'>: numbered list where the order matters
- Unordered <'ul'>: list that uses bullet points rather than numbers
- Definition <'dl'>: set of terms <'dt'>, with a definition <'dd'> that follows
- What is the basic structure of an element used to link to another website?
- <'a href="example.com"'>Txt to Display<'/a'>
- What attribute should you include in a link to open a new tab when the link is clicked?
- <'a href="example.com" target="blank"'>
- How do you link to a specific part of the same page?
- In order to link to an area on the same page you must first I.D. (id="") the area in which you want to link to. Then you can link to that I.D. <'a href="#_example">
- What is the purpose of CSS?
- CSS allows you to create "rules" that specify how the content of an element should appear. Allowing you to change the appearance and style of the element without bloating the HTML doc.
- What does CSS stand for? What does cascading mean in this case?
- Cascading Style Sheet. Cascade: means you can create simple style sheets with generic rules.
- What is the basic structure of a CSS rule?
- selector { property: value; } ({property: value;} is the declaration)
- How do you link a CSS stylesheet to your HTML document?
- <'link href="css/example.css" type="text/css" rel="stylesheet"'> and must be located in the <'head'> of the HTML doc.
- When is it useful to use external stylesheets as opposed to using interal CSS?
- Generally you would want to create an external sheet, because you can use the same the sheet for multiple pages. If you are editing only a few things on one page, you could use internal styling.
- Describe what a color hex code is.
- Color code that starts with "#" followed by 6 digits. The code depicts how much red, green, and blue is in a color.
- What are the three parts of an HSL color property?
- Hue: essentially the color wheel. Normally represented by a wheel or slider bar with colors ranging from 0-360
- Saturation: the amount of gray present in a color. 100% = full color 0% = full gray.
- Lightness: the amount of white or black present in the color. 100% = black, 0% = white, and 50% = normal color.
- In the world of typeface, what are the three main categories of fonts? What are the differences between them?
- Serif: this typeface has extra little details on the ends of the characters.
- Sans-Serif: have straight ends, which allows for a cleaner design.
- Monospace: every letter has the same width, vs other typefaces have different widths
- When specifiying font-size, what are the main three units used?
- Pixels: commonly used by designers due to how precise the measurement is.
- Percentage: If the default is 16px, then the % will change it in relation. % rules can be combined with other rules and will compound.
- EMS: an em is equivalent to the width of the letter m
1. Two lists: ordered and unordered. * ([Y] / N)
- A link to your GitHub account.
- ([Y] / N)
- A link to the Turing website.
- ([Y] / N)
- Add a color to the text of all of your headings (using hex codes).
- ([Y] / N)
- For your h1 heading, add a background color.
- ([Y] / N)
- Make your headings a serif font, and make the paragraph text a sans-serif font.
- ([Y] / N)
- Change a snipet of paragraph text to be italic using the font-style property (do not use the in this case).
- ([Y] / N)
- If you're using an input element in a form, what attribute controls the behavior of that input?
- "Type" attribute (type="text") will determine what kind of input it is, from a text to a radio button "type".
- What element is used to create a dropdown list?
- <"select name=" ""> is for the dropdown itself, but you also need <"option"> tag for the options in the drop down list.
- If you're using an input element to send form data to a server, what should the type attribute be set to?
- <"type="submit" name=" "">, if you do not use the name attribute it will default to "submit".
- What element is used to group similar form items together?
- <"fieldset"> followed by your input type, ending in a closing tag <"/fieldset">.
- Describe the differences between border, margin, and padding.
- Border: The border separates the edge of one box from another. And every box has a border, even if it is not visible.
- Margin: The margin lies just outside the border. Helpful in creating space between different items.
- Padding: Padding is the space within the border and between the content. Increasing the padding will shrink the content inward.
- For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to??
- The values appear in a clockwise fashion: top, right, bottom, left. Top= 1px, Right= 2px, Bottom= 5px, Left= 10px
- Describe the different between block-level and inline elements
- Block-Level: Elements that are block level reside on their own line and cannot have other elements on the same line. Ex: <'div"> and <"p">
- Inline: Elements that can flow between other elements. Ex: <"span">, <"i">, <"b">
- Using "display: inline;" or "display: block;" in your CSS sheet will change how the element is displayed.
- What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
- Fixed Positioning: it positions the element relative to the browser window, locking it in place even while scrolling.
- Z-Index: allows you to essentially layer the elements. A Z-index with a higher value will overlap one with a lower value.
- What is the difference between a fixed and liquid layout?
- Fixed Layout: Does not change the webpage with the size of the device. Which allows the designer to have more control over size and positioning.
- Liquid Layout: Adjusts based on the screen size and whether the user is using larger/smaller fonts. Allows the page to expand or shrink to fill the most optimal amount of space.
1. Text boxes for each artist (three artists total). * ([Y] / N)
- Labels for each text box.
- ([Y] / N)
- Dropdowns for the genre of each artist.
- ([Y] / N)
- Submit button.
- ([Y] / N)
- Add a border and background color to your headings. Pay attention to the contrast between the text and background colors.
- ([Y] / N)
- Divide your paragraph text into two vertical columns.
- ([Y] / N)
1. Complete the tasks in this Professional Development assignment.
- ( [Y] / N )
- In an image element, why is the alt attribute important?
- If you can't see the image, whether because it did not load properly or not, it decribes the image.
- What determines if an image element is inline or block?
- It depends on what follows or preceeds the <"img"> tag. If it is a block element, then the block will be on a new line. Otherwise it will flow around the img element.
- What are the benefits of jpg or png image file formats?
- By using one of those 3 formats, the page will load quicker if at all compared to other format types.
- What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML
- Sizing them in CSS allows you to more consistantly control the size of the images on the page. Controlling the size helps the page know how much room to leave for the images, since they tend to load slower than the page.
- What is an image sprite, and why is it useful?
- A Sprite is used when a single image is used for several different parts of an interface
- Rather that having several images load at once, the logos and interface elements can be applied to the single Sprite. Increasing load times for the page.
1. Add a couple relevant images to your paragraph text. * ([Y] / N)
* ([Y] / N)
- There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
- Numbers: numeric values, plain and simple. Can be used to perform arithmetic
- Strings: represent lines of text. Must be enclosed in " or ' quotes otherwise JS will think it is a variable.
- Booleans: true or false (yes or no). Useful for many logic problems in JS
- What are the three logical operators that JavaScript supports?
- And: The && operator represents logical and.
- Or: The || operator denotes logical or.
- Not: Not is written as an exclamation mark (!).
- What is the naming convention used for variables?
- Variables are case-sensitive, cannot start with a number, must start with a letter, $, or _
- also called a binding
- What is the difference between an expression and a statement?
- Expression: sentence fragment. A value that is written literally like (7 or "Denver")
- Statement: full sentence. Effects the "world" or makes an impactful change.
- What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
- class, const, continue, debugger, delete, else, export, for
- Important Because: they are keywords that are used throughout JS that have a designated function or command already established.
- What is control flow, and why is it useful for programming?
- control flow allows the program to read the instructions like a story. It's useful because it's like a choose your own adventure story where you can take different branches and return to a point.
- 25
- (Y)
- "this is my string" (notice the output's color difference between a number and a string)
- red
- var myNewString = "Hello Turing!";
- undefined
- myNewString Before you hit Enter, what do you expect to see in the console?
- Hello Turing
- var myNum = 9;
- 9
- myNum Before you hit Enter, what do you expect to see in the console?
- 9
- var anotherString = "How are You?"
- How are you
- "Connect" + " " + "these" + " " + "strings." What happened? This is called string concatenation. Notice the strings with spaces.
- Connect these strings. is displayed to the console. The " " adds spaces.
- myNewString + anotherString This is also string concatenation using variables.
- Hello Turing!How are You
- 5 > 3 returns a boolean value of true. How could you change this expression to return false?
- 5 < 3
- "2" === 2 and "2" == 2 Why does one of those expressions return true and one return false?
- Because there must 3 "=" in JS
- if (8 < 9) {console.log("Hey!")}
- Hey!
- Before you enter this code in the console, what do you think will happen? Will it log to the console?
- Hey!
- Write an if/else statement where the code in the else block is executed. For example: if (3 < 1){console.log("if block")} else {console.log("else block")}
- if (7 !== 7){console.log("if block")} else {console.log("else block")}
- If we have a function defined as function sayHello(){console.log("Hello!")}, what is the difference between entering sayHello and sayHello() in the console?
- sayHello: returns undefined
- sayHello(): returns Hello! because it passes the paremeter to the function.
- What is the keyword return used for?
- Return determines the value a function returns. Which is useful in reusing that value.
- What are function parameters?
- Parameters to a function behave like regular bindings, but their initial values are given by the caller of the function, not the code in the function itself.
- What is the naming convention used for function names?
- keyword "function" + "expression" + "(parameter)" + "{body}"
const square = function(x) { return x * x; };
* ( [Y] / N )
* ( [Y] / N )
* ( [Y] / N )
* ( [Y] / N )
(1) UX Crash Course: 31 Fundamentals. Read the first three, short posts. Choose one question from each of the 5 sections, and find one site that is good at supporting that question, and find another site that violates that question.
- Psychology: How much work does the user have to do to get what they want?
- Good: <a href:"https://www.spotify.com/us/">Spotify
Spotify, not the BEST example, but they still do a great job of giving the user what they want.
- Violates: <a href:"http://thehipperelement.com/post/72080847673/daily-ux-crash-course-3-of-31">The Hipper Element
This site here is very hard to navigate and some of the buttons do not even work!
- Usability: Are you being clear and direct, or is this a little too clever?
- Good: <a href:"facebook.com">Facebook
Clear and to the point. You login and can post or view for hours on end
- Violates: <a href:"https://braincharm.com/">Brain Charm
No clear direction for this site other than clickbait news. Found through AOL link.
- Design: Do clickable things look different than non-clickable things?
- Good: <a href:"https://typing.io/lessons">Typing Lessons
The mouse changes based on whatever is clickable, and nice and neat.
- Violates: <a href:"http://www.nicolawalbeck.com/#">Nicola Walbeck
Just a giant grid, the mouse doesn't eve change letting you know to click for link
- Copywriting: Does it reduce anxiety?
- Good: <a href:"https://meh.com/">Meh
There is only one item for sale per day, therefor you take it or you don't. Not anxiety inducing
- Violates: <a href:"https://www.wish.com/feed/tabbed_feed_latest">Wish
So many endless items to choose from, all having deals, many emphasizing immediate purchase
- Analysis: Do you know why users do that, or are you interpreting their behaviour?
- Good: <a href:"youtube.com">Youtube
YouTube, Google in general, has an amazing algorithm that keeps users coming back for more
- Violates: <a href:"http://arngren.net/">Arngren
Where to start with this one! There is no way this site takes in user data