Mod 0 Capstone Codepen link
- HTML describes the structure of the website. It tells the website to display text in a certain way, wether that means display some text as a heading, or as a paragraph, or subheading.
- Elements and tags are used similarly, but technically elements are made up of the opening and closing tags, and the content between them while Tags tell the browser where those elements begin, and where they end.
- Attributes give more information about the element. They are predefined, or follow an accepted format, and tell the browser how to understand the content of the element.
- The head element defines where information about the page will appear. Titles ususally appear in the head, and are displayed on the top of the browser, or on the tab. Body elements are in the main browser window, and this is where your headings, paragraphs, or subheadings will go.
- Right Click, then click "View Source"
6. 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.
<h1></h1>is the largest of headings, and there are many different sizes. It seems like as the number goes up, the text size goes down - so<h2></h2>would be the next smallest.<b></b>makes text within this element appear as bold.<i></i>makes text appear as italic<sup></sup>turns text into superscript, while<sub></sub>is subscript.
- Empty elements usually have just one tag and no closing tag, such as horizontal rule
<hr />or line break<br />.
- Semantic Markup adds more information without altering the structure of the page. It allows you to place emphasis on a portion of the text, add quotes and attribute them to whomever said it, etc.
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>, <nav>, and <footer>
1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
- Ordered lists have numbers, such as directions or steps for a recipe. Unordered lists have bullet points. Definition lists have a set of terms and the corresponding definitons
<a> href="https://typing.io/"> Typing.io</a>
target="_blank
- First you have to identify different points on the page with a value (
#top) that the link will deliver the user to. Then in your href= portion of the link you can type # followed by the value.<a href="#top>Go to Top</a>
Read Chapters 10, 11, and 12 on What is CSS, Color, and Text from HTML and CSS: Design and Build Websites
- Programmers use CSS to dictate how the content should appear on the webpage
- Cascading Style Sheets. Cascading refers to the way the styles can "fall" from one page to another.
- CSS associates styles with html elements by using a selector and applying properties and values to it. In HTML, you might give a paragraph a class, like
<p class= "biography">and then in CSS you can styles to all paragaphs with the same class by using the selectorp.biography
<link href="css/styles.css" type="text/css" rel="stylesheet" />
- It makes more sense to use external style sheets when your website has more than one page. This is for seveal reasons.
- Allows all pages to use the same stying instead of repeating
- seperates content from style
- easily change styles across multiple pages by editing only one file.
- Color Hex codes are 6 digit codes representing RGB values, preceded by a hash
#.
- Hue, Saturation, Lightness
8. In the world of typeface, what are the three main categories of fonts? What are the differences between them?
- Serif, Sans-serif, monospace. Serif fonts have serifs at the ends of their strokes. Sans-serif do not. Monospace letters are fixed width, so that each character occupies the same amount of space.
- Pixels, Percentages, and Em's
- The value of the type attribute controls the behavior of that input.
<select>
3. If you're using an input element to send form data to a server, what should the type attribute be set to?
type="submit"
<fieldset>
- Each border separates each box from the rest. Margins exist outside the edge of a border. Padding is the space between the content of a box, and the border.
2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
- Clockwise order. In this example, 1px is the top, 2px is right, 5px is bottom, 10px is left.
- Block-level elements sit on their own line, while inline elements do not create a new line. Inline elements are within the content of the box.
4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
- Fixed positioning allows you to keep elements in one place, even as the user moves around the content. Using the z-index allows you to set rules for "depth", making sure the elements you want on top stay there.
- Fixed layouts stay the same size and ignore the resizing of the browser window by the user. Liquid layouts stretch and contract to maintain certain percentenges set by the programmer.
- The alt attribute describes an image if you are unable to see it. I assume this is useful for screen readers.
- If the image is inside a block element, then text will flow around the image inline style. Images placed before or after paragraphs will be block, creating their own line.
- JPEG's are better for colorful images, PNG's are better for images with fewer colors or large areas filled with a single color.
1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
- It helps pages load more smoothly, because it communicates to the browser how much space to save for the image as it loads the html/css first.
- A sprite is an image that is used multiple times in different parts of the interface. It allows the brower to just load one image, rather than many, resulting in a faster loading web page. This is useful for logos, as they will most likely appear many times within the website.
Read Chapter 2 (Statements, Variables, Data Types, & Arrays) from JavaScript & jQuery: Interactive Front-End Web Development
1. How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript?
- Create a Variable, using
varand give it a name, and then you assign a value to the variable. The equals sign is whats called an "assignment operator", and it tells the code to assign a value to the variable.
2. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
- Numbers are used in tasks that involve counting or calculating. Strings are used for text and other characters. Boolean Data has two values: true or false. This could be thought of as being "on" or "off".
3. What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?
-
- Variable name cannot start with a number. You can start it with a letter,
$, or_. - The name can contain letters,
$, or_. Must not use a-or a.in a variable name. - Cannot use keywords or reserved words. Keywords are things like
varand reserved words will be used in future versions of JS. - Variables are case sensitive so it becomes bad practice to have two variables with different cases.
- Variable names should describe the kind of information being stored.
- When using multi-word variable names, use camelCase, or an underscore (not a dash) in between words.
- Variable name cannot start with a number. You can start it with a letter,
4. How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?
- Arrays are particularly helpful for when you don't know how many different items your list will encompass, because you don't need to specify the number of items when creating an array.Values in an array are accessed in order, beginning with 0 (not 1). To access/change a value within an array, you just have to select it and assign it a new value with
=and giving it a new value.
- An expression evaluates into a single value. There are two types of expressions: 1) Expressions that assign a value to a variable, and 2) Expressions that use two or more values to return a single value. This would be like doing an equation to create a new variable. Statements on the other hand, are individual instructions or steps within a script, and they end with a semicolon.
- Operators are things that expressions rely on. Operators allow us to create a single value from one or more values. They are used to combine strings, perform equations, or compare two values. The three types are assignment operators (assign a value to a variable), arithmetic operators (perform basic math), string operators (combine strings).
Read part of Chapter 3 (Functions & Scope), pages 85-99, from JavaScript & jQuery: Interactive Front-End Web Development
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?
sayHelloprints the function definition, whilesayHello()invokes the function.
- The parameters are the names of the information needed to call the function. Arguments are specific instances of that information. Parameters would be something like
(height, width). Arguments would be the data that stands in that place(3, 5)
- Used to exit from a method, with or without values.
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 created inside of a function using the var keyword. Local variables cannot be accessd outside of the function in which it was declared. Global variables can be used anywhere within the script.
- Support: theguardian.com is a good example of thinking of the user's interests. Other news sites put their news behind a hard or soft paywall, locking access to current events behind money. The Guardian specifically asks you to donate, but notes that access to news should not be dictated by what you can afford, so they do not use paywalls.
- Violate: Lots of social media apps/sites reward the behavior of consistent engagement through social pressure, even though we know social media to be addictive and toxic especially for developing minds. For example, Instagram DM's default to marking the messages between you and the person who you are messaging with as read, so you know and they know when messages have been read. Since leaving them without a response is considered rude when they know you've seen it, users will respond more when this feature is implemented. Others, like snapchat, create visual representations of consistent engagement with "streaks" for not missing a day of sending a message and these streaks change and evolve the longer you maintain them, leading users to want to see what the next change will be. My students would send pictures of inconsequential things (their ceiling, the floor). I think this is a prim example of a company thinking of their interest before the users.
- Support: Github makes it very easy to find the "delete account" button. It takes minimal hunting on the part of the user, being located under settings > account > delete account.
- Violate: Amazon, on the otherhand, famously makes this incredibly difficult, hiding it in obscure page, after obscure page, ending only with the option to delete the account by chatting with an amazon agent. The hope is obviously that the user will give up before they get to that step, but also that the agent then gets a chance to talk you out of it.
- Support: OfferUp looks modern, clean, and friendly, making it seem more secure and trustworthy than it's largest competitor.
- Violate: Craigslist has a notoriously sketchy looking website. It has a decent reputation, but that's definitely not because of it's design. The first time I used it, I could barely find my way around the website, and encountered a few scams. I had a hard time trusting the website because of it's bare-bones looks.
- Support: Pitchfork.com motivates users to complete their goal by listing their offerings right at the top, secondary only to the logo. They list "The Latest" "Reviews" "Best New Music" "Features" etc, so that the user can get right to where they want to go.
- Violate: Myspace still describes themselves as "A Place for Friends" but when you go to their homepage, they make it difficult to find friends, instead, they stuff the front page with autoplaying news videos, music headlines, etc. This makes it difficult to read, and difficult to discern where to go to find your friends.
- Support: Google has used data to it's advantage when updating the home page over the years. Previously it features tons of links and way too many exclamation marks, but now it's modern design is empty, save for the feature that everyone goes to google to use: the search bar. Even the search bar has seen many updates, such as incorporting it into the URL bar so that users can search from whatever website they are currently on, or adding functions to help narrow down results, or doing simple math.
- Violate: wokanodenver.com doesn't seem to have made any changes to their website based on user interactions in a long time. For example, it's mobile site is the same as the desktop site, so it has tiny fonts, unclickable phone numbers, and way too much empty space. If they were to analyze the numeber of mobile users, they might find they could gain more sales by updating their site for modern mobile users.