freeCodeCamp Notes

Basic HTML and HTML5

Tags - h1, h2, etc; p;
Comments
HTML5 elements - main, header footer, nav, article, section, video, etc
img tag, importance of keeping alt=""
Anchor a tag, urls, # for internal urls and dead links, turn image to link
Ordered and Unordered Lists
Input text field, placeholder text
Form element and Submit button, action attribute
Required attribute
Radio and Checkboxes, id, name value for grouping, checked attribute
Label tag with the for attribute
Nesting elements in div
<!DOCTYPE html> and <head> and <body>

Basic CSS

inline style, style tag, .class, #id (id specificity > class)
font-size, font-family: specific font, generic or fallback font;
width
border-color/style/width/radius, 50% radius makes a complete circle
padding, margin - top, right, bottom left (clockwise)
-10px negative margin to expand an element
attribute selectors - [type='radio'] , [type='checkbox']
Absolute vs Relative Units
-- Absolute tie to physical unit of measurements like in or mm, but there could be differences related to screen resolution
-- Relative units are relative to another length's value, e.g. em depends on the size of the element's font
CSS inheritance
-- order of classes in the style tag or stylesheet is important, the last class will override the previous class's style
-- However id attribute will always take precedence
-- And inline styles will override both id and class
-- And finally color: pink !important to override everything
Colors
-- Hex - #000000, Short hex - #000
-- rgb(0-255, 0-255, 0-255)
CSS variables
** --var-name: value;
usage: var(--var-name), fallback: var(--var-name, fallback value)
Another way to fallback - .css-class { background: red; background: var(--red-color-variable); }
:root { --variable1: value; } can be overridden in a specific class .someclass { --variable1: value; ....etc...}
changing variables in a media query -
:root { ... }, @media (max-width: 350px) { :root { ...changed variables } }

Applied Visual Design

text-align: center, justify, left, right;

width and height - relative or absolute units

strong, u, em, s (strikethrough), hr tags

rgb with Alpha: rgba(0-255, 0-255, 0-255, 0 to 1)

box-shadow: offset-x offset-y blur-radius spread-radius color, shadow2, shadow3..etc;

opacity: 0 to 1;

text-transform: lowercase, uppercase, capitalize, initial, inherit, none

line-height

pseudo-classes like a:hover

position: relative; top, bottom, left, right are offsets from which to move the element.

-- Relative positioning does not remove the element from its normal flow, so all other elements still consider it part of the flow

position: absolute;

-- absolute positioning removes the element from its normal flow, so other elements ignore it

position: fixed;

-- with respect to browser, gets removed from the normal flow and remains fixed even while scrolling

float: left/right;

-- Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requires.

z-index: value; higher value goes higher in the rendering stack

-- Another positioning technique is to center a block element horizontally. One way to do this is to set its margin to a value of auto.

-- An inline element could be turned to a block element by changing its display property.

Color Theory:

The color wheel is a useful tool to visualize how colors relate to each other - it's a circle where similar hues are neighbors and different hues are farther apart. When two colors are opposite each other on the wheel, they are called complementary colors. They have the characteristic that if they are combined, they "cancel" each other out and create a gray color. However, when placed side-by-side, these colors appear more vibrant and produce a strong visual contrast.

Computer monitors and device screens create different colors by combining amounts of red, green, and blue light. This is known as the RGB additive color model in modern color theory. Red (R), green (G), and blue (B) are called primary colors. Mixing two primary colors creates the secondary colors cyan (G + B), magenta (R + B) and yellow (R + G). You saw these colors in the Complementary Colors challenge. These secondary colors happen to be the complement to the primary color not used in their creation, and are opposite to that primary color on the color wheel. For example, magenta is made with red and blue, and is the complement to green.

Tertiary colors are the result of combining a primary color with one of its secondary color neighbors. For example, red (primary) and yellow (secondary) make orange. This adds six more colors to a simple color wheel for a total of twelve.

There are various methods of selecting different colors that result in a harmonious combination in design. One example that can use tertiary colors is called the split-complementary color scheme. This scheme starts with a base color, then pairs it with the two colors that are adjacent to its complement. The three colors provide strong visual contrast in a design, but are more subtle than using two complementary colors.

hsl(color 0 to 360, saturation, lightness (default is 50%))

background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);

background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);

