# Style My Glitch
HTML/CSS Web basics
# Q: What do you wanna work on?
# Resources
[All the syntax](https://www.w3schools.com)
[Beautiful References](https://www.awwwards.com)
# Introduce Glitch
* HTML/CSS/JS
```
index.html
style.css
script.js
```
* What they does?
* Markup Language
* Javascript (but not too deep)
* how to add/delete files/path
* folders
# HTML basics
* what are tags, open close tags?
* W3 Schools
* HTML template
* head: Title/meta/script(css/js)
* body
* comments
* h1/h2/h3...
* p
* br
* pre
* img
* src (path)
* alt
* vid
* iframe
* a
* links
* href
* target
* ul li
* div (id/class) - inline v.s. block elements
https://www.w3schools.com/html/html_blocks.asp
* row-column (grid)
# CSS (Cascading Style Sheet)
https://www.w3schools.com/css/css_intro.asp
## syntax
```css=
section{
}
#id{
}
.class{
}
```
* inheritance
* family-child
```css=
body div h1{
color: blue;
/*this is more important*/
}
h1{
color: red;
}
```
* comments
```css=
/* This is a single-line comment */
```
* color~
* [color/gradients](https://www.w3schools.com/css/css_colors_rgb.asp)
* [background](https://www.w3schools.com/css/css_background_repeat.asp)
```css=
color: red;
color: #ff0000;
color: rgb(255, 0, 255);
color: rgba(255, 0, 255, 0.5);
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
/*shorthand*/
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
```
## [Composition (box model)](https://en.wikipedia.org/wiki/CSS_box_model)
```css=
*{ /*universal selector*/
margin:0;
padding:0;
border: 1px solid red;
box-sizing: border-box;
}
```
[margin](https://www.w3schools.com/css/css_margin.asp)
[padding](https://www.w3schools.com/css/css_padding.asp)
[border](https://www.w3schools.com/css/css_border.asp)
* [position](https://www.w3schools.com/css/css_positioning.asp)
```css=
nav{
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
```
* [height/width](https://www.w3schools.com/cssref/css_units.asp)
```css=
div {
height: 100 px;
width: 100 px;
}
```
* z-index
* flexbox (simran)
https://www.w3schools.com/css/css3_flexbox.asp
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* CSS Frameworks (simran)
https://www.quackit.com/html/templates/simple_website_templates.cfm
## Typography
* font size
```css=
font-size: 12px;
```
* font family (google font)
https://fonts.google.com
```css=
font-size: 12px;
```
* font weight
```css=
font-weight: 500;
```
* letter-spacing/word-spacing
```css=
letter-spacing: 500;
```
* line height
```css=
line-height: 2;
```
* text-align
```css=
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
```
* text-decoration
```css=
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline overline line-through;
```
## Interaction
* :hover
```css=
a{
text-decoration: none;
color: #000;
}
a:hover{
color: red;
}
```
* [transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)
```css=
transform: translate(120px, 50%);
transform: scale(2, 0.5);
transform: rotate(0.5);
transform: skew(30deg, 20deg);
```
* transition
```css=
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
```
```css=
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
transform: rotate(180deg);
}
```
* animation
```css=
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
```
## Responsive
* [media query](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
```css=
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
```
# JavaScript
* nav on all pages using import
**create nav.html**
**put this in your html to replace the nav**
```html=
<div id="nav"></div>
```
**put this javascript in the html head**
```html=
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function() {
$("#nav").load("nav.html");
});
</script>
```
**steps**
1. nav.html
2. nav in html
3. nav in javascript
Sign in with Wallet
Connect another wallet