---
# System prepended metadata

title: Style My Glitch

---

# 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://i.imgur.com/UClwKRP.gif)

![](https://i.imgur.com/dQYdsdP.gif)


https://www.w3schools.com/css/css_intro.asp
## syntax
```css=
section{

}
#id{

}
.class{

}
```

* inheritance
![](https://i.imgur.com/E9Vgvle.gif)

![](https://i.imgur.com/JZU5qu7.png)

* 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)

![](https://i.imgur.com/yHIYqza.gif)

![](https://i.imgur.com/XwsYgL4.png)

```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)

![](https://i.imgur.com/m2xjK1x.png)



```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

![](https://i.imgur.com/vLGrKpj.jpg)


* flexbox (simran)

![](https://i.imgur.com/10jRyOd.png)
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
![](https://i.imgur.com/eMmtI16.gif)

* 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
![](https://i.imgur.com/Ak0pDaD.png)

```css=
letter-spacing: 500;
```
* line height
![](https://i.imgur.com/NUTxfDT.png)

```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
![](https://i.imgur.com/CChklzL.gif)

* :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
![](https://i.imgur.com/m3B1dSi.gif)

* [media query](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
```css=
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
```

# JavaScript
![](https://i.imgur.com/BIKorwY.gif)
![](https://i.imgur.com/WUwQvnd.gif)

* 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