Intro - Additional Resources https://www.npmjs.com/package/http-server
Learn more
Here is a list of resources that may be helpful as you continue your learning journey.
HTML - Additional Resources Learn more
Here is a list of resources that may be helpful as you continue your learning journey.
CSS - Additional Resources Learn more
Here is a list of resources that may be helpful as you continue your learning journey.
Selector
Example
Element Selectors
p {
ID Selectors
#latest {
Class Selectors
.navigation {
Element with Class Selector
p.introduction {
Descendant Selectors
#blog h1, #blog div h1 {
Child Selectors
#blog > h1 {
:hover Pseudo-Class
a:hover {
Other Selectors
There are many other CSS selectors available
JavaScript libraries commonly used with React
JS - Additional resources Here is a list of resources that may be helpful as you continue your learning journey.
These resources provide some more in-depth information on the topics covered in this module.
Error Handling - Additional resources Here is a list of resources that may be helpful as you continue your learning journey.
These resources provide some more in-depth information on the topics covered in this module.
They are “first-class citizens”. What does that mean?
pass to other functions
save in a variable
return from other functions
It accepts other functions as arguments
It returns functions when invoked
Pure functions and side-effects
A pure function returns the exact same result as long as it's given the same values
It should not have side-effects. A side-effect is any instance where a function makes a change outside of itself
Functions - Additional resources Here is a list of resources that may be helpful as you continue your learning journey.
These resources provide some more in-depth information on the topics covered in this module.
OOP - Additional resources bun test
bun test --coverage Version Control - Additional resources HTML & CSS in deep - Additional resources
Input
Description
<input type="text"> text
<input type="hidden"> hidden text
<input type="email"> electronic mail
<input type="tel"> telephone
<input type="url"> url
<input type="date"> date
<input type="time"> time
<input type="week"> week
<input type="month"> week
<input type="number"> number
<input type="range"> range
<input type="color"> color
<input type="file"> choose file
<input type="submit"> submit form
<input type="image"> image
<input type="reset"> reset form to default values
<input type="search"> search
Attributes for validation
Attribute
Description
required Denotes a mandatory input that the user can’t leave empty. It can be used with any input type
minlength Specifies the minimum length of a text input
maxlength Specifies the maximum length of a text input
min and max Determine the minimum and maximum values allowed for an input field. They are usually applied to numerical text inputs
multiple Indicates that the user can enter more than one value in a single input field. This attribute can only be used for email and file input types
pattern Defines a particular pattern that an input field value has to fulfill to be considered valid, a regular expression to specify the pattern
<iframe src="https://example.com/… " name="My Frame" width="400" height="300" allow="camera; microphone; fullscreen; geolocation" sandbox="allow-forms allow-scripts" title="An embedded document about my fb feed"> </iframe>
sandbox value
Description
allow-downloads Allows the user to download an item
allow-forms Allows the user to submit forms
allow-modals The resource can open modal windows
allow-orientation-lock Lets the resource lock the screen orientation
allow-popups Allows popups to open
allow-presentation Allows a presentation session to start
allow-scripts Lets the resource run scripts without creating popup windows
When the value of this attribute is empty, all restrictions are applied
referrerpolicy value
Description
no-referrer The referrer header will not be sent
origin The referrer will be limited to the origin of the referring page
strict-origin The origin of the document is sent as the referrer only when using the same protocol security level (HTTPS to HTTPS)
<iframe src="my_iframe_src.html" srcdoc="<p>My inline html</p>">
</iframe>
loading value
Description
eager iframe should be loaded immediately when the web page loads
lazy Loaded when iframe is displayed in the browser
Property
Description
justify-content For item alignment on main axis
align-items For item alignment on cross axis
align-self For unique flex items on cross axis - alignment
align-content Used for packing flex lines and control over space
flex-wrap
Span the entire width of the axis
flex-direction
Change the ‘main’ axis from horizontal rows to vertical columns
flex-grow, flex-shrink, flex-basis
Together these determine how the flex takes up space, grows or shrinks according to the space available
flex: 0 1 auto;
flex-grow set to 0, flex-shrink to 1 and flex-basis to auto
flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-basics-and-terminology
Property
Description
display: grid Allow you organize the various elements on your page
grid-template-rows: none Configure your elements but with this setting the elements are organized like columns on a table
grid-template-areas: none Configure the names of a grid and how they sit in relation to one another
grid-auto-rows: auto Default setting for all row sizes that have not been explicitly configured
grid-auto-columns: auto Default setting for all column sizes that have not been explicitly configured
grid-auto-flow: row Default location for rows that are not explicitly allocated
column-gap: normal This sets the gap between the columns
row-gap: normal This sets the gap between the rows
Absolute units are used when the size of the web page is known and will remain constant
Unit
Name
Comparison
Q
Quarter-millimeters
1Q = 1/40th of 1cm
mm
Millimeters
1mm = 1/10th of 1cm
cm
Centimeters
1cm = 37.8px = 25.2/64in
in
Inches
1in = 2.54cm = 96px
pc
Picas
1pc = 1/6th of 1in
pt
Points
1pt = 1/72nd of 1in
px
Pixels
1px = 1/96th of 1in
Given the dynamic nature of web pages today and the variable size of devices in use, relative units are the go-to option in many cases
Unit
Description and relativity
em
Font size of the parent where present
ex
x-co-ordinate or height of the font element
ch
Width of the font character
rem
Font size of the root element
lh
Value computed for line height of parent element
rlh
Value computed for line height of root element which is <html>
vw
1% of the viewport width
vh
1% of the viewport height
vmin
1% of the smaller dimension of viewport
vmax
1% of the larger dimension of viewport
%
Denotes a percentage value in relation to its parent element
Type
Description
Example
Inline styles
Attached with the ‘style’ attribute, they have the highest specificity
<p style=“color: white;”>
IDs
They are represented by ‘#’
#div
Classes, attributes, and pseudo-classes
Classes, and the attributes inside the selectors
.my-class, p[“attribute”], div:hover
Elements and pseudo-elements
They have the lowest position in the specificity hierarchy
div, p
CSS specificity
Selector
Syntax
Example
Element
element
div { }
Class
.class
.alpha { }
ID
#id
#alpha { }
Universal
*
* { }
Variations of simple selectors
Elements
Syntax
Example
Description
Two classes
.first-class.second-class
.alpha.beta { }
All elements with classes alpha and beta
Element and class
element.class
p.alpha { }
All alpha class elements inside <p>
Two elements
element, element
p, div { }
All <p> and <div> elements
Two elements
element element
p div { }
All <div> elements inside <p>
Descendant selectors/combinators
Selector
Syntax
Example
Description
Descendant
element element
div p { }
All <p> descendants of <div>
Child
element > element
div > p { }
All <p> direct descendants of <div>
Adjacent Sibling
element + element
div + p { }
<p> element directly after <div>
General Sibling
element ~ element
div ~ p { }
All <p> element iterations after <div>
Selector
Syntax
Description of selection
[attribute]
[href] { }
Selects all elements with a href attribute
[attribute=value]
[lang="fr"] { }
Selects all elements with lang attribute that has a value of "fr"
[attribute~=value]
[input~=hello] { }
Elements with input attribute containing the whitespace separated substring "hello"
[attribute|=value]
[lang|=en] { }
Elements with lang attribute value equal to "en" or "en-"(en hyphen)
[attribute^=value]
a[href^="https"] { }
Every <a> element with href attribute value begins with "https"
[attribute$=value]
a[href$=".docx"] { }
Every <a> element with href attribute value ends with ".docx"
[attribute*=value]
a[href*="meta"] { }
Every <a> element with href attribute value has substring "meta"
Pseudo-class
Example
Description of selection
:active
a:active { }
All active links
:checked
input:checked { }
All the checked <input> elements
:default
input:default { }
All default <input> elements
:disabled
input:disabled { }
All disabled <input> elements
:empty
div:empty { }
All the <div> elements with no children
:enabled
input:enabled { }
All the enabled <input> elements
:first-child
p:first-child { }
All the <p> elements who are the first child of a parent element
:first-of-type
p:first-of-type { }
All the <p> element who are the first <p> element of a parent element
:focus
input:focus { }
Input element under focus
:fullscreen
:fullscreen { }
The element in full-screen mode
:hover
p:hover { }
Action effect on mouse hover
:invalid
input:invalid { }
Input elements with an invalid value
:last-child
p:last-child { }
All the <p> elements who are the last child of a parent element
:last-of-type
p:last-of-type { }
All the <p> elements who are the last <p> element of a parent element
:link
a:link { }
All unvisited links
:not(selector)
:not(div) { }
All the elements that are not a <div> element
:nth-child(n)
div:nth-child(3) { }
All the <p> elements that are the third child of a parent element
:nth-last-child(n)
div:nth-last-child(3) { }
All the <div> elements which are the third child of a parent element, counting from last child element
:nth-last-of-type(n)
p:nth-last-of-type(2) { }
The second sibling from the last child of a parent element
:nth-of-type(n)
p:nth-of-type(2) { }
The second sibling of a parent element
:only-of-type
p:only-of-type { }
All the <p> elements which are only <p> elements inside its parent
:only-child
p:only-child { }
All the <p> elements which are only child of a parent element
:optional
input:optional { }
The input elements with no "required" attribute
:required
input:required { }
Selects input elements with the "required" attribute specified
:root
:root { }
The Root element of document
:selection
::selection { }
The portion of an element that is selected by a user
:valid
input:valid { }
All the input elements with a valid value
:visited
a:visited { }
Selects all visited links
Syntax
Example
Description of selection
::after
p::after { }
Inserts content after content of <p> element
::before
p::before { }
Inserts content before content of <p> element
::first-letter
p::first-letter { }
Selects first letter of every <p> element
::first-line
p::first-line { }
Selects first line of every <p> element
::placeholder
input::placeholder { }
Selects input elements with "placeholder" attribute specified
::marker
::marker { }
Selects markers in a list
@keyframes animationname { keyframes- selector { css- styles; } }
@keyframes animationname {
from { color : blue; }
to { color : red; }
}
animation : name duration timing-function delay iteration-count direction fill-mode play-state;
div {
animation : myanimation 3s infinite;
}The shorthand for the animation property consists of the following properties with their default values:
animation-name: none
animation-duration: 0s
animation-timing-function: ease
animation-delay: 0s
animation-iteration-count: 1
animation-direction: normal
animation-fill-mode: none
animation-play-state: running
animation-timeline: auto
