Coding

Define the title of a book

<cite>Purple Hibiscus</cite> by Adichie <cite> Defines the title of a work

Password

<input type="password"> Characters typed will be hidden.

Check a Box by Default

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

Size your image

<style> .larger-image { width: 500px; } </style> OR <img src="url" alt="alt text" width=" " height=" ">

Adjusting the Tone of a Color

The hsl() option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of hsl() stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it. Add a background-color to the nav element so it uses the same cyan hue, but has 80% saturation and 25% lightness values to change its tone and shade.

Main

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

Lock an Element to the Browser Window with Fixed Positioning

The next layout scheme that CSS offers is the fixed position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer "realize" where it is positioned, which may require some layout adjustments elsewhere. One key difference from the absolute position is that the element won't move when the user scrolls. The navigation bar in the code is labeled with an id of navbar. Change its position to fixed, and offset it 0 pixels from the top and 0 pixels from the left. Notice the (lack of) impact to the h1 position, it hasn't been pushed down to accommodate the navigation bar and would need to be adjusted separately.

Changing a variable for a specific area

When you create your variables in :root they will set the value of that variable for the whole page. You can then over-write these variables by setting them again within a specific element. .penguin {--penguin-belly: white} Here, only the penguin's belly changed from pink to white, leaving the cheeks still pink (as dictated by the --penguin-belly: pink in the :root selector) and now visible along with the rest.

Centralise text

<h1 style="text-align: center;"> </h1> OR <style> h1 {text-align: center;} </style> Use text-align for text alignment

Require a Field

<input type="text" required>

Ordered or Unordered List

<ol> <li>Text</li> <li> Text</li> </ol> <ul> <li>Text</li> <li> Text</li> </ul>

Add tool-tip or extra info

<p title="I'm a tooltip"> This is a paragraph. </p> Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:

Large Multi-line textbox

<textarea rows="5" cols="20"> </textarea>

Center an Element Horizontally using margin

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. Center the div on the page by adding a margin property with a value of auto.

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. These say how many pixels, percentages, or ems to move the item away from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom: p {position: relative; bottom: 10px;} Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position. CSS treats each HTML element as its own box, which is usually referred to as the CSS Box Model. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the normal flow of a document, but CSS offers the position property to override it.

Attaching a Fallback value to a CSS Variable

When using your variable as a CSS property value, you can attach a fallback value that your page will revert to if for some reason it can't get your variable to work. It could be that someone is using an older browser that hasn't yet adopted CSS Variables, or perhaps their device doesn't support the value you gave the variable. Here's how you do it: {background: var(--penguin-skin, black);} This will set background to black if there is a problem with your variable. Note that this can be useful for debugging.

Cascading CSS variables

When you create a variable, it becomes available for you to use inside the element in which you create it and within any elements nested within it. This effect is known as cascading and because of this, CSS variables are often defined in the :root element which is a container for your entire HTML document, as an html element is for the body element. By creating your variables in :root, they will be available throughout the whole web page. :root {--penguin-belly: pink} This value will thus cascade down to change the value to pink, anywhere the variable is used.

Using Attribute Selectors to Style Elements

[type="radio"] {margin: 20px 0px 20px 0px;} The above code changes the margins of all elements with the attribute type and a corresponding value of radio. This is called the [attr=value] attribute selector. This selector matches and styles elements with a specific attribute value. Note: We've done ID and class selectors. This is another CSS Selector you can use to select custom groups of elements to style.

Wrap Content in the article Element

article is another one of the new HTML5 elements that adds semantic meaning to your markup. Article is a sectioning element, and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles. Ask yourself if you removed all surrounding context, would that content still make sense? Note about section and div The section element is also new with HTML5, and has a slightly different semantic meaning than article. An article is for standalone content, and a section is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the article, then each chapter is a section. When there's no relationship between groups of content, then use a div. <div> - groups content <section> - groups related content <article> - groups independent, self-contained content

Using RGB Values to Colour Elements

