This is important because…
Both positioning and functions, play a vital and crucial role to building well designed sites.
Houses links for tutorials and other challenges.
Without links, there is no web; links connect sites to other sites. URLs (Uniform Resource Locator) can point to HTML files(sites/pages), images, videos, audio, text file, and more. The parts needed to create a link are an <a> element with an href attribute in the opening tag.
Functionality of links extend to various elements, including block-level ones; only need to wrap the desired link with an <a> element. The addition of a title attribute (usually after the href) allows additional text to show up when the cursor hovers over the mouse, where the dev may add a description or provide context about what’s to come should they click/activate the link, not really an “accessibility” inclusion as screen readers or navigating through keyboard strokes might not be able to invoke the “hover”.
More information on how requests for sites are made with the use of web servers and what web servers are.
./ to provide clarity as to where the file is coming from (same directory).subdirectory/filename.ext for the url... followed by the directory you want to go into and then file name as follows, ../sisterDirectory/filename.ext. The .. indicates the directory name one level up, no need to name it, only name a directory if you are going into a new one after moving up and searching for a file there. The path name can become very complicated as these syntaxes can be compounded to get to the right place...) up you are moving, you may name just reference the root and start the path name at the “parent” directory, /parentDirectoryFileIsLocatedIn/fileName.ext. the / at the beginning tells it to start the search at the root directory and proceed from there, rather than the current directory the file being linked from and then moving up.
# after the file name), we can use the # to link to an element with a corresponding id or href in it’s opening tag.download attribute provides a default save name for the file when linking to a download.target attribute and setting it to “_blank”, it points the browser to open the link clicked on in a new tab, rather than on the same page.<a> element, with an href attribute, and mailto: followed by the email address within the href attribute. Leaving mailto: blank opens a equally blank, new outgoing email window from which you may add the info as the user wishes.<a> or anchor tag.Landing page for tutorials and challenges
Having the layout in mind when designing a page allows one as a developer to control the positioning and be prepared for how different elements will interact with each other, different resolutions, and window sizes.
display: block; or display: inline-block.
Methods to override normal flow are as follows,
display property - values include block, inline, inline-block.
grid or flexboxfloat - allows block elements (<p>, <img>, etc.) to wrap around other elements.position - control where boxes are placed in relation to other boxes.
static - defaultfixed - keeps “box” in same spot in viewport.Changes the behavior of elements by taking them out of normal flow, expands on overriding, through the use of the position property in CSS.
Default, every element begins with. no need to state/define/write out in CSS, but looks like position: static; within CSS rule.
We define relative as the value for the position property, then expand on it (and the following positions henceforth) with the top, bottom, left, and right properties.
For relative, think opposite of the property you define. As in, if define top, it will be pushed down by the measurement specified, or pushed from the “top”. left, it will pushed to the right or pushed from the “left”, and so on.
Again defined as the value for the position property. absolute elements no loger exist within the normal flow, the space they once took is then/filled in by the surrounding elements and it sits within its own layer.
Think in terms of pop-ups, dialogue boxes, etc.
The way this value moves the element is the “opposite” of relative, in a way. The units of measurement dictate the distance the element should sit from the parent elements sides.
Z-index refres to z-axis and controls the “stacking” order of the elements. The higher/ positive value, the more to the top/background; the lower/negative value, the more to the background.
Places the element relative to the viewport of the browser; very similar to absoulte (relative to the nearest ancestor element).
Persistent elements in same location, regardless of where you scroll or go on the site.
selector {
position: fixed;
top: 0;
The above CSS snippet makes the <h1> element stick to the top of the screen and removes it form normal flow.
Combination of relative and fixed. Element is positioned relatively to a certain point, then becomes fixed.
Think moving Row headers that become superceeded by relevant headers per section.
<p>, <h#>.<a>, <span>, <strong>.| useful for overlays, tool tips; collapsible menu ‘ | ’ (rotated 90 deg). |
<body> for relative.
Landing page with links to tutorials and challenges aimed at teaching the essentials and provide foundation for further learning.
A storage mechanism for code that does a single task, which you may invoke and use at a later time.
Everywhere. They’re used to make developing easier and keeping developers sane (..attempt).
Functions can be used to manipulate,
replace()join() to combine contents in array into single array.random() to create random numbersMany are built-in and ready to use, even though they might not be written in javascript (C++/lower level language browser is built on or through APIs).
Functions are methods, when written to be part of an object.
Custom functions are just that, functions written specifically for the task at hand.
The process of running the actual function is called, invoking. To invoke a function, you specify the function name followed by a pair of parentheses (and any arguments, if appropriate), then a semi-colon.
Being able to call other functions within a function (should they be globally accessible) is a trait.
Not all functions do, but there some that require parameters to be specified in order to complete it’s job. parameters go within the parentheses. There are also functions that expect a parameter(s) to be specified, but when they aren’t; they adopt a default behavior.
Anonymous functions have no name and expect a function to be its parameter (function expression).
addEventlistener() - runs code after an event/action from the user.Rather than using the function keyword; arrow functions are specified through the use of =>.
To avoid conflicting variable names and possible malicious actions from external scripts; two separate scopes exist. The local scope that says, variable defined within a function can only be recalled within that specific function call. The global scope is from where you may pull from throughout the entire script and within other functions. Local can called upon from only that instance, global can be called from every instance.
var as it can mess with the scope considerations.)