- On a website, what is the purpose of HTML code? HMTL code defines the structure of a website to make it easier for the user to navigate and understand. The HTML code is read and interpreted by the browser.
- What is the difference between an element and a tag? The terms are often used synonymously but an element typically includes two tags (see empty elements below for an example of a single tag element), an opening tag and a closing tag. The elements tell the browser something about the information included within the tags. Tags act like containers and tell the browser something about the information within the tags. They often come in twos and are the "markup" in Hypertext Markup Language. Tags make-up elements
- Why do we use attributes in HTML elements? Attributes provide additional information about the contents of the associated tags/element. An attribute of an element includes a name and a value (name="value") and are included within the opening tag of an element. An example would be the size attribute of an image displayed on a page.
- Describe the purpose of the head, title, and body HTML elements. Each of these tags describe a different part of the displayed page. The head tag tells the browser information about the page. The title tag is the information that is displayed in the browser tab. The body tag tells the browser the informaiton to display within the main browser window.
- In your browser (Chrome), how do you view the source of a website? Within Canary from a browser window along the top tool bar click
Viewthen scroll down toDeveloperand then over toView Source. - List five different HTML elements and what they are used for.
- Headings: Browser displays the headings (1-6) at different sizes. It helps break up information within the page.
- Subscript: Subscript is used for checmical formulas or footnots.
- Superscript: Superscipt is used for raising a number to a power, suffixes on dates, etc,
- Line Breaks: This can be used to force the browser to create a line break. An example may be within a poem.
- Bold: Bold can be used to add emphasis.
- What are empty elements? Empty element are elements with only one opening tag and no closing tag. Examples include line breaks and horizontal rules.
- What is semantic markup? Semantic writeup is not intended to impact the structure of a page but instead add additional information on how the content should be read and interpreted. Semantic writeup should not be used to change the way the text looks (although it does do this) and instead should be sued to describe the contents of the page to the browser. An ADA compliant website would use semantic writeup to assist the screen reader in providing the content accurately to the user.
- What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
- Aside
- Header
- Nav
Link: https://codepen.io/lundgrea/pen/KYaYpd
- The HTML should include:
- The basic HTML structure (body, title, head, etc.).
- At least two levels of headings.
- Multiple paragraphs.
- The paragraph text should be about what drives you to learn about web development.
- There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences? "Ordered lists" use numbers ard the order matters and/or each item may need to be referenced to later. They are displayed using the ol and li elements. Unordered lists use bullets and are written with the elements: ul and li. Definition lists are helpful when defining terminology or creating a glossary. They are written with the di, dt, and dd elements. All of these list elements and their list items have opening and closing tags.
- What is the basic structure of an element used to link to another website? An opening HMTL link tag "a" followed by an href="link"> Displayed Linkable Text and then "a" closing a tag.
- What attribute should you include in a link to open a new tab when the link is clicked? target="_blank"
- How do you link to a specific part of the same page? Add ID attributes to the HTML element (ex. id="top") that you want to be able to link to and then using your a tag and href link you add a hash to the beginning of the internally linkable page spot. The written element should look something like this: <a href="#top>Top
- Two lists: ordered and unordered.
- A link to your GitHub account.
- A link to the Turing website.
Chapters 10, 11, and 12 on What is CSS, Color, and Text from HTML and CSS: Design and Build Websites
- What is the purpose of CSS? CSS allows you to control the design of HTML, creating rules for how HTML elements things should appear.
- What does CSS stand for? What does cascading mean in this case? Cascading Style Sheet. Cascading means rules "flow" down from more general elements to more specific elements. It also determines which rules apply when multiple opposing rules are provided. More specific rules and rules provided latter take priority.
- What is the basic structure of a CSS rule? CSS elements are made up of a selector and a declaration. Declarations are made up of properties and values.
- How do you link a CSS stylesheet to your HTML document? Inside the HTML head tag you use an empty "link" HMTL element with three attributes 1) CSS style sheet file path using an href attribute 2) type attribute telling the browser that the file it will find at that file path is a CSS file (
text/cssshould be used) and 3) rel attribute telling the HMTL that the provided file will be a stylesheet (stylesheetshould be used). - When is it useful to use external stylesheets as opposed to using interal CSS? External style sheets help to keep the HMTL code cleaner. When the style sheet is external from the HMTL it is easier to make more sweeping changes to your site more quickly. External style sheets should be used for larger sites allowing for less code, easier updates, and faster load speeds.
- Describe what a color hex code is. Color that is represented using hex code is represented using hexidecimal code. Each of the values of red, green, and blue are written in hexidecimal code. The hex code is proceeded by a hash symbol.
- What are the three parts of an HSL color property? Hue (similar to color, numbered between 0 and 360), saturation (the amount of grey in the color, represented as a percentage, 0% = a shade of grey, and 100% = full saturation), and lightness (the amount of black & white, represented as a percentage, 0% = black, 50% = normal, 100% = white).
- In the world of typeface, what are the three main categories of fonts? What are the differences between them? Serif (fonts with extra detail on the ends of the main strokes, known as serif), sans serif (without the serif, straight ends to the letters, cleaner design), and monospace (every letter is the same width, AKA fixed-width).
- When specifiying font-size, what are the main three units used? Pixels (px, relative to the resolution of the screen), percentages (default at 16px, likely to vary if a user has changed their default text size), Ems (eqivalent to the width of the letter
m).
- Add a color to the text of all of your headings (using hex codes).
- For your h1 heading, add a background color.
- Make your headings a serif font, and make the paragraph text a sans-serif font.
- Change a snipet of paragraph text to be italic using the font-style property (do not use the in this case).
- If you're using an input element in a form, what attribute controls the behavior of that input? Type
- What element is used to create a dropdown list? Select element with options elements added.
- If you're using an input element to send form data to a server, what should the type attribute be set to? Submit.
- What element is used to group similar form items together? Fieldset
Add a form that could be used to submit your top three music artists. It should include:
- Text boxes for each artist (three artists total).
- Labels for each text box.
- Dropdowns for the genre of each artist.
- Submit button.
- Describe the differences between border, margin, and padding. The border seperates the edge of one CSS box from antoher, it is always there even if it is invisible. Margin is the space around the border and is the gap between adjacent items. Padding is the space between the content and its border.
- For a CSS rule
padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to? Top, right, bottom, left. - Describe the difference between block-level and inline elements. Block elements start a new line. Examples include paragraph(p), unordered lists (ul), and list items (li). Inline elements do not start a new line and the surrounding text flows around the element. Examples include images (img), bold (b), and italics (i)
- What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning? Fixed positioning is a way to create a header at the top of the page that stays put as the user scrolls. The z-index helps with fixed positioning because it lets you decide which item is brought to the front or pushed to the back. The z-index is the stacking context. By default the content that shows up later in the HMTL show up in front of earlier content. Using the z-index let you decide which content is brought to the front. The higher the number the closer that content is to the front.
- What is the difference between a fixed and liquid layout? In a fixed layout the layout width does not change as the size of the browser window changes. With a fixed width layout you have greater control of the appearance and they are generally written using pixel measurements. A liquid layout design stretches and contracts with changes in the browswer window size. They are written in percentage measurements and both expand to fill the page and contract to smaller screens. Liquid layouts can result in hard to read long lines of text or alternatively text squished into small spaces.
Add some styling with boxes and adjusting the layout. This should include:
- Add a border and background color to your headings. Pay attention to the contrast between the text and background colors.
- Divide your paragraph text into two vertical columns.
- In an image element, why is the alt attribute important? Alt element describes the image if you cannot see it.
- What determines if an image element is inline or block? By default an image is inline. Using old HTML code you could use align attribute to make an image act like a block element. Now CSS float is used.
- What are the benefits of jpg or png image file formats? JPG is better for images with lots of slight color variance. PNG is better for images with flat colors (large areas with the exact same color).
- What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML? You are able to take this code out of the HTML and include it within the CSS. You are able to set image sizes across your site since many pages are likley to use images of the same size.
- What is an image sprite, and why is it useful? An image sprite is a collection of images that can be loaded into a single image spot depending upon the actions of the user. It can help the images load faster because it decreases the number of required server requests. It can be useful when you change an image's specifications based on the user either hovering or clicking on an image.
- Continue working with the page you created in CodePen, and add a couple relevant images to your paragraph text.
- Read as above
- Watch this short video
Chapter 2 (Statements, Variables, Data Types, & Arrays) from JavaScript & jQuery: Interactive Front-End Web Development
- How do you declare a variable. What does the equals sign really mean in JavaScript? What is it called in JavaScript? You assign a variable using the keyword var, an assignment operator (=), and a variable name. If your variable name is more than one word camelCase should be used. The end of the line should end with a semicolon.
- There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
- Number: includes decimals and negative numbers, you can do math to numbers
- String: identified by quotation marks, can be made up of any types of characters
- Boolean: gives you a return value of true or false
- What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?
- Cannot begin with a number. Must begin with a letter, $, or _
- No dashes or periods. Can be made up of numbers, letters, $, or _
- Can't use the JavaScript keywords or reserved words (reserved words include but is not limited to: private, class, short, long
- Case sensative. Do not create two variables using the same words but with different capitalization.
- Descriptive - try to describe the variable
- camelCase
- How can an array be useful when dealing with multiple related values? How do you access/change a value in an array? Arrays can help reduce the amount of code and makes the code more concise. You can access or change the value of an array using the index value (which starts at 0 and not 1). You would access the index and then assign a new value. For example the below defines fruit and then changes the second index value item in the array to watermelon. var fruit = ['blueberries', 'peach', 'tomato'] fruit[2] = 'watermelon';
- What is the difference between an expression and a statement? An expression is a statement that results in a single value. There are two types of expressions 1) assigns a value to a variable and 2) takes two or more values and returns a single value. A statement is an individual step within a script. Statements end with a semicolon.
- What are three types of operators and how are they used? Three types of operators include:
- Assignment Operator (=): assigns a value
- String Operator: combines strings
- Arithmetic Operator: performs math
- Comparison Operator: compares values and returns true/false
- Logical Operator: combines expression and returns true/false
Pro tip: If you want to write more than one line of code in the console before running the code, then use shift + enter.
Open up the Chrome Developer Tools, and open the Console tab. This is where we can write some JavaScript! If you don't remember how to get to the console, watch this video to review. For each task listed below, enter it in the console:
-
25 -
"this is my string"(notice the output's color difference between a number and a string) -
var myNewString = "Hello Turing!"; -
myNewStringBefore you hit Enter, what do you expect to see in the console? ANSWER: Hello Turing! -
var myNum = 9; -
myNumBefore you hit Enter, what do you expect to see in the console? ANSWER: 9 -
var anotherString = "How are You?" -
"Connect" + " " + "these" + " " + "strings."What happened? This is called string concatenation. Notice the strings with spaces. ANSWER: The three strings were put together into one string. The spaces were added wiht the " ". -
myNewString + anotherStringThis is also string concatenation using variables. -
5 > 3returns a boolean value of true. How could you change this expression to return false? ANSWER: 5 < 3 -
"2" === 2 and "2" == 2Why does one of those expressions return true and one return false? ANSWER: Because the three equals signs is strict equality. Because one is a string and one is number it returns false in the strick equality statement. -
if (8 < 9) {console.log("Hey!")}Before you enter this code in the console, what do you think will happen? Will it log Hey to the console? ANSWER: Hey! Yes because 8 is less than 9. -
Write an if/else statementwhere the code in the else block is executed. For example: if (3 < 1){console.log("if block")} else {console.log("else block")} - Use the console to solve these problems.
Chapter 3 (Functions & Scope), pages 85-99, from JavaScript & jQuery: Interactive Front-End Web Development
- 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()would call the funciton.sayHellowould not. - What is the difference between function parameters and arguments? Within a function a parameter uses variables and arguments use specific values.
- What is the keyword return used for? A return keyword is used "to return a value to the code that called the function." If you want a return value from a function you have to use the return keyword.
- 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 only remembered wihthin the funcion in which they are called. They allow the page to respond more quicky to a user because the memory is not taken up remembering variables throughout the duration of a browser session. Local variables are defined within a function and then forgotten. Local variables eliminate or reduce naming errors. Sites may have script written by others and using the same global variables can cause errors.
- Work through these problems in the console about functions.
- Practice through some JavaScript basics exercises on w3resource and check your code against their solutions.
- Work through Command Line Crash Course
- Do all of the exercises: 1-15
Complete this Tutorial
- Read through the the Git handbook from GitHub here.
- This blog has references to commands and their meaning that might be helpful.
- Watch this series of videos
- Read What is UX?
- Read User Goals & Business Goals
- Read The 5 Main Ingredients of UX
- Find Examples
- Psychology: How much work does the user have to do to get what they want?
- Good: Google - The search page is simple. A form surrounded by lots of clear space and the Google logo. If you had never been to the Google search page before it would be very likely that you could figure it out without much help.
- Bad: Instagram - Within the app there is no way to edit your feed to look more like the "search" page displaying the results in more of a grid format. There is no way to edit your feed from the full format posts to just the photos in the grid format. This requires the user to scroll through their feed more slowly, requiring more scroll movements.
- Usability: Are there any user mistakes you could prevent?
- Good: TurboTax - The site provides the user with detail on what each entry means and should look like. Providing this information reduces errors when lay people are completing their own taxes.
- Bad: FindLaw - We used this site at my last job and requested our clients to post reviews. One client went in and entered his information into his review and clicked submit. Rather than posting his review it popped up with error. It didn't tell him why his review was unpostable. We had to do some reserach and found that it was because his review included date and location information. There was nothing within the review page nor the error message that indicated that was the problem.
- Design: Do clickable things look different than non-clickable things?
- Good: Netflix - Netflix does a good job of adding behavior to items that are either moused over or clicked. You can tell the items that are clickable because those items display behavior whereas non-clickable items do not.
- Bad: Manitou Springs High School - My old school district's website has a button "Pay Online" that looks like a button but does not respond when you mouse over it. Adding behavior to this button based on the user would assist with the UX/UI of this page.
- Copywriting: Is the biggest text the most important text? Why not?
- Good: AirBNB - The homepage is very clean with a large inspiring image and a form. The largest text is a call to aciton "Book unique homes and experiences." The most important thing is to get the user excited and inputting their information. This site fits the bill.
- Bad: The Weather Channel App - The app homepage is busy and confusing. There are large ads that disrupt the user experience and the naviagation and menu is difficult to navigate. It took me many visits to the app to get acquainted.
- Analysis: Are you looking for bad results too? Why not?
- Good: Siri - If you ask Siri to remind you something "tomorrow" but it is late at night she will inquire further as to what you mean by tomorrow. It was obvious that this was something that caused errors and needed addressing.
- Bad: CorePower Yoga - Luckily they noticed the usability issue and addressed it recently. Previously you could only search class schedules by studio location. So you had to look at each nearby studio to find a class schedule that fits your needs. They have recently updated their website so that you can put in your area code and then it serves you all upcoming nearby classes, reducing the need to click back and forth between studio schedules to find the best class time.
- Psychology: How much work does the user have to do to get what they want?