### Week 7: Coding with ✨FLARE!✨ 
## CSS & Javascript in websites

Miss Shway

(Shwetha Jayaraj)

---

# Welcome back to Developer land. 

So far we have learned: 
- what real programmers use to upload their code for others to collaborate.  Using **Github.com** 
- **HTML** basics to make a website 
- the tools we can use to edit HTML code in 
	- https://html.onlineviewer.net/




---

# Group Projects time for 25 minutes

Let me know if you'd like help with your website. 





---

### Building Blocks of a Website 



![[imgFiles/Pasted image 20231010141612.png]]


- HTML - the content and "bones" of a website
- CSS  - the decorations, here we can add fancy decorations
- Javascript - animations can be added here, game-making, scripting, etc..

---

## Step 1.  Let's make a visit to [neocities.org ](https://neocities.org/)


Today we are going to start programming in CSS! This makes your website **PRETTY**! 
![[Pasted image 20231101131959.png]]

You'll see a lot of interesting website examples here. 

---


## Step 2.  CSS Building blocks

CSS stands for *Cascading Style Sheets*. 

- CSS files  are for creating **rules**  for standard designs of every page on your website. 

- Think of a site like [youtube.com](https://www.youtube.com/)

	- All the fonts, designs are **kept the same** on each part of the site. 

This is what CSS helps do! It gives decorative **rules** for the developer to choose from. (especially as we create multiple webpages in our site)


---

###  Step 3. Javascript Building Blocks
Every website typically ties in  both HTML and  CSS with a bit of javascript for some additional **flare**.

For example: 
https://codepen.io/sadness97/pen/KKobMWx




---

## We will get around to Javascript in the next class. 
For now, keep working in CSS inside of neocities.org!


---