2023-11-01 17:18:54 +00:00
### Week 7: Coding with EXTRA! Javascript & CSS in websites
---
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
2023-11-01 17:24:03 +00:00
- the tools we can use to edit HTML code in
- https://html.onlineviewer.net/
2023-11-01 17:18:54 +00:00
Today we are going to start programming in CSS! This makes your website **PRETTY** !
---
2023-11-01 17:29:18 +00:00
# Group Projects time for 25 minutes
2023-11-01 17:18:54 +00:00
2023-11-01 17:29:18 +00:00
Let me know if you'd like help with your website.
2023-11-01 17:18:54 +00:00
---
2023-11-01 17:29:18 +00:00
### Building Blocks of a Website
2023-11-01 17:18:54 +00:00
2023-11-01 17:24:03 +00:00
2023-11-01 17:29:18 +00:00
![[imgFiles/Pasted image 20231010141612.png]]
2023-11-01 17:24:03 +00:00
2023-11-01 17:29:18 +00:00
- 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..
2023-11-01 17:24:03 +00:00
---
## Step 1. Let's go to [neocities.org ](https://neocities.org/)
![[Pasted image 20231101131959.png]]
You'll see a lot of interesting website examples here.
2023-11-01 17:18:54 +00:00
---
2023-11-01 17:24:03 +00:00
## Step 2. CSS Building blocks
2023-11-01 17:18:54 +00:00
2023-11-01 17:29:18 +00:00
CSS stands for *Cascading Style Sheets* .
2023-11-01 17:18:54 +00:00
2023-11-01 17:29:18 +00:00
CSS files are for creating **rules** for the standard designs of every webpage on your website.
2023-11-01 17:18:54 +00:00
2023-11-01 17:29:18 +00:00
Think of a page like youtube or instagram. 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.
2023-11-01 17:18:54 +00:00
---
2023-11-01 17:29:18 +00:00
### Step 3. Javascript Building Blocks
Every website typically ties in both HTML and CSS with a bit of
2023-11-01 17:18:54 +00:00
Start by typing this line in your program
```html
<!DOCTYPE html>
< html >
< / html >
```
---
### 2. Next is the Header!
```
<!DOCTYPE html>
< html >
< head >
< / head >
< / html >
```
---
### 3. Next is the Body!
```
<!DOCTYPE html>
< html >
< head >
< / head >
< title > This is the tile of my site!
< / title >
< body >
& This is where the text of a website goes
< img src = " .jpg" >
< / body >
< / html >
```
---
## Save this file as hello.html file
& drag it to your browser window.
Ta-da!! You have just launched your web design...but there's only text in it
---
## Give it Pizzazz
Change the background color in the `body` tag.
```
<!DOCTYPE html>
< html >
< body style = "background-color:powderblue;" >
```
Change the size of the text with the `h` tags & `p` tags
```
< h1 > This is a heading< / h1 >
< p > This is a paragraph.< / p >
< / body >
< / html >
```
Add an image from the internet with:
```
< img src = "imagehere.jpg"
```
Make sure that it is a .jpg or a .png file !
