91 lines
1.8 KiB
Markdown
91 lines
1.8 KiB
Markdown
|
|
|
|
### 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!
|
|
|
|
|
|
---
|
|
|