Basic HTML and HTML5

<h1> Tag
<h2> Tag
<p> Tag
e.g. <p>I'm a p tag!</p>

Comments in HTML
Comments in HTML starts with <!-- , and ends with a -->

HTML5 Elements
HTML5 introduces more descriptive HTML tags. These include header, footer, nav, video,
article, section and others.

These tags make your HTML easier to read, and also help with Search Engine Optimization (SEO) and
accessibility.

The main HTML5 tag helps search engines and other developers find the main content of your page.

Images
Note that img elements are self-closing.

e.g.
<img src="https://www.your-image-source.com/your-image.jpg" alt="Author
standing on a beach with two thumbs up.">

Anchor Element
1. External Link
e.g.
<a href="https://freecodecamp.org">this links to freecodecamp.org</a>

2. Internal Link
e.g.
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>

3. Dead Link
e.g.
href="#"

Unordered List
e.g.
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>

Ordered List
e.g.
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

Text Field
e.g.
<input type="text">

1. Placeholder Text
e.g.
<input type="text" placeholder="this is placeholder text">

Form Element
e.g.

<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
</form>
1. Submit Button
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL">
<button type="submit">submit</button>
</form>

2. Required Field
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>

Radio Element

(Need more information)

<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">indoor
 </label>

Checkboxes
e.g.

<label for="loving">
<input id="loving" type="checkbox" name="personality">loving
</label>

Checked Radio and Checkboxes

e.g.

<label>
<input type="radio" name="indoor-outdoor" checked>Indoor
</label>

Div
e.g.

<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagne</li>
</ul>
</div>

Introduction to Basic CSS

Colour of text
e.g.

<h2 style="color:red;">CatPhotoApp</h2>

Note that it is a good practice to end inline style declarations with a ;

Use CSS Selectors to Style Elements

<style>
h2{
color: blue;
}
</style>
Use a CSS Class to Style an Element
e.g.
<style>
.red-text {
color: red;
}
</style>

<h2 class="red-text" >CatPhotoApp</h2>

Change the Font Size of an Element

e.g.
<style>
.red-text {
color: red;
}

p{
font-size: 16px;
}
</style>

Set the Font Family of an Element

e.g.
<style>
.red-text {
color: red;
}

p {
font-size: 16px;
font-family: monospace;
}
</style>

Import a Google Font

e.g.
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"
type="text/css">

<style>

h2{
font-family: Lobster;
}
</style>

Specify How Fonts Should Degrade

There are several default fonts that are available in all browsers. These
generic font families include monospace, serif and sans-serif

When one font isn't available, you can tell the browser to "degrade" to
another font.

For example, if you wanted an element to use the Helvetica font, but degrade
to the sans-serif font when Helvetica wasn't available, you will specify it as
follows:

p {
font-family: Helvetica, sans-serif;
}

Generic font family names are not case-sensitive. Also, they do not need
quotes because they are CSS keywords.

Size Your Images

e.g.

<style>
.smaller-image{
width: 100px;
}
</style>

...
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat"
alt="A cute orange cat lying on its back."></a>

Add Borders Around Your Elements

.thick-green-border{
border-color: green;
border-width: 5px;
border-style: solid;
}

Remember that you can apply multiple classes to an element using its class
attribute, by separating each class name with a space. For example:

<img class="class1 class2">

Add Rounded Corners with border-radius
.thick-green-border {
border-radius: 10px;
border-color: green;
border-width: 10px;
border-style: solid;
}

Note: this challenge allows for multiple possible solutions. For example, you
may add border-radius to either the .thick-green-border class or the .smaller-
image class.

Make Circular Images with a border-radius

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

In addition to pixels, you can also specify the border-radius using a

percentage.

Set the id of an Element

e.g.

<form action="/submit-cat-photo" id="cat-photo-form">

...

</form>

Use an id Attribute to Style an Element

e.g.

#cat-photo-form{
background-color: green;
}
...
<form action="/submit-cat-photo" id="cat-photo-form">

Adjust the Padding of an Element

Three important properties control the space that surrounds each HTML element:
padding, margin, and border.

