HTML AND CSS GUIDE
Tags: webdev, programming, tutorial
Published: 2021-11-29 20:50:53

This guide is a walkthrough on how to create a simple website using html and CSS. I will list the steps to follow and explain them.
**What is html**
html is a markup language that is considered as a building block for the web.
Designing the layout of your website using html
First step is to instantiate your website as DOCTYPE html, wrap all elements inside a html tag define the basic layout with a head and body tag.

```
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body
</html> 
```
Most html tags require an opening and closing tag with a few exceptions such as img tag which can otherwise be self closing.
head tag
Inside the head tag we can add external links 
**Semantic HTML**
This concept introduces meaning to the code for both the developer and the browser.
The following semantic elements can be used in a web browser as shown 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3lfng7m5ob57at65lt5.png)
The section element defines a specific section of the html document while the article element specifies independent, self-contained content. These two elements can be interchangeable be nested inside the other.
The nav element is intended for a major block of navigation links e.g

```
<nav>
<ul>
<li><a href="home">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
</ul>
</nav>
```
 
href is a html attribute used to reference the location of the element

```
<details> and <summary>
```
these semantic elements act as an accordion which is a way to fill lengthy content is small space

```
<details open>
  <summary>Tutorial</summary>
  <p>Extensive HTML and CSS documentation and tutorial</p>
</details>
```

**CSS**
_css specificity_
This is how the browser the most specific rules that should be applied to a html element when there are two or more conflicting rules.
specificity based on selector type

- Universal Selector(*)
this selector has no specificity and therefore any rule that follows will override it.

- Element / pseudo-element selector
(div, ::selection)
has slightly higher specificity and can only override the universal selector.
- Class / pseudo-class selector

- ID selector
-Inline style attribute 
this specificity will override ant CSS rule and take effect. It has the highest specificity.

## CSS Units
They are divided into two: absolute and relative units
_Absolute units_ are fixed values therefore they appear exactly as their value on every display screen size.
Example units include: cm, pt, px, pc, mm
Relative units 
they are highly preferable for responsive web design over absolute units because of their flexibility.
_em vs rem_
em unit is assigned depending on the font size of the parent element while rem is dependent on the root element's font size.
use CSS columns to set the number and widths oc columns in a single declaration. 

**

## Css Animations
**
Define the animation css styles within the @keyframes which will gradually transform the element to the animation style.
The keyframe name is then bounded to a CSS element for the animation to work
Animations can also be defined within svg's as follows

```
<div class="pattern1">
	<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
		<defs>
			<pattern id="polygons" x="0" y="0" width="28" height="49" patternUnits="userSpaceOnUse">
				<path id="flipper" style="fill:#ff003c;fill-rule:evenodd; fill-opacity:0.9; fill-rule:nonzero;" d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"> </path>
			</pattern>
		</defs>
		<rect x="0" y="0" width="100%" height="100%" fill="url(#polygons)"></rect>
		<animate xlink:href="#flipper" attributeName="fill" dur="20s" keyTimes="0; .15; .3; .45; .6; .75; .9; 1" keySplines=".42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;" repeatCount="indefinite" values="#ff003c; #ffae00; #ff6200; #00e6ff; #ff006f; #f700ff; #7b00ff; #0011ff;" />
	

	</svg>
	<div class="glass"></div>
	</div>
```

`
<style>
:root {
	--polygonColor: #0015ff;
}
body,
html {
	height: 100%;
	display: grid;
	background-color: #fff;
	overflow: hidden;
	background-image: radial-gradient(
		circle closest-corner at center,
		hsl(11, 10%, 50%),
		hsl(3, 8%, 30%),
		hsl(160, 0%, 0%)
	);
}

.pattern1 {
	margin: auto;
	background-color: #151515;

	width: 40rem;
	height: 20rem;
	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.15);

	backdrop-filter: blur(5px);
}

</style>
<div class="pattern1">
	<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
		<defs>
			<pattern id="polygons" x="0" y="0" width="28" height="49" patternUnits="userSpaceOnUse">
				<path id="flipper" style="fill:#ff003c;fill-rule:evenodd; fill-opacity:0.9; fill-rule:nonzero;" d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"> </path>
			</pattern>
		</defs>
		<rect x="0" y="0" width="100%" height="100%" fill="url(#polygons)"></rect>
		<animate xlink:href="#flipper" attributeName="fill" dur="20s" keyTimes="0; .15; .3; .45; .6; .75; .9; 1" keySplines=".42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;
                .42 0 1 1;
                0 0 .59 1;" repeatCount="indefinite" values="#ff003c; #ffae00; #ff6200; #00e6ff; #ff006f; #f700ff; #7b00ff; #0011ff;" />
	

	</svg>
	<div class="glass"></div>
	</div>`