background: url(https://i.imgur.com/MJAkxbh.png);

transform: scale(1.5);

div:hover {transform: scale(1.5);}

transform: skewX(24deg);

transform: skewY(-24deg);

:before and :after pseudo classes - Not Understood!!

Animation
animation-name: name, animation-duration: value in ms or s,
@keyframe animation-name {
0% {} 50% {} 100% {}
}

animation-fill-mode: forwards,
animation using position: relative; for e.g. for a div
animation-iteration-count: integer or infinite;
animate using different % values in @keyframes for different elements
animation-timing-function: ease, ease-in, ease-out, linear,
cubic-bezier(x1, y1, x2, y2) 0 < x, y < 1 in a 0,0 to 1,1 grid where a constant line is the linear function

Applied Accessibility

Always use an alt tag on images to convey the meaning of the image for the visually impaired
In cases where the images already have a caption/description or are only decorative in nature, the alt tag can be empty i.e. alt=""

Use the h1 to h6 tags with proper hierarchy to convey the proper semantic hierarchy
Use the HTML5 tags like main, header, footer, nav, article, section to convey the proper meaning of the content, which can also be used by a screen reader for the visually impaired.
Wrap content in the <article> element

<div> - groups content
<section> - groups related content
<article> - groups independent, self-contained content

<audio id="meowClip" controls>
<source src="audio/meow.mp3" type="audio/mpeg" />
<source src="audio/meow.ogg" type="audio/ogg" />
</audio>

Improve Chart Accessibility with the figure Element

<figure>
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>

Improve Form Field Accessibility with the label Element

<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>

Wrap Radio Buttons in a fieldset Element for Better Accessibility and a legend tag.

<form>
<fieldset>
<legend>Choose one of these three items:</legend>
  <input id="one" type="radio" name="items" value="one">
  <label for="one">Choice One</label><br>
  <input id="two" type="radio" name="items" value="two">
  <label for="two">Choice Two</label><br>
  <input id="three" type="radio" name="items" value="three">
  <label for="three">Choice Three</label>
</fieldset>
</form>

Standardize Times with the HTML5 datetime Attribute

<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>

Make Elements Only Visible to a Screen Reader by Using Custom CSS

.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}

Improve Readability with High Contrast Text. At least 4.5:1, White to Black is 21:1 and same color on color is 1:1.

Avoid Colorblindness Issues by Using Sufficient Contrast

Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information. Neighbouring colors on the color wheel are prone to failing color blindness tests.

Give Links Meaning by Using Descriptive Link Text, so that screen readers can read out links with meaning instead of simple 'click here' or 'read more'.

Make Links Navigatable with HTML Access Keys

<button accesskey="b">Important Button</button>

Use tabindex to Add Keyboard Focus to an Element

A negative tabindexvalue (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a div used for a pop-up window is activated)

using tabindex also enables the CSS pseudo-class :focus to work on the p tag.

Use tabindex to Specify the Order of Keyboard Focus for Several Elements

The tabindex attribute also specifies the exact tab order of elements. This is achieved when the value of the attribute is set to a positive number of 1 or higher.

Setting a tabindex="1" will bring keyboard focus to that element first. Then it cycles through the sequence of specified tabindex values (2, 3, etc.), before moving to default and tabindex="0" items.

Responsive Web Design Principles

Media Queries consist of a media type, and if that media type matches the type of device the document is displayed on, the styles are applied. You can have as many selectors and styles inside your media query as you want.

@media (max-width: 100px) { /* CSS Rules */ }

@media (min-height: 350px) { /* CSS Rules */ }

Make an image responsive:

img {
max-width: 100%;
display: block;
height: auto;
}

The max-width property of 100% scales the image to fit the width of its container, but the image won't stretch wider than its original width. Setting the display property to block changes the image from an inline element (its default), to a block element on its own line. The height property of auto keeps the original aspect ratio of the image.

Prepare an image for Retina display

The simplest way to make your images appear "retina" (and optimize them for retina displays) is to define their widthand heightvalues as only half of what the original file is.

Here is an example of an image that is only using half of the original height and width:

<style>
img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">

Make Typography Responsive

Instead of using em or px to size text, you can use viewport units for responsive typography. Viewport units, like percentages, are relative units, but they are based off different items. Viewport units are relative to the viewport dimensions (width or height) of a device, and percentages are relative to the size of the parent container element.

The four different viewport units are:

vw: 10vw would be 10% of the viewport's width.
vh: 3vh would be 3% of the viewport's height.
vmin: 70vmin would be 70% of the viewport's smaller dimension (height vs. width).
vmax: 100vmax would be 100% of the viewport's bigger dimension (height vs. width)

Gautam's Corner

Search This Blog