An element's padding controls the amount of space between the element's

content and its border.

Adjust the Margin of an Element

An element's margin controls the amount of space between an element's border
and surrounding elements.
Use Attribute Selectors to Style Elements
For this challenge, you will use the [attr=value] attribute selector to style
the checkboxes in CatPhotoApp. This selector matches and styles elements with
a specific attribute value. For example, the below code changes the margins of
all elements with the attribute type and a corresponding value of radio:

[type='radio']{
margin: 10px 0px 15px 0px;
}

Override All Other Styles by using Important

e.g.
.pink-text {
color: pink !important;
}

Use RGB values to Color Elements

body {
background-color: rgb(0,0,0);
}

Use CSS Variables to change several elements at once

.penguin {

--penguin-skin: gray;
--penguin-belly: white;
--penguin-beak: orange;
}

Create a custom CSS Variable

To create a CSS Variable, you just need to give it a name with two dashes in
front of it and assign it a value like this:
--penguin-skin: gray;

Attach a Fallback value to a CSS Variable

When using your variable as a CSS property value, you can attach a fallback
value that your browser will revert to if the given variable is invalid.

Note: This fallback is not used to increase browser compatibilty, and it will
not work on IE browsers. Rather, it is used so that the browser has a color to
display if it cannot find your variable.

background: var(--pengiun-skin, black);

Improve Compatibility with Browser Fallbacks
When working with CSS you will likely run into browser compatibility issues at
some point. This is why it's important to provide browser fallbacks to avoid
potential problems.

When your browser parses the CSS of a webpage, it ignores any properties that
it doesn't recognize or support. For example, if you use a CSS variable to
assign a background color on a site, Internet Explorer will ignore the
background color because it does not support CSS variables. In that case, the
browser will use whatever value it has for that property. If it can't find any
other value set for that property, it will revert to the default value, which
is typically not ideal.

This means that if you do want to provide a browser fallback, it's as easy as
providing another more widely supported value immediately before your
declaration. That way an older browser will have something to fall back on,
while a newer browser will just interpret whatever declaration comes later in
the cascade.

.red-box {
background: red; -------- Added Text to improve compatibility
background: var(--red-color);
height: 200px;
width:200px;
}

Use a media query to change a variable

CSS Variables can simplify the way you use media queries.

For instance, when your screen is smaller or larger than your media query
break point, you can change the value of a variable, and it will apply its
style wherever it is used.

:root {
--penguin-size: 300px;
--penguin-skin: gray;
--penguin-belly: white;
--penguin-beak: orange;
}

@media (max-width: 350px) {

:root {

/* add code below */

--penguin-size: 200px;
 --penguin-skin: black;
/* add code above */

}
}

Applied Visual Design

Create Visual Balance Using the text-align Property
Text is often a large part of web content. CSS has several options for how to align it with the text-
align property.

text-align: justify; causes all lines of text except the last line to meet the left and right
edges of the line box.

text-align: center; centers the text

text-align: right; right-aligns the text

And text-align: left; (the default) left-aligns the text.

Adjust the Width of an Element Using the width Property

.fullCard {
width: 245px;
}

Use the strong Tag to Make Text Bold

<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D.
students at <strong>Stanford University.</strong></p>

Use the u Tag to Underline Text

<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D.
students</u> at <strong>Stanford University</strong>.</p>

Use the em Tag to Italicize Text

<p><em>Google was founded by Larry Page and Sergey Brin while they were
<u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>

Use the s Tag to Strikethrough Text

With the s tag, the browser applies the CSS of text-decoration: line-
through; to the element.
<h4><s>Google</s>Alphabet</h4
Create a Horizontal Line Using the hr Element
Note: In HTML, hr is a self-closing tag, and therefore doesn't need a separate closing tag.

<hr>

Adjust the Size of a Header Versus a Paragraph Tag

h4 {
font-size: 27px;
}

Add a box-shadow to a Card-like Element

The box-shadow property applies one or more shadows to an element.

