- The purpose of HTML code is to give a website its "skeleton" of contents and the basic styling and hierarchy of those contents. We use HTML as the bare foundation of a website and then use other languages (such as CSS) to further control and style the look and functionality of what would otherwise be a static HTML page.
- Technically and element comprises opening and closing tags and all the content that lies between them.
- We use attributes to provide additional information about an element. They can further be used to organize, increase the accessibility of, and even modify specific elements in an HTML document.
- The head element often appears before the body element. It contains information about the page and is NOT shown in the main part of the browser window while the title element also doesn't show in the main window of the browser it does show in the top of the browser above the URL or on the tab for that page (if multiple are open).
- You can either click on the extended menu (the three vertical dots in the upper right hand corner) hover over More Tools and then select Developer Tools or on a MAC you can press Option + Command + I or Command + Shift + C.
- A few examples include:
<h1></h1>Is the main heading element and there can be up to six different levels of headings in html.<b></b>Makes anything within bold.<i></i>Makes anything within italicized.<q></q>Is a quote element used to for shorter quotes that sit inside a paragraph.<dfn></dfn>Is a definition element used to define the meaning of a new term when it is first introduced.
- empty elements are those rare elements that do not have any words between the opening and closing tags and often only have one tag. One example is the
<hr />element which is used to create a break between themes in the browser window. - Semantic markup are those elements that are used to provide extra information; such as where emphasis is placed in a sentence, to indicate something is a quotation, to bold specific content, explain the meanings of acronyms and so on. i.e. the
<b></b>element to make certain words bold. - The
<header>element,<nav>element, and<article>element are all introduced in HTML 5.
- Empathy has helped me meet a wide variety of people and make more solid human connections. It has helped me choose a career that will allow me more emotional space and reserve for empathy as opposed to one that required a numbing of emotional connection.
- Software while implemented on machines in the end is for people. It is meant to fulfill a need and help other human beings manage and maintain certain goals and objectives. Therefore, the best software is designed with the overall experience and situations of the users in mind. The best software no only looks good and providers powerful applications; it also understands that each user is unique and has intuitive controls, and inclusive content and execution. users want to feel that an application/software was developed specifically with them in mind, and this requires empathy.
- I learned at my old job that teammates MUST have empathy to work together. My team of 10 had people with vary different experiences and some of them were going through very rough times both financially as well as emotionally with marriages that fell apart and some were severely pained by chronic illnesses. Those of us that empathized and understood always try to help where and when we could and our teams appreciated this and when they were able, put forth their best effort and really stepped up to help us out. Those without empathy often found themselves isolated and wondering why no one was offering them help or suggestions, sometimes they even ended up quitting. One of the many reasons why empathy is CRITICAL for working on a team.
- One of my coworkers once experienced disrespect from one of our managers. At the time the manager only had a few months left before she was set to retire. My coworker who is black was very upset when he heard the comment she had made about him and was very angry about the situation and went the HR director for the company. At first I told him it was no big deal and that it didn't matter since the manager was leaving in a few months but he told me how he had been dealing with such comments all his life and always more often than his white colleagues. Once he explained his position and I was better able to empathize with him, he and I were better able to work the situation out and I think in the end he just wanted someone to recognize that what he felt was valid and not over-the-top which most people wouldn't have understood without empathy.
- I found it difficult in my past job to have empathy when I was inundated with pain and suffering and when I sometimes found that such pain was faked and used to manipulate me or my colleagues. I found it hard to care when patient after patient seemed to have the same mysterious pain and yet they often wanted the same easy remedy. I think I would benefit by assessing each situation individually and carefully and taking time out for myself to reconnect and realize that physical pain is real and something to be addressed.
- Ordered lists usually have numbers where the order of each item in the list is important. unordered lists (often bullet points) consists of items in which their order on the list does not matter. Lastly definitions lists are simply made up of certain terms along with their respective definitions.
- Links are created using the
<a>element and an href which references the url of the desired destinations. For example:<a href= "facebook.com"></a>would link to Facebook. - If you include the /target/ attribute in the opening
<a>tag it and set it equal to "_blank" in most browsers it will open in a new tab. It should look something like<a href="URL" target="_blank"> - To link to a specific part in the same page you use what is called the /id/ attribute as well as the
<a>(linK) element. Simply assign a unique id to the specific element you wish to link to i.e.<h1 id="top"> Top </h1>and then for the link element you would simply do<a href="#top> link to top </a>. Note the use of the "#" symbol assigned to the "href" attribute.
- The purpose of CSS is to better control and add styling to the elements and presentation of an HTML file.
- CSS stands for Cascading Styling Sheets and in this case cascading refers the different hierarchies present in the implementation of styling rules for each element. That his to say some rules can be general affecting multiple elements but can be overridden in specific instances depending of specificity and other factors.
- A basic CSS rule contains a selector (which refers to an HTML element) and a declaration (defines how the selected element should be styled).
- You can do so internally by adding a
<style>element which the HTML file or by linking the external CSS file int eh head of the HMTL file as such<link href= "css/ name_of_file.css" type="text/css" rel="stylesheet" />where the "href" refers to the path/location of the CSS file, the "type" refers to the type of document/file being linked and the "rel" specifies the relationship between the HTML page and the file which is linked. - External stylesheets are better used when creating multiple pages for the same website. Using an external stylesheet gives uniformity to the style of the pages, keeps the content separate from the styling of the page, and means the style for the entire website can easily be changed in one file instead of on each and every page.
- A color hex code is a 6 character long code which allows designers to choose exact colors when styling their web pages; the values in the hex code refer to the levels of Red Green and Blue used to create the specified color.
- The HSL color consists of the Hue, Saturation, and Lightness of a color.
- The three main categories of fonts used in digital typefaces are: Serif, Sans-Serif, and Monospace. Serif fonts have extra details/flourishes on the ends of the main strokes of each letter while Sans-Serif fonts have straight endings to their letters and Monospace fonts have letters that are ALL the same width.
- The three main units for font-size are: Pixels, Percentages, and EMS.
- The input element can be influenced greatly by the "type" attribute.
- The
<select>element will create a dropdown list in HTML. - It should be set to "submit".
- The
<fieldset>element can be used to group similar form items together.
- If you move from the inside out padding is the space between the border of a box (which separates the edge of one box from another) and any content within it while the margin sits outside the border and can create a gap between two adjacent borders.
- When list as such values correspond as follows: top, right, bottom, left.
- One key of block-level elements is that they start a new line on the page and contain inline elements. Examples of block-level elements include:
,<h1>,<p>,<ul>, etc. Inline elements however DO NOT start a new line on the web page and its width goes only as far as its tags; these elements flow between the surround text. Examples include<img>,<b>, and<i>. - Fixed positioning keeps an element in a fixed position in the browser window so that even if the user scrolls up or down the page, this element remains in the same spot (always visible) regardless. The z-index can help make sure this fixed element remains visible and legible while the user is scrolling, and it could also be used to make more important elements always visible in relation to less important ones or vice versa.
- A fixed layout does not change size based on the window it is being viewed in; typically the values for the elements are set absolutely using pixels. In contrast, a liquid layout changes and "adapts" according to the size of the window viewing it; these layouts typically use percentages as opposed to absolute pixel units.
- The "alt" attribute is important in order to provide a text description of the image used for users who are visually impaired/blind to make the content more accessible to them.
- Where it is placed in terms of the preceding block element. If it appears within the paragraph element for example, it will be an inline element, However, if it appears before the opening tag of the next element (i.e. the paragraph element) it will then be its own block element.
- The jpeg format is better for photographs/graphics with many colors, especially subtle, distinct shades of the same color. Png is good for storing graphics with sharp lines, a lot/large text, or a very small number of used colors such as logos or illustrations.
- Using CSS to specify the height and width of images allows you to use this powerful tool to manipulate and standardize more than image at a time; in HTML you would have to do this for each photo where as in CSS you can group them by class and make them all standard at once.
- An image sprite is when one image is used for several different parts of a web page. It is a great tool for efficiency in terms of both design and that then the browser only needs to request one image instead of a different one for each instance and will therefore load faster.
- You declare a variable by using the
varkeyword, the name you wish to give the variable, the assignment operator(the equals sign)and then the "value" of the variable (which can be any datatype). The assignment operate or equals sign tells the program that you are going to assign a value to a variable OR update the value of an already declared variable. An example of declaring a variable could be as follows:var price = 13.99. - Strings mostly contain letters and other characters while numbers can have any numeric value which includes integers as well as floats, and lastly booleans can have only one value of true or false.
- The rules for naming variables are as follows:
..1. The name must begin with a letter, dollar sign($), or an underscore. It cannot start with a number.
..1. The name cannot have a dash or a period; it can contain a dollar sign, or numbers as well as letters.
..1. You cannot use keywords or reserved words such as: case, var, new, while, etc. (You can see a full list online)
..1. Variables are case sensitive. Therefore, Hat would be different than hAt or HaT. (However creating variables with the same name but different cases is considered bad practice).
..1. It is best to use a name that describes the type of information that the variable will store.
..1. Use camel case if the variable name is more than one word. Camel case simply means that the first word is lowercase while all the following words have their initial letter capitalized. E.g.
lastNameortimeOfDay - Arrays can be useful because you can group related variables together and manipulate/access them more easily and efficiently. To access/change a value in an array we must first remember that arrays in JavaScript have a 0 index which means the first value in the array is index value 0, not one. So if we had an array
var fruit = ['apple', 'banana', 'cherry']we could access our desired value by calling the variable and the specific index number, so if I wanted to access the 'apple' value in the array I could call it as followsfruits[0]which would be 'apple' I could then change the value of that specific variable in the array as followsfruits[0] = 'orange'which would yield the new arrayfruits = ['orange', 'banana', 'cherry'] - An expression is any sequence of code that produces a value while a statement is a bit more general and can be thought of as an instruction to perform a specific action.
- Three operators in JavaScript include assignment operators which assign values to variables, arithmetic operators which perform basic mathematical functions, and string operators which are used to combine two strings.
sayHellowould not call the function, it would simply reference it. If we wanted to execute or call the function then we must use the parentheses at the end as insayHello().- A parameter is set during the declaration of a function using a variable. An argument is the actual value of that variable(s) that gets passed to the function when it is called.
returnis used in JavaScript to end the execution and return a value to the function caller.- Local variables are better than global variables because they do not need to be stored until their specific function is called and they will not lead to naming conflicts as long as the same name is not used within the same function; this leads to faster loading time for the web page as well as an easier time writing code since you can use the same name more than once. I would perhaps use a global variable in my code if it is a variable that I constantly need access to and is used multiple times in the file that I am using. Otherwise, it seems local variables are much preferred to global ones in most instances.
- Psychology: How does this make them feel?
- Usability: Are you being clear and direct, or is this a little too clever?
- Good: Campos Coffee
- Bad:Frans Hal Museum
- Design: Do the colors, shapes, and typography help people find what they want and improve usability of the details?
- Copywriting: Does it motivate the user to complete their goal? Is that what we want?
- Good: Zero Banking
- Bad: Superior Web Solutions
- Analysis: Are you looking for subjective opinions or objective facts?
- Good: Suliya
- Bad: Morgan Stanley
Click here to see the work that I did on codepen