HTML code informs about the structure and presentation of a webpage. Without it, a computer would not know how to display text in any nuanced way.
The tag refers to the brackets and what lives in them (is this a header?, a paragraph?, etc) whereas an element includes the opening/closing tags as well as the content/info the tags contain.
Attributes supply additional info about the content of an element. We use them to further label elements so that code can be applied to all elements with a particular attribute.
The head element contains code about the page, rather than code that will change what is on the page. A title element should be added within the head element- the title element will create the text that appears on the page's tab in a user's browser. The body element contains all the code that will influence what shows up on the webpage itself in a user's browser.
Click with 2 fingers (Mac's 'right click') and choose 'view page source' from the drop down.
- < h1 > through < h6 > - these are different sizes of headings used to create titles, heading, sub-categories etc.
- < p > element is used to contain a block of text that will appear as a paragraph. /there will be a line break between multiple < p > elements.
- Words within the < b > element will appear bold.
- Words within the < i > element will appear italicized.
- < sub > and < sup > contain characters that should be read as subscript or super script. Subscript exapmple would be H2O Superscript example would be the 4th of July.
- < br / > is the manual addition of a line break in text. < hr / > breaks the line of text and ads a horizontal line indicating the break.
- < strong > appears as bold text, but implies more about how it should be read. 8.< em > appears as italicized but implies more about how it should be read.
- < blockquote > separates out and indents a long quote. a < p > element can be within this. < q > is for a shorter quote read in the line of the text. < q > live within a < p >.
- < abbr > surrounds an abbreviation or acronym and can be given a title with the full name.
- < cite > should surround the title of a piece of work being referenced.
- < dfn > surrounds the 'defining instance' (the first time the word is used) of a new term that is perhaps being defined and will be referenced throughout the page.
- < address > contains the info for the author of the page
- < ins > shows text that has been added, appearing as underlined, while < del > shows text that has been removed, appearing
struck out. The < s > element indicates something that is no longer accurate, but should still be displayed, appearing with a lineright through the middle.
These are elements that are self contained and do not need an opening/closing tag. They only need one tag. < br / > is an example of this- the function executes with just the one tag.
These markups don't change the layout or the structure of a page as much as add extra information. Semantic markups describe the content within them and may change how they are read.
- < header > and < footer > elements often contain links or information to be displayed at the top or bottom of a webpage. This info will be passed over by a screen reader as it is structural, not informative content.
- < nav > contains the main navigation framework for the website, like links to 'home', 'about', 'privacy policy', etc.
- < article > contains text that could be a stand-alone article. For instance, info from different sources or concerning differnt subject matter should be placed in seperate article elements.
- < aside > if inside an article element, it contains information related to the article, but not essential to understanding it. Outside of an article, it is a container for info that relates to the whole webpage, like links or a search bar.
- < section > element groups related content together that would generally have its own heading. Several articles may be contained. This can also be used to split a long article into several sections.
- < hgroup > heading groups combine different heading elements of varying sizes into one heading. Think like a Large main heading, then a smaller sub-title.
- < figure > contains content that is referenced from the main content of the article, like images, graphs or videos. < figcaption > should be added to provide a description of the figure.
- < div > not new with HTML5, but should be used to group things together in ways where the above elements do not apply. Can also wrap a whole page together, unlike the previous elements.
Couple notes- I made this kind of silly and a bit obnoxious, with the knowledge this isn't what I am sharing with my whole cohort. I think I got everything in there though, but let me know if I missed something, or should continue playing with this. I struggled a bit with the columns and making the formatting work surrounding that... I am sure there is something I am missing, but for now, I added a ton of line breaks. I think it was an issue with the space to the right of my columns which I floated left. For whatever reason, this kept messing with the box of the header below it, expanding it into the text above.
[https://codepen.io/Francepack/pen/aQdPJG] Prework website about favorite band.
There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
Ordered lists < ol > are numbered, unordered lists < ul > begin with bullet points, and definition lists < dl > are made up of terms with their definition.
Use the < a > element and use the href element to set the link as follows < a href="http://desiredweblink.com" > Click this text to go to link < /a >
Use the target attribute after the href attribute. Basically, include target= "_blank" which totally means something. And if you put it in the opening a tag, a new window will open when you click on the link!
You start by identifying the places in the page you may want to be able to jump to, and give the headers or sections id attributes. Then use a standard < a > element, but for the href attribute, include a # so it looks like href="#partofpageid" You can link to a specific part of a different page with href="http://differentpage.com/ #partofpageid"
To stylize your webpage by applying rules for how particular elements appear
Cascading style sheet. Cascading refers to the priority scheme used to make stylistic aspects apply to some elements but not others. More specific selectors will take precedence.
There is a selector that refers to the element you wish to stylize, and a declaration that is the style to be implemented. The declarations sit inside curly brackets and each declaration is separated by a semicolon
In the head section of your html file, include a link to the css stylesheet. The link element is an empty element and has three attributes- href (often a link to a folder called css or styles), type (specify the type of document this links to. Value is text/css for CSS files), and rel (should be "stylesheet" when linking css)
If your building a site with more than one page, you should have an external css so it can apply to all pages rather than creating a < style > element in the head of each idividual page. This also helps to not bury the html code under a bunch of css, making things more readable. It is also easier to modify one file rather than making adjustments to every page.
It is a 6 digit number that represents how much red, green, and blue is present in the color being used.
Hue- The color itself; Saturation- amount of gray; Lightness- amount of white/black
In the world of typeface, what are the three main categories of fonts? What are the differences between them?
Serif- include details on the ends of letters; Sans-serif- straight ends to letters; Monospace- fixed character width. Serif is often used for long passages for readability- the letters flow together. Sans-serif is useful for small print or low-res as each character is distinct. Monospace isuseful for code since characters align neatly.
Pixels- 16 is standard default text size; Percentages- what percentage of standard 16px; EMS- a unit referencing the length of the letter m. Allows to relate text size of an element to its parent. Or something
Not 100% sure I'm reading this correctly, but I think we are talking about the method attribute. There are 2 methods, get and post. With get, the values from the form are added to the end of the URL specified in the action attribute. With post, the values are sent in what are known as HTTP headers. Post is better for uploading files, longer input, or input that will be added or removed from a database. But maybe this is asking about the input type, like whether they type of input desired is text, a password, a button etc.
The < select > element
If you're using an input element to send form data to a server, what should the type attribute be set to?
type = submit
The "fieldset" element can group togther a few forms and you can name this group of forms using < legend >
Every box has a border- this is the edge that separates boxes from one another. The margin is the space between one box and another, and padding is space between the border and what is contained within the box.
For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
Clockwise from the top- first value top, second to the right, third below, fourth to the left.
Block-level elements are like their own container- they are blocked and seperate from one another. They start on a new line. Inline elements exist within a line of text.
What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
Fixed positioning keeps a box on the screen in a fixed position, even if you scroll. A z-index is important, because as you scroll and other boxes come up, if their element is later in the html code, they will default on top of the fixed position element. The z-index is a way to control which elements will show on top of other elements.
Fixed layouts will not change size even if the window changes size. The measurments for elements are fixed. In a liquid layout, the measurments of the elements change depending on the size of the browser window.
It is important to describe what the image is supposed to be if it is not viewable due to being a broken link, or if the user is unable to see it for any other reasons, for instance if they are blind.
Where you place an image in your code will determine whether it is inline or block. If an image is placed within a block element, it will be inline and the surrounding text will flow around it.
JPG image formats should be used when an image has a lot of color and subtle contrast differences. Gif and png are good for images that use just a couple of colors without as many different shades of the same color. These files have the correct resolution for use on the web- higher resolution will not be utilized and will just cause an increased file size/load time.
What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
If you do it in CSS, you can keep consistency of image size throughout a site. You can set a couple of different sizes in CSS and use them as a class to utilize easily. Doing this is CSS also allows for the browser to set asidet the correct amount of space for an image when it is first loading.
It is when a single image is used for several different interface elements. Since the web browser only needs to request for one image rather than many, this helps load time.
There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
Numbers- These are numeric values. A computer calls upon them using a fixed number of bits. These days computers have 64 bits. When you type in a number, it signifys for that number to be produced by bits in the computer's memory. Strings- A string is text put between quotes. The unicode system is the standard used to assign text characters numerical values, so a computer can understand strings as a series of numbers/bits. Booleans- This distinguishes between only 2 possible values. This will be true or false. Kind of like an on or off switch, one example the text uses.
'And' && - this will only be true if both given values are true; 'Or' || if one of two values given is true, the computer will say it is true; 'Not' ! This flips the given value (!false is true)
Binding- you can bind a variable to a value. You do this with a let statement. let twenty = 20 . console.log(twenty - 10) would produce 10. Variables should begin with a text character (as opposed to an integer) and javaScript keywords cannot be used.
An expression is any fragment of code that produces a value. This is kind of like a sentence fragment. A statement, using the sentence metaphor, would be a full sentence. At it's most basic, a statement is a couple of expressions separated by a semicolon.
What are a few JavaScript reserved words, and why are they important to avoid using them for variable names?
I could copy paste the list provided (in case I want to come back to this)! Reserved words- break, case, catch, class, const, continue, debugger, default, delete, do, else, enum, export, extends, false, finally, for, function, if, implements, import, interface, in, instanceof, let, new, package, private, protected, public, return, static, super, switch, this, throw, true, try, typeof, var, void, while, with, yield. It is important to avoid these since they have a special meaning to JavaScript... it wouldn't make sense to give these words a value when you may need their functionality later in your program. If you try to set them as a variable, JavaScript will call you out with an error.
Control flow is the order in which statements are executed by JavaScript. It is useful because complex programs will need to execute multiple statements in a certain order to work properly. Like, first you'd want the computer to know your variable, setting the environment, then you generally want the computer to do something with those variables in a certain order. It is particularly useful for when programs have multiple path ways, or loop back on itself, known as control structures
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() will produce : Hello! while just typing say Hello will produce 'undefined'
This statement determines the value a function returns. The control jumps out of the function, and specifies a value.
By default, functions are self-contained. It can only access variables and functions inside its scope. The parameters are the variables listed as part of the function definition
A good function name will help someone reading the code understand what it does. Trying to be clever about it can be a distraction The common convention is called camelCase, where all the words are put together (avoiding the need of underscores) but each word after the first is capitalized.
Read the first three, short posts: What is UX?, User Goals & Business Goals, and The 5 Main Ingredients of UX.
I know this part isn't really a question, but quick summaries for my own benifit- UX is the process of user experience design. Good UX makes a user efficient. It should be more about that than about making a user happy all the time. A UX designer will want to have to understand a users goals for using the website, and the business's goals of having the website, and make those goals align. The business should benefit when the user achieves their goals. Understanding the user's psychology and what they want is key to a good design. Excellent usability will help users use it. A good design is important to represent the brand, and give users confidence using the site. Clear copywriting (text) will help a user by telling them how to use the site. Good analysis will tell you about users behavior and how to make improvements.
After you're done reading the third post, read through the each section of questions again: Psychology, Usability, Design, Copywriting, and Analysis. Choose one question from each of these sections (so 5 total questions), and find one site that is good at supporting that question, and find another site that violates that question.
Are you thinking of the user’s wants and needs, or your own? How much work does the user have to do to get what they want? I recently had to get some quotes for body work to my subaru, and in shopping around, I was impressed that one place offered to put you together a quote based on the submission of images... I feel like this puts the users wants first rather than needing to schedule an appointment which would inevitably include a sell or pressure. This struck me as understanding the users wants, making it very easy to get a quote and potentially boosting the work-flow they get by making a quote easy to obtain. website- [https://denverautobodyrepair.net/get-an-estimate] less streamlined quote- [https://www.accurate-autobody.com/schedule-estimate-emailform/] The second website isn't terrible or anything, just requires more info and an in-person appointment. I think the first company understands what is desired out of an estimate a bit better. I suppose this could also go in the usability category, but I think it shows understanding of what a user wants.
Are you working with the user’s assumptions, or against them? Have you provided everything the user needs to know? I can't help but think of amazon.com when I think of usability. Searchbar right at the top without frills, but the option to choose categories if desired. Also the control panel right at the top for quick, intuitive access to your account info. gold standard [https://www.amazon.com/] Looking around at comperable websites to shop online, I found H&M had a kind of clunky site- I didn't immediately find the search bar and the drop down boxes are cumbersome on the screen (not to mention the bleh design). Less user friendly [https://www2.hm.com/en_ca/customer-service/shopping-at-hm/online-shopping.html]
Do users think it looks good? Do they trust it immediately? Every now and then, we'd order flowers for an employee to express sympathy when loved ones passed. We have many employees, so this happened with some regularity in my 4 years there. I found the design was particularly important to build the trust of the company... like if your website doesn't look great, are your flowers gonna look great? Kind of silly, but I do think that's how folks will make that snapshot judgment many times. Then again, on the flip side, perhaps a more basic website structure informs the viewer that they are more 'local' or don't need to overcompensate for their arrangments... regardless, I think the good looking websitres probably grab peoples attention best. slick looking site [https://www.proflowers.com/colorado/denver/local-delivery] less so [https://bouquets.org/]
Does it inform the user or does it assume that they already know what its about? Does it reduce anxiety? I thought it'd be humorous get a bit meta with this one... I was looking at websites about copywriting and found some to be better at practicing what they preach than others. Here is one I found was simple and effective- they even make a pitch for the user to sign up for something, so they clearly took care to grab attention and make their purpose very clear... no mistaking what kind of information they have and communicate the importance of copywriting quickly and effectively copy writing that grabs my attention [https://www.copyblogger.com/copywriting-101/] while this website has more information overall, I look at the main page, mostly see ads, and don't really gather the full scope of the purpose of the article from its headings. My anxiety was not reduced, and I feel they assume their audience a bit more. [https://www.entrepreneur.com/article/200220]
Are you looking for subjective opinions or objective facts? And I thought I'd suck up with this last one. Hah. In all honesty, though, when considering analysis, I immediatly think of the research I did in choosing a school to help me with a career transition. Something appealing about Turing was their honesty about the success and that they are forward with all the information they gather. In short, it makes the user feel they are working with an entity without anything to hide. Analytics-oriented [https://www.turing.io/] Why isn't there data analysis on the front page, other than like meaningless stats like the # of grads and campuses? [https://www.galvanize.com/denver-platte]