HTML uses elements to describe to the web browser the structure of the webpage. The best way I can describe it is that HTML is the web version of the structure of a letter. You have a <head>, then your <body> and last a <footer>. It of course it get's a little more complicated after that.
Elements are the characters that live between the opening < > and closing tags. </ > ex. <h1> Hello Turing </h1>
An attribute helps the element by providing extra information about the element such as font size or color.
The <head> element is where most of the data or information that you want to link to your site. The information or elements you put in the head element won't appear on the site. The <title> element if what will appear on the tab. The <body> element if where the text and images is located. Within the body is where you'll find your header elements <h1>and your paragraph elements <p>.
Click View on google top menu then Click Developer then selected View Page Source.
6. List five different HTML elements and what they are used for. For example,
is a paragraph element, and it is used to represent a paragraph of text.<h1> </h1>is the element for header. They range from h1 for large to h6 for small but you'll really only use h1 - h3.<link> </link>is the element for linking both images and css stylesheet files.<title> </title>is the element where the put the page info for the tab.<div> </div>is my favorite element so far. they make a container so you can section off parts of the website.<script> </script>This element allows you to add JavaScript code to html.<span> </span>This allows you to add CSS code to html.
Empty elements don't require a closing tag. <br> would be an example of one.
It the way of structuring your HTML so is reinforces the hierarchy of your content.
9. What are three new semantic elements introduced in HTML 5? Use page 431 in the book to find more about these new elements.
<form>, <table>, and <article> - Clearly defines its content.
1. There are three main types of lists in HTML: ordered, unordered, and definition. What are their differences?
Ordered lists are created by the <ol> element and will number the list for you.
Unordered lists are created by the <ul> element and will have bullets points instead of numbers.
Definition lists are created by the <dl> element and this is used to define a statement giving you a nested comment section.
The <a> element which has an attribute called href. That stands for Hypertext REFerence. An example would look like <a href=“www.turingschool.com">Turing School for programming</a>
You will want to use to target=“_blanks” attribute open a link in a new tab.
So very similar to how we link a website but instead of a website you’ll link a location on html. An example would be <a href=“about-us.html”> About Us </a>
Read Chapters 10, 11, and 12 on What is CSS, Color, and Text from HTML and CSS: Design and Build Websites
The purpose of CSS is to issue style rules for HTML elements to follow. CSS is how you add style and design to your HTML structure.
CSS stands for Cascading Style Sheets. They call it cascading because the last rule takes precedence over the ladder of two conflicting rules.
The basic structure of a CSS rule will have a selector and a declaration. Basically a element call out and what you would like that element to do. CSS declaration will have two parts: a property is something you want to change like height, width, colors and fonts. Values are the settings like red, blue, green and font sizes. Always close rules with semicolons ; . Example:
body {
font-family: sans-serif;
color: red;
}
Linking your external css files is easy using your link element. There are 3 parts, href, type and rel.
HREF stands for Hypertext REFerence, so the file location.
TYPE stand for what king of document are you linking. This value is text/css.
REL stands for the relationship the HTML file and the file it’s linked to. Being a css file the value should be “stylesheet”.
The link is also an empty element so you don’t need to close it.
An example would look something like this:
<link href=“css/stylesheet.css” type=“text/css” rel=“stylesheet” />
It is good practice to always use external stylesheets. It keeps everything clean and easy to look at. It also is very beneficial when creating websites with multiple pages so you don’t have to create multiple css files. It’s also easier to keep track of brand standards when all style code is in one place.
Hex code for color is a six digit code that represents red, green and blue. It is always preceded by the pound # sign.
HSL stands for Hue, Saturation and Lightness.
8. In the world of typeface, what are the three main categories of fonts? What are the differences between them?
Serif have a little extra detail to help them make them easier to read. Sans-Serif have more of a straight and cleaner look. Monospace is font that has the same width between them.
Pixels: This allows you to get really precise. Percentages: this allows you to base the text off a percent of the default text. EMS: This is spacing based off your current font size for the letter m.
That would be the type attribute. type=“ ” There are many type attributes that you can choice when using the input element.
You would use the <select> element to create to dropdown list then you will use the <option> element to create different options for the user to pick from.
3. If you're using an input element to send form data to a server, what should the type attribute be set to?
You will want to use the type="Submit" attribute to send the information to the server.
Grouping items together can be done with the <fieldset> element. Within the element you can use the element to identify the groups in the form.
Every box will have a border. Think of this as the edge of the container. The padding is the space between the content and the edge of container. The margin the the space bbeyond the border.
2. For a CSS rule padding: 1px 2px 5px 10px, what sides of the content box does each pixel value correspond to?
The will appear in a clockwise rotation. Starting with the top, right, bottom and last left.
Block level will stack boxes on top of each other even if the space allows. Inline element will let other elements and boxes move and flow around them.
4. What is the role of fixed positioning, and why is z-index important in the scenario of using fixed positioning?
When your using a fixed positioning on a box that box won’t move even when the page is scrolled. Z-index is important for allowing you to control what element sits on tops. It can get important when you have a lot of boxes on a page. The element with the highest z-index number will sit on top.
A fixed width layout is one that will not change regardless of the size of the browser window. This is beneficial for designer who want to use pixels for more control over the position and appearance. Although not helpful if you plan on users using different screen sizes. In that case you would want to use more of a Liquid style layout. If a fixed width layout is based on pixels than a liquid layout is based of percents, so the page will always be 100% of screen size.
The alt section allows you to add text to an image that might not be able to be displayed.
The placement of where you add the image code will determine if the box will be a block or inline element. If the code sits on top or bottom of text or box it will be a block. If the code sits in or nest within a box it would become an inline element.
For the most part most images that you will use or encounter will be in the .jpg format. It’s the format that handles photos and color better. .png are very helpful when it comes to being able images with transparent sections like most logos. Pngs are also good for more simple images that only use single colors like icons and infographics.
1. What is the benefit of specifying the height and width of images in CSS compared to specifying in the HTML?
When you specify the height and width on CSS rather than HTML it allows you to keep the dimensions off your HTML page, which should be kept clean. It also helps when loading the page to increase speed.
When you are using the same images in several different area on a webpage that is called a sprite. The huge advantage to using sprites is that it allows the webpage to only have to load one images cutting down page load time.
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?
To declare a variable you will want to use var as the keyword for variable and then declare what you would like for the identifier. An example would look like var maximBaby = 1 The equal sign is the statement operator or in JavaScript it’s called the assignment operator. It is used to assign values to variables.
2. There are three big data types in JavaScript: numbers, strings, and booleans. Describe what each of them are.
Numbers are often called numeric data types and as the name suggests it’s handles numbers both positive and negative. We use this data type when trying to calculate sizes and things like setting the amount of time something can fade in. Strings are how a variable can store a sequence of characters. You will add quote marks around the text. This is used when displaying an users name on a greeting or any type of message. Booleans can only hold a value of either true or false. Booleans are an important part to any site because allow different outcomes. If true give one response if false give another.
3. What are the six rules for naming variables? What are a few JavaScript reserved words that you should avoid using for variable names?
1). A name must start with a letter, dollar sign or an underscore.
2). A name can only contain letters, dollar signs or an underscore. Don’t use dashes or periods.
3). You cannot use words that are names for variables, functions, methods, or objects as these will give instruction to do something. When we are making a variable we would use the keyword var. Boolean, true, false, and import are some a few other examples of words that are reserved functions.
4). Variables are case sensitive so names like mybike and myBike will be different. You want to stay away from creating variables with the same name and different cases as this might be hard to remember when using them.
5). Instead you want to use a name that help describes the information for that variable like myBike or currentSpeed.
6). When using different cases to separate words you will not capitalize the first word. When you do this it’s called camel case.
Keywords that you would want to stay away from are things like the two booleans true and false, float for positioning, and undefined as these words are reserved for an action.
4. How can an array be useful when dealing with multiple related values? How do you access/change a value in an array?
An array is helpful when working with multiple related values because it will allow you to store them as a list. You can create an array and store numbers, strings, and booleans. When you create an array it will also create an index for each value starting at 0.
var bikes;
bikes = [‘yeti’,
‘santa cruz’,
‘custom’]
This makes it easy to update a value by using the index to call out the value that you would like to change. bikes [2] = ‘reeb’ will change the custom value to reeb.
A statement is a complete instruction or step and an expression is the section of code that will formulate a value.
Assignment operators: These will assign a value to a variable. Arithmetic operators: these will perform a basic math. String operators: these will combine string together.
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
Functions will sometimes need to provide information in order to run a task. The information inside the parentheses is called parameters.
A parameter is when you use words inside the parentheses and those words will act like a variable. An argument is the value used within the function.
The return keyword will return the information to the function that called it.
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?
A local variable is one that is placed inside the function. Doing so will remove the variable after thew function uses it. A global variable is one declared outside of a function and can be used by different functions with the same value. A global variable would be beneficial when you need to use that variable over multiple locations.