The box-shadow property takes values for offset-x (how far to push the shadow horizontally
from the element), offset-y (how far to push the shadow vertically from the element), blur-
radius, spread-radius and a color value, in that order. The blur-radius and spread-
radius values are optional.

Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent
black colors:

.thumbnail{
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

Decrease the Opacity of an Element

The opacity property in CSS is used to adjust the opacity, or conversely, the
transparency for an item.

A value of 1 is opaque, which isn't transparent at all.

A value of 0.5 is half see-through.
A value of 0 is completely transparent.

.links {
opacity: 0.7;
}

Use the text-transform Property to Make Text Uppercase

The following table shows how the different text-transform values change the example text
"Transform me".

Value Result
lowercase "transform me"
 Value Result
uppercase "TRANSFORM ME"
capitalize "Transform Me"
initial Use the default value
inherit Use the text-transform value from the parent element
none Default: Use the original text

h4 {
text-transform: uppercase;
}

Set the font-weight

The font-weight property sets how thick or thin characters are in a section
of text.
h1 {
font-weight: 800;
}

Set the line-height

CSS offers the line-height property to change the height of each line in a
block of text. As the name suggests, it changes the amount of vertical space
that each line of text gets.

p {
font-size: 16px;
line-height: 25px;
}

Adjust the Hover State of an Anchor Tag

This challenge will touch on the usage of pseudo-classes. A pseudo-class is a
keyword that can be added to selectors, in order to select a specific state of
the element. For example, the styling of an anchor tag can be changed for its
hover state using the :hover pseudo-class selector.

a {
color: #000;
}
a:hover{
color: red;
}

Change an Element's Relative Position

When the position of an element is set to relative, it allows you to specify
how CSS should move it relative to its current position in the normal flow of
the page. It pairs with the CSS offset properties of left or right, and top
or bottom.
h2 {
position: relative;
top: 15px;
}

Lock an Element to the Browser Window with Fixed Positioning

One key difference between the fixed and absolute positions is that an element
with a fixed position won't move when the user scrolls.

#navbar {
position: fixed;
}

Push Elements Left or Right with the float Property

The next positioning tool does not actually use position, but sets the float
property of an element. 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.

#left {
float: left;
width: 50%;
}

Change the Position of Overlapping Elements with the z-index

Property

When elements are positioned to overlap, the element coming later in the HTML
mark-up will, by default, appear on the top of the other elements. However,
the z-index property can specify the order of how elements are stacked on top
of one another. It must be an integer (i.e. a whole number and not a decimal),
and higher values for the z-index property of an element move it higher in the
stack than those with lower values.

.first {
z-index: 2;
}
Center an Element Horizontally Using the margin Property

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.

This method works for images, too. Images are inline elements by default, but
can be changed to block elements when you set the display property to block.

div {
margin: auto;
}

Adjust the Hue of a Color

.blue {
background-color: hsl(240, 100%, 50%);
}

Create a Gradual CSS Linear Gradient

background: linear-gradient(gradient_direction, color 1, color 2, color 3,
...);
The first argument specifies the direction from which color transition starts
- it can be stated as a degree, where 90deg makes a vertical gradient and
45deg is angled like a backslash. The following arguments specify the order of
colors used in the gradient.

div{
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
}

Use a CSS Linear Gradient to Create a Striped Element

The repeating-linear-gradient() function is very similar to linear-
gradient() with the major difference that it repeats the specified
gradient pattern. repeating-linear-gradient() accepts a variety of values,
but for simplicity, you'll work with an angle value and color stop values
in this challenge.

The angle value is the direction of the gradient. Color stops are like
width values that mark where a transition takes place, and are given with
a percentage or a number of pixels.

In the example demonstrated in the code editor, the gradient starts with
the color yellow at 0 pixels which blends into the second color blue at 40
pixels away from the start. Since the next color stop is also at 40
pixels, the gradient immediately changes to the third color green, which
itself blends into the fourth color value red as that is 80 pixels away
from the beginning of the gradient.

For this example, it helps to think about the color stops as pairs where
every two colors blend together.

0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px

If every two color stop values are the same color, the blending isn't
noticeable because it's between the same color, followed by a hard
transition to the next color, so you end up with stripes.

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

