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
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>
`
: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);
}
</div>`
Top comments (0)