body {background-color: rgb(255, 165, 0);} Above is for orange (note: leave no space between rgb and the bracket or it won't work). With RGB you specify the brightness of each color with a number between 0 and 255. Note: The two digits for one color equal 16 X 16, which gives us 256 total values. So RGB, which starts counting from zero, has the exact same number of possible values as hex code.

Prioritizing/Overriding One Style Over Another

inline styling > id > subsequent class > class > body e.g of inline styling: <h1 style="color: green;"> N/B: Applying multiple class attributes to a HTML element is done with a space in-between: class="class1 class2" It doesn't matter which order the classes are listed in the HTML element. However, in the <style> section, the second or last class declaration will always take precedence over the first or all previous ones. Because .blue-text is declared second, it overrides the attributes of .pink-text. Also, it doesn't matter whether you declare the id CSS above or below the class(es), since id attribute will always take precedence over class.

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. @keyframes rainbow { 0% {background-color: blue; top: 0px; left: 0;} 50% {background-color: green; top: 50px; left: 25px;} 100% {background-color: yellow; top: 0px; left: -25px;}} Note: set the id's position to relative first.

Styling an element using an id attribute

#cat-photo-element { background-color: green; } An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied. Note that inside your style element, you always reference classes by putting a . in front of their names. You always reference ids by putting a # in front of their names.

Overriding all other styles - Most Powerful of all

.pink-text {color: pink !important;} When you absolutely need to be sure that an element has specific CSS, you can use !important Remember that our pink-text class was overridden by subsequent class declarations, id declarations, and inline styles. Let's add the keyword !important to your pink-text element's color declaration to make 100% sure that your h1 element will be pink.

Structure of HTML document

<! DOCTYPE html> <html> <head> </head> <body> </body> </html>

Comment out text/element

<!-- Comment out text to be invisible --> Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors:

Creating Internal Links

<a href="#contacts-header"> Contacts</a> <h2 id="contacts-header">Contacts</h2>

Define the contact info of the article owner/author of a document or article

<address> Written by Mary-Brenda Akoda.<br> Visit us at:<br> theaflangproject.com<br> Ikot Nkebre, 8 Miles<br> Calabar, Nigeria </address> The <address> element is usually displayed in italic. Most browsers will add a line break before and after the element.

Change text direction to go from right to left

<bdo dir="rtl">text</bdo> <bdo> Defines the text direction. You must specify the direction with dir attribute.

Create Form Element and Add Submit Button

<form action="submission url"> <button type="submit"> Submit</button> </form> OR <button>Text</button>

Separate content or define a change in an HTML page

<h1>This is heading 1</h1> <p>This is some text.</p> <hr> The <hr> tag defines a thematic break in an HTML page and is most often displayed as a horizontal rule.

ID an element

<h2 id="id-name"> An id is not reusable and should only be applied to one element.as per best practice. There are several benefits to using id attributes: to style a single element and later you'll learn to use them to select and modify specific elements with JavaScript.

Declare document language

<html lang="en-US"> Declaring a language is important for accessibility applications (screen readers) and search engines

Image

<img src="url" alt="alternative-text"> Self-closing and url must start with http(s)://

Date

<input type="date"> To add time: <input type="datetime-local">

Creating Text Field and Adding Placeholder

<input type="text"> <input type="text" placeholder="placeholder text"> Self-closing

Underline a text that fills in the blank, strikethrough another and highlight the last

<ins>Underline</ins> a text, <del>strikethrough</del> another and <mark>highlight</mark> the last <ins> Defines inserted text/underlined <del> Defines deleted text/strikethrough <mark> Defines marked/highlighted text

Create a Set of Radio Buttons or Checkbox Buttons

<label for="indoor"> <input id="indoor" type="radio" name="indoor-outdoor"> Indoor </label> <label for="outdoor"> <input id="outdoor" type="radio" name="indoor-outdoor">Outdoor </label> Label - to associate input with surrounding label element Name - same name attribute for all related radio buttons/a group, allowing only one answer

Start a new line

<p>This is<br>a paragraph<br>with line breaks.</p> Use <br> if you want a line break (a new line) without starting a new paragraph:

Preserve spaces and line breaks in a poem

<pre> My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. </pre> The HTML <pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

Dropdown Menu

<select> <option> Text </option> <option> Text </option> </select>

Using CSS Class to Style Elements

<style> .blue-text { color: blue; } </style> <h2 class="blue-text">CatPhotoApp</h2>

Add borders around elements

<style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style> OR <style> .thin-red-border { border: 5px solid red; } </style> CSS borders have properties like style, color and width

Add rounded corners

<style> .thin-red-border { border-radius: 10px; } </style> Replace the pixel with 50% to make a perfect circle

Styling (and Inheriting Styles from) the Body Element

<style> body { background-color: black; color: green; font-family: monospace; } </style> <h1>Hello World</h1> The text in the document will thus be green with monospace font.

CSS Selector

<style> h2 {color: red;} </style>

Adjusting the Hover State of an Anchor Tag

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. Here's the CSS to change the color of the anchor tag to red during its hover state: a:hover {color: red;}

Using a custom CSS Variable

After you create your variable, you can assign its value to other CSS properties by referencing the name you gave it. {background: var(--penguin-skin);} This will change the background of whatever element you are targeting to gray because that is the value of the --penguin-skin variable. Note that styles will not be applied unless the variable names are an exact match and there is no space between var and the bracket.

Margin

An element's margin controls the amount of space between an element's border and surrounding elements. When you increase a box's margin, it will increase the distance between its border and surrounding elements, making it appear smaller (more space between the box and its surrounding). If you set an element's margin to a negative value, the element will grow larger. A box's margin of -15px may likely fill the entire horizontal width of the box around it.

Animate Elements Continually

Another animation property is the animation-iteration-count, which allows you to control how many times you would like to loop through the animation. Here's an example: animation-iteration-count: 3; In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite. To keep the ball bouncing on the right on a continuous loop, change the animation-iteration-count property to infinite.

Create a Gradual CSS Linear Gradient

Applying a color on HTML elements is not limited to one flat hue. CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the background property's linear-gradient() function. Here is the general syntax: background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...); Example: backgroun: linear-gradient(35deg, #ccffff, #ffcccc); background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255)); 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.

Create a Graphic Using CSS

By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the box-shadow property that sets the shadow of an element, along with the border-radius property that controls the roundness of the element's corners. You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see. background-color: transparent; border-radius: 50%; box-shadow: 25px 10px 0px 0px blue;

Basic CSS: 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. In the :root selector of the media query, change it so --penguin-size is redefined and given a value of 200px. Also, redefine --penguin-skin and give it a value of black. Then resize the preview to see this change in action.

Adding different padding or margins to each side of an element

CSS allows you to control the padding of all four individual sides of an element with the padding-top, padding-right, padding-bottom, and padding-left properties or using Clockwise Notation in that order: {padding: 10px 20px 10px 20px;} Same applies to margin.

Create a More Complex Shape Using CSS and HTML (Heart)

First, you need to understand the ::before and ::after pseudo-elements. These pseudo-elements are used to add something before or after a selected element. For the ::before and ::after pseudo-elements to function properly, they must have a defined content property. This property is usually used to add things like a photo or text to the selected element. When the ::before and ::after pseudo-elements are used to make shapes, the content property is still required, but it's set to an empty string. .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;}

Using Abbreviated Hex Code

For example, red's hex code #FF0000 can be shortened to #F00. This shortened form gives one digit for red, one digit for green, and one digit for blue. This reduces the total number of possible colors from more than 16 million to around 4,000. But browsers will interpret #FF0000 and #F00 as exactly the same color.

Create Visual Direction by Fading an Element from Left to Right

For this challenge, you'll change the opacity of an animated element so it gradually fades as it reaches the right side of the screen. In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the @keyframes rule. Target the element with the id of ball and add the opacity property set to 0.1 at 50%, so the element fades as it moves to the right. @keyframes fade {50% {left: 60%; opacity: 0.1;}}

Creating a custom CSS Variable

Give it a name with two dashes in front of it and assign it a value like this: {--penguin-skin: gray;} Now you can use that variable elsewhere in your CSS to change the value of other elements to gray.

Improve Chart Accessibility with the figure Element

HTML5 introduced the figure element, along with the related figcaption. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the figure. For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users. Here's an example - note that the figcaption goes inside the figure tags and can be combined with other elements: <section> <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> </section>

Header

The header tag is used to wrap introductory information or navigation links for its parent tag, and works well around content that's repeated at the top on multiple pages. header shares the embedded landmark feature you saw with main, allowing assistive technologies to quickly navigate to that content. Note: header is meant for use in the body tag of your HTML document. This is different than the head element, which contains the page's title, meta information, etc.

Line-height

The line-height property changes 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. E.g. Add a line-height property to the p tag and set it to 25px.

Make Screen Reader Navigation Easier with the nav Landmark

The nav element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page. If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a nav tag as well. Using a footer is sufficient.

Skew an Element Along the X-Axis or Y-Axis

The next function of the transform property is skewX(), which skews the selected element along its X (horizontal) axis by a given degree. Same applies to skewY() The following code skews the paragraph element by -32 degrees along the X-axis. p {transform: skewX(-32deg);} E.g. #bottom {transform: skewX(24deg);} This slants the box.

Lock an Element to its Parent with Absolute Positioning

The next option for the CSS position property is absolute, which locks the element in place relative to its parent container. Unlike the relative position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position. One nuance with absolute positioning is that it will be locked relative to its closest positioned ancestor. If you forget to add a position rule to the parent item, (this is typically done using position: relative;), the browser will keep looking up the chain and ultimately default to the body tag. #searchbar {position: absolute; top: 50px; right: 50px;} section {position: relative;}

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. The given markup would work well as a two-column layout, with the section and aside elements next to each other. Give the #left item a float of left and the #right item a float of right

Use Google Fonts and Specify how fonts should degrade

To import a Google Font, you can copy the font(s) URL from the Google Fonts library and then paste it into the top of your code editor (before the opening style element): <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> <style> h2 {font-family: Lobster, sans-serif;} </style> Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the "Open Sans" font, but not to use the Lobster font. Generic names aren't and don't need quotes because they are CSS keywords.

Absolute versus Relative Units

Two main types of length units. Relative units, such as em or rem, are relative to another length value. em is relative to the font-size of an element (2em means 2 times the current font's size). If you use it to set the font-size property itself, it's relative to the parent's font-size (If the body text size is 16 px, then 150% or 1.5 EM will be 24 px (1.5 * 16). Absolute units tie to physical units of length. E.g, in and mm. They approximate the actual measurement on a screen (fixed), but differ depending on screen's resolution (not recommended for screen use).

Change the Position of Overlapping Elements

When elements are positioned to overlap, the element coming later in the HTML markup 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. Add a z-index property to the element with the class name of first (the red rectangle) and set it to a value of 2 so it covers the other element (blue rectangle). .first { background-color: red; position: absolute; z-index: 2;} .second { background-color: blue; position: absolute; left: 40px; top: 50px; z-index: 1;}

Move a Relatively Positioned Element

The CSS offsets of top or bottom, and left or right tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the top offset moved the h2 downwards. Likewise, using a left offset moves an item to the right.

Mark an abbreviation

The HTML <abbr> element defines an abbreviation or an acronym. Marking abbreviations can give useful information to browsers, translation systems and search-engines. <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

Make a short and long quotation

The HTML <q> element defines a short quotation. Browsers usually insert quotation marks around the <q> element. The HTML <blockquote> element defines a section that is quoted from another source. Browsers usually indent <blockquote> elements and you must cite source with cite attribute. <blockquote cite="source url"> Text </blockquote>

Using CSS Animation including in hover state

The animation properties control how the animation should behave and the @keyframes rule controls what happens during that animation. There are eight animation properties but we'll cover the two most important ones first: animation-name sets the name of the animation, which is later used by @keyframes to tell CSS which rules go with which animations. animation-duration sets the length of time for the animation. @keyframes is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific "frames" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. E.g. #rect { animation-name: rainbow; animation-duration: 4s;} @keyframes rainbow { 0% {background-color: blue;} 50% {background-color: green;} 100% {background-color: yellow;} } You can set properties for the element for any percentage between 0% and 100%.

Change Animation Timing with Keywords

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. E.g. 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. For the elements with id of ball1 and ball2, add an animation-timing-function property to each, and set #ball1 to linear, and #ball2 to ease-out. Notice the difference between how the elements move during the animation but end together, since they share the same animation-duration of 2 seconds.

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: box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

Font-weight

The font-weight property sets how thick or thin characters are in a section of text. Set the font-weight of the h1 tag to 800. Set the font-weight of the h2 tag to 600.

Learn How Bezier Curves Work

CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves. 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, e.g. 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 which 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.

Adjust the Hue of a Color

Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the hsl() property as an alternative way to pick a color by directly stating these characteristics. Hue is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In hsl(), hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360. Saturation is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated. Lightness is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color. Here are a few examples of using hsl() with fully-saturated, normal lightness colors: Color HSL red hsl(0, 100%, 50%) yellow hsl(60, 100%, 50%) green hsl(120, 100%, 50%) cyan hsl(180, 100%, 50%) blue hsl(240, 100%, 50%) magenta hsl(300, 100%, 50%) .green {background-color: hsl(120, 100%, 50%);} .cyan {background-color: hsl(180, 100%, 50%);}

Improve Accessibility of Audio Content with the audio Element

HTML5's audio element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript. The audio tag supports the controls attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, its presence on the tag turns the setting on. Here's an example: <audio id="meowClip" controls> <source src="audio/meow.mp3" type="audio/mpeg" /> <source src="audio/meow.ogg" type="audio/ogg" /> </audio> Note Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them. <audio controls> <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/> </audio> Note The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.

Complementary colors

Here are three colors created using the split-complement scheme: Color Hex Code orange #FF7D00 cyan #00FFFF raspberry #FF007D

Using Hex code for specific colours

Hexadecimals (or hex) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in hexadecimal, giving us 16 total possible values. In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. The digit 0 is the lowest number in hex code, and represents a complete absence of color. The digit F is the highest number in hex code, and represents the maximum possible brightness. For example, #000000 is black and is also the lowest possible value.

Improve Form Field Accessibility with the label Element

Improving accessibility with semantic HTML markup applies to using both appropriate tag names as well as attributes. The label tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The for attribute on a label tag explicitly associates that label with the form control and is used by screen readers. You learned about radio buttons and their labels in a lesson in the Basic HTML section. In that lesson, we wrapped the radio button input element inside a label element along with the label text in order to make the text clickable. Another way to achieve this is by using the for attribute as explained in this lesson. The value of the for attribute must be the same as the value of the id attribute of the form control. Here's an example: <section> <form> <label for="name">Name:</label> <input type="text" id="name" name="name"> </form> </section>

Inserting Line Spaces

Insert the HTML entity &nbsp; wherever you would like to add a single space ("nbsp" stands for non breaking space). Two spaces - Type in &ensp; Four spaces - Type in &emsp; Tab - Type in &nbsp;&nbsp;&nbsp;&nbsp;

Make emphasis and italicise a text

Make <em>emphasis</em> and <i>italicise</i> a text. <em> Defines emphasized text <i> Defines italic text

Make a text bold and important

Make a text <b>bold</b>and <strong>important</strong> <b> Defines bold text <strong> Defines important text

Make one text smaller, write the 2 in H20 properly and write the square in 2 square in numeral and properly.

Make one text <small>smaller</small>, write the 2 in H₂0 properly and write the square in 2 square, 2², in numeral and properly. <small> Defines smaller text <sub> Defines subscripted text <sup> Defines superscripted text

Prevent the animation from resetting

Notice how the animation resets after 500ms has passed, causing the button to revert back to the original color. You want the button to stay highlighted. This can be done by setting the animation-fill-mode property to forwards. The animation-fill-mode specifies the style applied to an element when the animation has finished. You can set it like so: animation-fill-mode: forwards; E.g. button:hover { animation-name: background-color; animation-duration: 500ms; animation-fill-mode: forwards;}

Create Texture by Adding a Subtle Pattern as a Background Image

One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The background property supports the url() function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses. background: url("https://i.imgur.com/MJAkxbh.png");

Use a Bezier Curve to Move a Graphic

Similar animation progressions to the ease-out keyword can be achieved by using a custom cubic Bezier curve function. In general, changing the p1 and p2 anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the ease-out style: animation-timing-function: cubic-bezier(0, 0, 0.58, 1); Remember that all cubic-bezier functions start with p0 at (0, 0) and end with p3 at (1, 1). In this example, the curve moves faster through the Y-axis (starts at 0, goes to p1 y value of 0, then goes to p2 y value of 1) than it moves through the X-axis (0 to start, then 0 for p1, up to 0.58 for p2). As a result, the change in the animated element progresses faster than the time of the animation for that segment. Towards the end of the curve, the relationship between the change in x and y values reverses - the y value moves from 1 to 1 (no change), and the x values move from 0.58 to 1, making the animation changes progress slower compared to the animation duration.

Make Screen Reader Navigation Easier with the footer Landmark

Similar to header and nav, the footer element has a built-in landmark feature that allows assistive devices to quickly navigate to it. It's primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page.

Target

Specifies where to open link. The value "_blank" opens it in a new tab. <a href="external link or #" target="_blank">text</a>

Make a CSS Heartbeat

The one-second long heartbeat animation consists of two animated pieces. The heart elements (including the :before and :after pieces) are animated to change size using the transform property, and the background div is animated to change its color using the background property. Keep the heart beating by adding the animation-iteration-count property for both the back class and the heart class and setting the value to infinite. The heart:before and heart:after selectors do not need any animation properties. <style> .back { position: fixed; padding: 0; margin: 0; top: 0; left: 0; width: 100%; height: 100%; background: white; animation-name: backdiv; animation-duration: 1s; animation-iteration-count: infinite;} .heart { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: pink; height: 50px; width: 50px; transform: rotate(-45deg); animation-name: beat; animation-duration: 1s; animation-iteration-count: infinite;} .heart:after { background-color: pink; content: ""; border-radius: 50%; position: absolute; width: 50px; height: 50px; top: 0px; left: 25px;} .heart:before { background-color: pink; content: ""; border-radius: 50%; position: absolute; width: 50px; height: 50px; top: -25px; left: 0px;} @keyframes backdiv {50% {background: #ffe6f2;}} @keyframes beat { 0% {transform: scale(1) rotate(-45deg);} 50% {transform: scale(0.6) rotate(-45deg);} } </style> <div class="back"></div> <div class="heart"></div>

Adjust 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.

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. background: repeating-linear-gradient(45deg, yellow 0px, blue 40px, green 40px, red 80px); 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. Make stripes by changing the repeating-linear-gradient() to use a gradient angle of 45deg, then set the first two color stops to yellow, and finally the second two color stops to black. background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);

div vs span tags

The span tag is like the div tag. It has no meaning at all and is mostly used for styling by using an id or class. The difference between the two is that div is a block element, It's on a seperate line. span however is an inline element, meaning that it can be on a line with other elements. Example: <span>I will display inline next to the b tag</span><b>I will display next to the span tag</b> <div>I will display as a block element on my own line, above the b tag</div><b>I will display beneath the div tag</b>

Transform a text

The text-transform property in CSS is used to change the appearance of text. It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements. Value Result lowercase "transform me" 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

Scale an Element on Hover using the CSS Transform scale Property

The transform property has a variety of functions that lets you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as :hover that specify a certain state of an element, the transform property can easily add interactivity to your elements. Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them: p:hover {transform: scale(2.1);} Add a CSS rule for the hover state of the div and use the transform property to scale the div element to 1.1 times its original size when a user hovers over it.

Animate Elements at Variable Rates

There are a variety of ways to alter the animation rates of similarly animated elements. 1. applying an animation-iteration-count property and setting @keyframes rules. E.g. the animation on the right consists of two "stars" that each decrease in size and opacity at the 20% mark in the @keyframes rule, which creates the twinkle animation. You can change the @keyframes rule for one of the elements so the stars twinkle at different rates; e.g. at 50%. You can achieve the same goal by manipulating the animation-duration of multiple elements. 2. To make the 3 stars in the e.g. twinkle at different rates, you can set the animation-duration property to different values for each element. E.g. to 1s, 0.9s, and 1.1s, respectively.

Make Motion More Natural Using a Bezier Curve

This challenge animates an element to replicate the movement of a ball being juggled. Prior challenges covered the linear and ease-out cubic Bezier curves, however neither depicts the juggling movement accurately. You need to customize a Bezier curve for this. The animation-timing-function automatically loops at every keyframe when the animation-iteration-count is set to infinite. Since there is a keyframe rule set in the middle of the animation duration (at 50%), it results in two identical animation progressions at the upward and downward movement of the ball. The following cubic Bezier curve simulates a juggling movement: cubic-bezier(0.3, 0.4, 0.5, 1.6); Notice that the value of y2 is larger than 1. Although the cubic Bezier curve is mapped on an 1 by 1 coordinate system, and it can only accept x values from 0 to 1, the y value can be set to numbers larger than one. This results in a bouncing movement that is ideal for simulating the juggling ball.

Padding

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. When you increase the padding, it increases the distance (padding) between the text and the border around it.

Change the Size of an Element using the CSS Transform scale Property

To change the scale of an element, CSS has the transform property, along with its scale() function. The following code example doubles the size of all the paragraph elements on the page: p {transform:scale(2);} Increase the size of the element with the id of ball2 to 1.5 times its original size. .ball2 {transform: scale(1.5);}