Use the CSS Transform scale Property to Change the Size of an

Element
.ball {
transform: scale(1.5);
}

Use the CSS Transform Property skewX to Skew an Element Along

the X-Axis
#bottom {
transform: skewX(24deg);
}

Use the CSS Transform Property skewY to Skew an Element Along

the Y-Axis

#bottom {
transform: skewY(24deg);
}
Create a Graphic Using CSS
.center
{
background-color: transparent;
 border-radius: 50%;
box-shadow: 25px 10px 0px 0px blue;
}
Create a More Complex Shape Using CSS and HTML
<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}
.heart::after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart::before {
content:"" ;
background-color: pink;
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
</style>
<div class = "heart"></div>

How the CSS @keyframes and animation Properties Work

<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
 border-radius: 5px;
}

#rect {
animation-name: rainbow;
animation-duration: 4s;
}

@keyframes rainbow{

0%{
background-color: blue;
}

50%{
background-color: green;
}

100%{
background-color: yellow;
}

</style>
<div id="rect"></div>

Use CSS Animation to Change the Hover State of a Button

<style>
button {
border-radius: 5px;
color: white;
background-color: #0F5897;
padding: 5px 10px 8px 10px;
}

button:hover {
animation-name: background-color;
animation-duration: 500ms;
}

@keyframes background-color {
100% {
background-color: #4791d0;
}
 }
</style>

<button>Register</button>

Modify Fill Mode of an Animation

button:hover {
animation-name: background-color;
animation-duration: 500ms;
/* add your code below this line */
animation-fill-mode: forwards;
/* add your code above this line */
}

Create Movement Using CSS Animation

When elements have a specified position, such as fixed or relative, the CSS
offset properties right, left, top, and bottom can be used in animation rules
to create movement.

div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
position: relative;
}

#rect {
animation-name: rainbow;
animation-duration: 4s;
}

@keyframes rainbow {
0% {
background-color: blue;
left: 0px;

}
50% {
background-color: green;
left: 25px;

}
100% {
background-color: yellow;
left: -25px;

}
}

Animate Elements Continually Using an Infinite Animation Count

#ball {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}

@keyframes bounce{
0% {
top: 0px;
}
50% {
top: 249px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}

Change Animation Timing with Keywords

In CSS animations, the animation-timing-function property controls how

quickly an animated element changes over the duration of the animation. If
the animation is a car moving from point A to point B in a given time
(your animation-duration), the animation-timing-function says how the car
accelerates and decelerates over the course of the drive.

There are a number of predefined keywords available for popular options.

For example, the default value is ease, which starts slow, speeds up in
the middle, and then slows down again in the end. Other options include
ease-out, which is quick in the beginning then slows down, ease-in, which
is slow in the beginning, then speeds up at the end, or linear, which
applies a constant animation speed throughout.

#ball1 {
left:33%;
animation-timing-function: linear;
}
#ball2 {
left:66%;
animation-timing-function: ease-out;
}
How Bezier Curves Work
In CSS animations, Bezier curves are used with the cubic-bezier function.
The shape of the curve represents how the animation plays out. The curve
lives on a 1 by 1 coordinate system. The X-axis of this coordinate system
is the duration of the animation (think of it as a time scale), and the Y-
axis is the change in the animation.

The cubic-bezier function consists of four main points that sit on this 1
by 1 grid: p0, p1, p2, and p3. p0 and p3 are set for you - they are the
beginning and end points which are always located respectively at the
origin (0, 0) and (1, 1). You set the x and y values for the other two
points, and where you place them in the grid dictates the shape of the
curve for the animation to follow. This is done in CSS by declaring the x
and y values of the p1 and p2 "anchor" points in the form: (x1, y1, x2,
y2). Pulling it all together, here's an example of a Bezier curve in CSS
code:

animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

In the example above, the x and y values are equivalent for each point (x1
= 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry
class, results in a line that extends from the origin to point (1, 1).
This animation is a linear change of an element during the length of an
animation, and is the same as using the linear keyword. In other words, it
changes at a constant speed.